Help us understand the problem. What is going on with this article?

【個人メモ】Bracketsにいれる拡張機能・テーマ・参考リソースなど

More than 1 year has passed since last update.

これまでDreamweaverをメインに使ってきましたが、コードビューがBracketsになったので、慣れるためにも本家のBracketsを真面目に使ってみようと思い、触り始めました。
拡張機能、テーマ、環境設定などの個人メモ。※適宜更新していく予定。

アプリ本体

本家サイト
http://brackets.io/

拡張機能

おすすめ拡張機能を語るサイトでは、とりあえずExtensions Ratingをおすすめされるが、1.9でExtension Managerに標準でダウンロード数または最終更新日でソートが出来るようになったので導入は見送り(Extensions Ratingでは他にも追加される項目があるので必要な方は入れてもいいかも)。

Beautify

JavaScript、HTML、CSSを見やすいよう整形。対象範囲を選択し、ショートカット(Mac:Cmd+Shift+L, Win:Ctrl+Shift+L)または編集→Beautifyで実行。
自分は「保存時にBeautifyする」にチェックを入れた。
→ PHPの整形時に意図した形にならないので、選択範囲をBeautifyに変更
https://github.com/brackets-beautify/brackets-beautify

Shizimily Multiencoding for Brackets

Shift_JIS、EUC-JPを始めとするUTF-8以外の様々なエンコーディングのファイルに対応させる。
https://github.com/Hiromi-Ayase/brackets-shizimily-multiencoding
→ 1.10で複数のエンコードをサポート対応したため不要になりました。

Custom Work

開いているファイルのタブ表示を追加。その他サイドバーの表示↔非表示を切り替えるトグルボタンやファイル名にアイコン表示など、これ1つでいろいろな表示系のカスタマイズをしてくれる。
https://github.com/alessandrio/custom-work-for-brackets
以下でインストール、機能など詳しい解説あり

Bracketsでおすすめのタブ表示拡張機能プラグインTabs-Custom Working
http://creating-homepage.com/archives/4970
BracketsのTabs-Custom Working拡張機能プラグインの使い方 まとめ
http://creating-homepage.com/archives/5060
BracketsのTabs-Custom Working拡張機能プラグインの使い方 Custom Work設定(Preferences Menu)画面編
http://creating-homepage.com/archives/5023

Highlight Multibyte Symbols

全角の英数文字・記号・空白を赤い下点線を表示、半角スペース、タブは記号を表示。
https://github.com/assialiholic/brackets-highlight-multibyte-symbols

Indent Guides

インデントのガイド線を表示。
https://github.com/lkcampbell/brackets-indent-guides

Brackets Key Remapper

brackets.jsonにデフォルト機能・エクステンションのショートカット・コマンドID一覧を生成。
これによりエクステンションの機能のショートカットも変更可能に。
https://bitbucket.org/sacah/brackets-key-remapper

HTML Block Selector

開始・終了タグどちらかにフォーカスが当たっている状態でCtrl+Shift+Tを押すと、対応するタグまでの範囲を選択
https://github.com/sathyamoorthi/html-block-selector

Overscroll

ファイルの最終行より更に下方までスクロール出来るようになる。
https://github.com/Emmeran/brackets-overscroll

Brackets Snippets (by edc)

HTML/JS/PHPのスニペット集。カスタム登録も可。
https://github.com/chuyik/brackets-snippets

挿入時のカーソル位置とか指定できてしかもマルチカーソル対応。コードヒントでも出てきて素晴らしすぎる。
以下で詳しい解説あり

Brackets × "スニペット管理" で爆速コーディングを実現する
http://qiita.com/assialiholic/items/c6d12a829f87f8d5fdab

Brackets CSS Class Code hint

CSSで記述しているクラス名やID名を、HTML側で入力補完を行う。
https://www.granneman.com/webdev/editors/brackets/extensions/css-class-code-hint/

Minimap

右側にコードのミニマップを表示
https://github.com/zorgzerg/brackets-minimap

JS CSS Minifier

CSSとJSを圧縮する。
https://github.com/abagshaw/brackets-minifier
CSSをSCSSで管理するようになったので使わなくなりました。

Whitespace Normalizer

ファイル保存時に、不要なインデントを削除
https://github.com/dsbonev/whitespace-normalizer
下のWhite Space Sanitizerに変更

White Space Sanitizer

・ファイル保存時に、不要なインデントを削除
・行末の不要な空白を削除
・最後に空の1行追加
・言語ごとにインデント設定をカスタマイズできる
・タブとスペースが混在していても設定に応じて変換
https://github.com/MiguelCastillo/Brackets-wsSanitizer

Paste and Indent

ペーストしたコードを、前後の構造に合わせて自動的に正しくインデントしてくれる
https://github.com/ahuth/brackets-paste-and-indent

Brackets Tools

以下の機能を追加してくれる
・空白行の削除
・改行の削除
・行頭の連番を削除
・重複行の削除
・単語リストを配列に変換
単語リストをulリストに変換
HTMLタグの消去
空白行(タブやスペースのみの行も)の削除
先頭や末尾からX文字削除
単語を小文字化、ハイフン区切りに
大文字または小文字に変換
単語の1文字目を大文字に変換
HTMLエンコード/デコード
URLエンコード/デコード
https://github.com/yasinkuyu/brackets-tools

