Bracketsのプラグインでよさそうなものをいくつかインストールしてみます。
インストール方法
プラグインのインストールは右側のアイコンで行えます。
右上の検索ボックスからインストールしたいプラグイン名を入力します。
インストールしたいプラグインが見つかったら、右側にあるインストールボタンをクリックしてインストールします。
「インストールは成功しました。」と出ればインストール完了です。
インストールは他にもzipファイルから行う方法とURLを指定して行う方法もあるようです。
インストールしたプラグイン
- Emmet
- Emmetが使えるようになります。
- Brackets Tools
- HTMLやURLのエンコード/デコード、空白行や改行の削除など、細々としたツールがまとまっています。
- Extensions Rating
- プラグインのDL数などが確認できるようになります。
- Shizimily Multiencoding for Brackets
- UTF-8以外の文字コードに対応します。
デフォルトだとBracketsはUTF-8以外には対応していません。
UTF-8以外のファイルを開こうとすると、以下のようにエラーが出ます。
Shizimily Multiencoding for Bracketsをインストールすると、UTF-8以外のファイルも開けるようになります。
(プラグイン追加後すぐは文字化けしていたのですが、何度か編集・保存を行ってみると文字化けしなくなりました。)
右下から文字コードの設定の変更も行えます。
- colorHints
- ファイル内で使用している色指定をコードヒントとして表示します。
- CSSFier
- HTMLコードをコピーしてCSSファイルに張り付けると自動でセレクタを出力します。
HTMLコードを選択してコピーします。
CSSファイルでペーストをすると、コピーしたコードからセレクタを自動で出力します。
- Brackets Outline List
- ファイル構造のアウトラインを表示します。
右側に表示されるアイコンをクリックすると、左側にアウトラインが表示されます。
アウトラインの要素をクリックすると、その要素のある行にジャンプできます。
- Minimap
- 右側にファイルのミニマップを表示します。
- CSSLint
- CSSLintの結果を表示します。
右下のアイコンをクリックすることで表示できます。
- JavaScript Globals
- グローバル変数を赤字+下線で表示します。
- Rename JavaScript Identifier
- 変数や関数名の一括置換ができます。
変更したい変数・関数名上でctrl + Rで実行できます。
- Theseus for Brackets
- ライブプレビューでjsのデバックが行えます。
関数の実行を追跡して確認できます。
- Autoprefixer
- ベンダープレフィックスを自動付与します。
インストール後、編集 > Auto prefix on save にチェックを入れる必要があります。
- Indent Guides
- インデントのガイド表示します。
【参考サイト】
- Web制作が爆捗するBracketsプラグイン13選＆便利なプラグインを探すコツ – ＠IT
- Brackets おすすめエクステンション集・解説 – Qiita
- WordPress開発が捗りそうなBracketsおすすめ拡張40個まとめ
- Adobe製のJavaScriptデバッガTheseusがすごい – Qiita
コメントが承認されるまで時間がかかります。