【コーディングが楽しくなる】Bracketsおすすめプラグイン17選

この記事では、コードエディタ「Brackets」でコーディングが楽しくなる便利なプラグインを紹介します。よかったら参考にしてください。

以前私は、SublimeText派で不満はありませんでしたが、PSDのカンプからコーディングを行うのに便利な「Extract for Brackets」というプラグインのあるBracketsについつい浮気しちゃいました。（現在「Extract for Brackets」は開発が終了し、使用できません）

そして浮気がそのまま本命に…(笑)現在はBrackets一本です。

Bracketsとは？

Adobe製のWeb開発向けの無料コードエディタです。（ダウンロードリンク）

Bracketsは、日本語がデフォルトで使用でき無料です。（Sublime Textは試用期間に制限のないシェアウェアなので、保存するときにたまにウィンドウで買わない？って聞かれますよね）

そして、豊富なプラグインがあり、emmetももちろん使えます。ライブプレビュー機能があるので、コードを入力後、すぐにブラウザで表示を確認できます。

唯一残念なのは、起動時間です。さくっと起動するのはSublime Textです。

プラグインリスト

【プラグインのインストール方法】
Bracketsを起動し、拡張機能マネージャーで、プラグインの名前を検索しインストールボタンを押すとインストールできます。

入力補助系

• Emmet
  HTML・CSSを素早く書き上げるためのプラグイン。独自の記法になれるまで少し時間がかかりますが、覚えたらとても快適！チートシートを見ながらよく使用するタグだけでも覚えるととても早くなります。
• Brackets Snippets (by edc)
  スニペット管理ができるプラグインです。私はCSSのUTF-8の宣言や、コメントのスニペットを追加して使用しています。
• CSSFier
  HTMLをコピーし、CSSファイルにペーストすると、HTMLに含まれる要素・Class・ID名を自動的に抜き取ってCSSの形式に変換します。要素・Class・ID名の記載間違いや漏れを一気に減らせる便利なプラグインです。
• Brackets CSS Class Code hint
  HTMLファイルにて、読み込んでいるCSSファイルのクラスやID名をコードヒントとして表示します。CSS⇒HTMLの時は「Brackets CSS Class Code hint」HTML⇒CSSの時は「CSSFier」を使用すると便利ですね。
• Brackets Sass Hints
  SASSのファイルでコードヒントを表示してくれます。SASSで指定した変数もヒントとして出してくれるので便利です。が、同ファイル内だけのようです。

機能系

• WD Minimap
  コードのキーマップを縮小して右側に表示するプラグイン。長いコードだとファイル内を移動するのが大変なので、あるととても便利です。
• Shizimily Multi-Encoding for Brackets ※Brackets1.10からは必要なし
  UTF-8以外のエンコードのファイルでもBracketsで開けるようにするプラグイン。
• colorHints
  ファイル内で指定しているカラーをコードヒントとして表示します。
• Brackets Css Color Preview
  CSSで、カラーコードを指定したコードの行頭に指定色の正方形を表示させます。一目で違いが分かって便利です。
• Brackets SASS
  BracketsでSASSをコンパイルしてくれるプラグイン。私はGUIで便利なkoalaで自動コンパイルし、Brackets上では入力のみおこなっています。
• spell-check
  名前の通り、英語を初め複数言語のスペルチェックをしてくれます。ドイツ語等は使うことはもちろんないので、英語しか使用してません。よくスペルミスをしてエラーが出て首を傾げる私には必須アイテム。
• Indent Guides
  インデントを分かりやすく表示します。開始タグと終了タグの位置が一目瞭然です。
• Highlight Multibyte Symbols
  全角英数字・記号を分かりやすくハイライトするプラグイン。打ち間違いをすぐに訂正できて便利ですね。

整形系

• EditorConfig
  ルールを守った統一性のあるコーディングのために役に立つプラグイン。インデントの種類、数などをあらかじめ設定ファイルに記載し、プロジェクトフォルダのルートに置いておくと自動的に反映されます。
• Paste and Indent
  コードをペーストした時に自動でインデントしてくれるプラグイン。些細な機能ですが、ペーストするコードが長いときは便利です。
• CSScomb Brackets plugin
  思いつくままに打ったCSSのプロパティを整理して、ルールにのっとった順番に置き換えてくれます。SASSファイルには対応していません。
• Beautify
  コードを整形してくれるプラグイン。minファイルをいったん見やすい形で表示したいときや、インデントを一気に変換したい際に使えます。

まとめ

私が現在使用しているプラグインを挙げてみましたが、まだまだたくさんBracketsにはプラグインがあります。便利なものがあれば随時更新・追加していきます。

Tweet

Pocket