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

これまで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にコメントを記述する方法の備忘録

###プロジェクト単位での設定変更も可
プロジェクトに指定したフォルダの直下に.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が特殊だったのか…。とても便利なんですが。