下記で詳しい説明あり
Bracketsの7つ道具的エクステンション Brackets Tools
http://qiita.com/assialiholic/items/7ee66c7097abae3c32ad

Color Highlighter

CSS、LESS、SCSS、SASS、Stylusで指定しているカラーコード上で色をハイライト表示
https://github.com/Taraflex/Brackets-Color-Highlighter

emmet

HTMLやCSSのコーディングを高速化
https://github.com/emmetio/brackets-emmet#readme

SVG Preview

SVGファイルを開きながらリアルタイムでプレビュー
https://github.com/peterflynn/svg-preview

Various improvements

Bracketsに以下の便利な機能を追加する拡張機能です。
・プロジェクト内にあるファイルを検索
・ファイルの更新日とサイズを表示
・ファイルの置き場所を表示
・ファイルツリー内のサブフォルダーの展開をすべて折りたたむ
https://github.com/Dammmien/brackets-various-improvements

colorHints

ファイル内で一度使用した色指定を、コードヒントとして視覚的に表示。
https://github.com/konstantinkobs/brackets-colorHints

brackets-drop-includer

コンテクストメニューに「Browse...(Root Path)」、「Browse...(Relative Path)」、、「Browse...(Modal Window)」を追加。ショートカットメニューもセットになっており便利。ルートもしくは相対リンクでファイルの位置を挿入できるようになる。またファイルのドラック&ドロップにも対応
https://github.com/jzmstrjp/brackets-drop-includer

Brackets Icons

左ペインのファイルツリーにアイコンを付加してくれる
https://github.com/ivogabe/Brackets-Icons

以下で詳しい解説あり

Bracketsでファイルツリーにアイコンを表示するBrackets Icons拡張機能プラグイン
http://creating-homepage.com/archives/4515

Brackets SASS Code Hints

SASS記法にコードの補完追加
https://github.com/sprintr/brackets-sass-code-hints

Brackets Wordpress Hint

WordPressのコード補完をだしてくれる。WordPressのテーマやfunction.phpを編集する際に便利
https://github.com/Tusko/brackets-wp-hint/

導入検討中

Brackets SASS

SASSファイルを自動でコンパイルしてくれる。保存しなくてもリアルタイムでライブプレビューしてくれる(←これは便利だけど業務では仕組み上、使えてないorz)
https://github.com/jasonsanjose/brackets-sass/

SASS/SCSS Hints

SASSのmixin、includeの読み出しの補完
https://github.com/maximmis/brackets-SASShints

テーマ

拡張機能マネージャーでダウンロード数でソートされるのでよく使われているものをいくつか導入してみるのもよいですが、以下のサイトでプレビューを確認しながらダウンロードするのもおすすめ
http://brackets-themes.github.io/

個人的に現在使用しているのは
OS X Style - Flat & Dark
https://github.com/altayaydemir/brackets-osx-flat-dark-theme

環境設定カスタマイズ

本家リソース(英語)

https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#preferences

環境設定の変更

デバッグ > 環境設定ファイルを開く を選択。
左側にdafaultPreferences.json(変更不可、アプリのデフォルトの設定)、右側にbrackets.jsonが開く。brackets.jsonに変更したい設定をコピペして変更していく。
※少しハマったのが、brackets.jsonにコピペの際にコメント行をつけてペースト、リロードしたらエラーが出る。コメント行は必ず削除(何故かは不明)。
調べたらJSONにはコメントを入れることができないことがわかりましたw
以下参照
JSONにコメントを記述する方法の備忘録

170505-0001.png

プロジェクト単位での設定変更も可

プロジェクトに指定したフォルダの直下に.brackets.jsonをいれておくと、さらにオーバーライドされてプロジェクト毎の設定変更が可能になる。

参考リソース

Bracketsエディタの設定を複数PC環境で同期させる方法

家と会社のBracketsの環境設定、拡張機能、ショートカット設定を同期する方法はないかと模索中(リンク先はWindowsですが、家も会社もOSX)。要はDropboxで設定ファイル、フォルダを同期し、シンボリックリンクを作成する(多分WinもOSXも同じ)。
https://nelog.jp/sync-brackets-settings
※OSXでシンボリックリンクを作成する方法
http://www.danshihack.com/2015/02/24/junp/dropbox-symboliclink.html

Bracketsでテキストをドラッグ&ドロップで移動できるようにする設定方法

デフォルトではできない。環境設定で "dragDropText": true を追加
https://nelog.jp/brackets-text-drag-and-drop

不満点

複数行の検索置換ができない

今までつかったエディタ(Dreamweaverメイン)では経験したことなかったけど、どうも複数行の検索置換ができない模様。1行ごととかできないとかありえないorz
早く修正されてほしい。
→ どうやら1行での検索置換はエディタでは普通のようです…。Dreamweaverが特殊だったのか…。とても便利なんですが。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away