Brackets おすすめエクステンション集・解説

**Qiita上の内容を集約し、大幅に修正・加筆したものを本として出版しました。**
→[ブログ：Bracketsの解説書を出版しました](http://www.thinkingsalad.com/technology/textbook_of_brackets)

# 基本的な使い方
こちらにて別途紹介しています。
→[Bracketsの機能紹介、使い方解説] (http://qiita.com/assialiholic/items/c8137321c7599a168b16)
→[Bracketsショートカット集](http://qiita.com/assialiholic/items/7683d94108b12f1ca3ad)

# カテゴリ一覧

* [必ず入れておきたいもの](#%E5%BF%85%E3%81%9A%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E3%82%82%E3%81%AE)
* [ソースコード関連-全般](#%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E9%96%A2%E9%80%A3-%E5%85%A8%E8%88%AC)
* [ソースコード関連-HTML/CSS](#%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E9%96%A2%E9%80%A3-htmlcss)
* [ソースコード関連-JS/PHP、その他](#%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E9%96%A2%E9%80%A3-jsphp%E3%81%9D%E3%81%AE%E4%BB%96)
* [画像・デザインデータ連携系](#%E7%94%BB%E5%83%8F%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%87%E3%83%BC%E3%82%BF%E9%80%A3%E6%90%BA%E7%B3%BB)
* [挙動改善系](#%E6%8C%99%E5%8B%95%E6%94%B9%E5%96%84%E7%B3%BB)
* [機能拡張系](#%E6%A9%9F%E8%83%BD%E6%8B%A1%E5%BC%B5%E7%B3%BB)

という形でカテゴリ分けをしています。
※各エクステンションまだまだ機能をフルに使い切れてないところもありますので、何卒ご容赦ください。。。

# 必ず入れておきたいもの

## [Extensions Rating](https://github.com/dnbard/brackets-extension-rating)
拡張機能一覧画面において、ソート可能にしたり各エクステンションの作者のアイコン・DL数・スター数等の情報を表示してくれます。
これにより、拡張機能がとても探しやすくなります。
![Extensions Rating.png](https://qiita-image-store.s3.amazonaws.com/0/48404/1c0a0bdd-fff3-6258-bed3-fca106ef9725.png)

## [Shizimily Multiencoding for Brackets](https://github.com/Hiromi-Ayase/brackets-shizimily-multiencoding)
BracketsをShift_JIS、EUC-JPを始めとするUTF-8以外の様々なエンコーディングのファイルに対応させてくれます。
ライブプレビューを起動してすぐは文字化けの状態だったのですが、何処か編集して保存・ライブプレビューリロードすると正常に表示出来るようになりました。
大変、ありがたいエクステンションです。

## [Sidebar Plus](https://github.com/sathyamoorthi/brackets-sidebar-plus)
サイドバーの挙動を改善してくれます。
デフォルトでは閉じるか開くかしか出来ませんが、このエクステンションにより「一時的に開く」ということが出来るようになります。
![Sidebar Plus.gif](https://qiita-image-store.s3.amazonaws.com/0/48404/321a2cf5-28a6-20cc-da6e-9443960cb8fc.gif)


## [Tabs - Custom Working](https://github.com/DH3ALEJANDRO/custom-work-for-brackets)
開いているファイルを上部にタブ表示してくれます。
ドラッグ&amp;ドロップでタブを移動出来る他、

* 左右のサイドバーの開閉
* 分割表示設定
* タブのソート
* タブの一覧表示

等の細やかですが便利な機能が備わっています。
**類似のエクステンション：**
・[Display Shortcuts](https://github.com/redmunds/brackets-display-shortcuts)

![Tabs - Custom Working.png](https://qiita-image-store.s3.amazonaws.com/0/48404/cc05c2d2-1d06-7c09-9da9-8a32832d1fdf.png)




## [Brackets File Icons](https://github.com/drewbkoch/Brackets-File-Icons)
ファイルツリーや他エクステンションで拡張したタブに拡張子ごとのアイコンを表示してくれます。これにより。パッと見で何のファイルか分かりやすくなります。
**類似のエクステンション：**
・[Brackets Icons](https://github.com/ivogabe/Brackets-Icons)

![Brackets File Icons.png](https://qiita-image-store.s3.amazonaws.com/0/48404/318ef790-25fb-bf5f-d679-852fa9cefd6a.png)


## [Brackets Key Remapper](https://bitbucket.org/sacah/brackets-key-remapper)
brackets.jsonにデフォルト機能・エクステンションのショートカット・コマンドID一覧を生成します。
これによりエクステンションの機能のショートカットも変更出来るようになります。
ショートカットカスタマイズの詳細は別途こちらの記事にて解説しています。
→[Bracketsのショートカットを変更してカスタマイズする方法](http://qiita.com/assialiholic/items/95b1f3502d7c03aed1be)


## [Beautify](https://github.com/drewhamlett/brackets-beautify)
JavaScript、HTML、CSSを見やすいよう整形してくれます。minファイル等を復元・解析する際に重宝します。
対象範囲を選択し、ショートカット（Mac:Cmd+Shift+L, Win:Ctrl+Shift+L）または`編集→Beautify`で実行出来ます。
![Beautify.gif](https://qiita-image-store.s3.amazonaws.com/0/48404/9a6fe7ee-7b00-46cb-4572-aede8435dbba.gif)


## [Brackets Editor Bookmarks](https://github.com/JeffryBooher/brackets-bookmarks-extension)
ソースコード内にブックマークを設定でき、いつでもブックマーク箇所へジャンプ出来ます。
もちろん複数設定も可能で、`表示→Show Bookmarks Panel`から呼び出せるパネルで一覧確認をすることも出来ます。
**ショートカット**

* ブックマークの追加・削除： ⇧⌘K（Mac） Ctrl+Shift+K（Win）
* 次のブックマークへ： ⌘PK（Mac） Ctrl+P（Win）
* 前のブックマークへ： ⇧⌘PK（Mac） Ctrl+Shift+P（Win）

ちなみにSublime Textでは<a href="https://sublime.wbond.net/packages/Sublime%20Bookmarks" target="_blank">sublime bookmark</a>というプラグインがほぼ同等の機能を持っています。
![Brackets Editor Bookmarks.png](https://qiita-image-store.s3.amazonaws.com/0/48404/97374fcc-2463-bae2-da68-525b79531360.png)


## [Indent Guides](https://github.com/lkcampbell/brackets-indent-guides)
インデントを表示してくれます。
下記の[Highlight Multibyte Symbols](#highlight-multibyte-symbols)と併用するととても見やすくなります。



## [Highlight Multibyte Symbols](https://github.com/assialiholic/brackets-highlight-multibyte-symbols)
拙作でお恥ずかしい限りですが、全角英数字・記号をハイライトします。
[Show Whitespace](https://github.com/DennisKehrig/brackets-show-whitespace)を基に機能追加をしているため、半角スペースもSublime Text風に表示します。
詳細はこちらにまとめています↓
[Bracketsのエクステンション Highlight Multibyte Symbols を公開しました | Thinking Salad](http://www.thinkingsalad.com/technology/brackets-highlight-multibyte-symbols)
![brackets-highlight-multibyte-symbols02.png](https://qiita-image-store.s3.amazonaws.com/0/48404/71d61d8d-e909-6b77-8db5-7e261741c48c.png)



## [HTML Block Selector](https://github.com/sathyamoorthi/html-block-selector)
開始・終了タグどちらかにフォーカスが当たっている状態でCtrl+Shift+Tを押すと、対応するタグまでの範囲を選択してくれます。
EmmetのGo To Matching Tag Pairとの違いは、Emmetは単にジャンプするのに対しこちらは選択してくれるので、削除・複製等の編集が容易になります。
ただしGo To Matching Tag Pairとショートカットがバッティングしやすいので、`デバッグ→環境設定ファイルを開く`から適宜ショートカットを調整してください。
![HTML Block Selector.png](https://qiita-image-store.s3.amazonaws.com/0/48404/04516bdf-dea8-ed96-79c8-9b3a94c2cd91.png)



# ソースコード関連-全般

## [Brackets Outline List](https://github.com/Hirse/brackets-outline-list)
ファイルの構造をアウトライン表示してくれます。
対応ファイルもJavaScript、CoffeeScript、CSS、SCSS、LESS、XML、HTML、SVG、Markdown、PHPと多様で、とても便利です。
**類似のエクステンション：**
・[BluePrint Beta](https://github.com/salt42/blueprint)

![Brackets Outline List.png](https://qiita-image-store.s3.amazonaws.com/0/48404/36ed994a-c573-ae45-36fd-eb1e96acf68a.png)
![Brackets Outline List02.png](https://qiita-image-store.s3.amazonaws.com/0/48404/f760898c-74fe-8769-930d-bbd5e3632561.png)

## [Brackets Snippets (by edc)](https://github.com/chuyik/brackets-snippets)
各種言語のスニペットを管理・展開出来るようにするエクステンションで、より効率的なコーディングを実現します。
詳細は別途こちらの記事にて解説しています。
→[Brackets × "スニペット管理" で爆速コーディングを実現する](http://qiita.com/assialiholic/items/c6d12a829f87f8d5fdab)

## [Brackets Tools](https://github.com/yasinkuyu/brackets-tools)

* 単語リストを配列に変換
* 無駄な改行の削除

等、これ1つでコーディングやプログラミングが便利になる様々な機能を追加することが出来ます。
機能が多いので、詳細は別途こちらの記事にて解説しています。
→[Bracketsの7つ道具的エクステンション Brackets Tools](http://qiita.com/assialiholic/items/7ee66c7097abae3c32ad)

**類似のエクステンション：**
・String Convert

## [Minifier](https://github.com/wylst/brackets-minifier)
CSS/JSをminify出来ます。
![min.png](https://qiita-image-store.s3.amazonaws.com/0/48404/0f4314bf-d1a9-040c-72cc-a07ffebd26ea.png)

## [Overscroll](https://github.com/Emmeran/brackets-overscroll)
ファイルの最終行より更に下方までスクロール出来るようになります。
小さなことですが、かなり便利になります。（SublimeTextはデフォルトでこの機能を搭載しています）

## [Paste and Indent](https://github.com/ahuth/brackets-paste-and-indent)
ペーストしたコードを、自動的に正しくインデントしてくれます。
これによりいちいち自分でインデントを調整する手間が省けますが、元々インデントが無いファイルにペーストした場合はその箇所だけインデントされるので、場合によっては注意が必要です。
![Paste and Indent.png](https://qiita-image-store.s3.amazonaws.com/0/48404/1a7652fd-ed30-77ca-3c88-9f62069e772a.png)

## [WD Minimap](https://github.com/websiteduck/brackets-wdminimap)
SublimeText風のミニマップを追加します。
**類似のエクステンション：**
・[Minimap](https://github.com/zorgzerg/brackets-minimap)
・[BluePrint Beta](https://github.com/salt42/blueprint)

![WD Minimap.png](https://qiita-image-store.s3.amazonaws.com/0/48404/23b7e974-4b7d-808a-e729-9e1c8f1d6e8a.png)



## [Whitespace Normalizer](https://github.com/dsbonev/whitespace-normalizer)
ファイル保存時に、不要なインデントを削除してくれます。
![Whitespace Normalizer.gif](https://qiita-image-store.s3.amazonaws.com/0/48404/2d436f7c-35fb-1bea-0ff5-d67e61048d20.gif)


# ソースコード関連-HTML/CSS

## [Brackets Css Color Preview](https://github.com/cmgddd/Brackets-css-color-preview)
色指定をしている行の左側に、実際の色を表示してくれます。
**類似のエクステンション:**
・[Color Highlighter](https://github.com/QW0101/Brackets-Color-Highlighter)
![Brackets Css Color Preview.png](https://qiita-image-store.s3.amazonaws.com/0/48404/ede33096-4c32-5901-4da9-31eb9a22eb61.png)


## [Brackets SASS](https://github.com/jasonsanjose/brackets-sass)
BracketsでSassのリアルタイムライブプレビューを実現します。
デフォルトでも条件を整えればライブプレビューは出来るのですが、こちらのエクステンションはlibSassを用いているため、色々と挙動が異なります。
Sassのライブプレビューについては[こちら](http://qiita.com/assialiholic/items/86b2b20fa9d789d65d26)で詳しく解説しています。

## [colorHints](https://github.com/konstantinkobs/brackets-colorHints)
ファイル内で一度使用した色指定を、コードヒントとして視覚的に表示してくれます。
![colorHints.png](https://qiita-image-store.s3.amazonaws.com/0/48404/23d59856-167c-5261-5e69-96c89f258ee3.png)

## [CSSFier](https://github.com/rcaferati/brackets-cssfier)
HTMLコードをコピーしてCSSに貼り付けるだけで、自動的にHTMLをCSS
セレクタに変換してくれます。
SASSの場合は自動的にネストまでしてくれます。
![cssfier.gif](https://qiita-image-store.s3.amazonaws.com/0/48404/4f1a5389-9328-e636-ae78-bd1e24030745.gif)


## [CSSLint](https://github.com/cfjedimaster/brackets-csslint)
CSSLintの結果を保存時にリアルタイムに表示してくれます。
![csslint.png](https://qiita-image-store.s3.amazonaws.com/0/48404/d8cee05c-3b36-eeb1-c54e-60a30006a286.png)

## [SASSHints](https://github.com/konstantinkobs/brackets-SASShints)
SASSの変数をコードヒント表示に対応させます。
![SASShints.png](https://qiita-image-store.s3.amazonaws.com/0/48404/d34d5203-325b-4c1d-a75f-e5bd9e1e43f8.png)

## [Emmet](http://emmet.io/)
みんな大好き、Emmetです！
Emmetの詳細な説明につきましては、下記サイト様が大変参考になります。
[Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫](http://leko.jp/archives/442)

## [Interactive Linter](https://github.com/MiguelCastillo/Brackets-InteractiveLinter)
各種lint/hint系の結果をリアルタイムに表示してくれます。
2015/09/06現在でcoffeelint・csslint・htmlhint・eslint・jscs・jshint・jslint・jsx・jsonlintに対応しています。
ただしシンタックスエラーは指摘してくれますがセマンティックエラーは指摘してくれず、また[W3CValidation](#w3cvalidation)と併用しても、Interactive Linterの方の結果のみが表示される形となります。
![Interactive Linter.png](https://qiita-image-store.s3.amazonaws.com/0/48404/0868519a-a93f-5f6c-ee00-7b10b0608dbf.png)

## [Special Html Characters](https://github.com/thaneuk/brackets-special-html-chars)
Alt+cでエンティティが必要な特殊文字を一覧表示してくれます。
![special.png](https://qiita-image-store.s3.amazonaws.com/0/48404/6fbca585-0b08-43d2-9c27-6cf763951b15.png)

## [W3CValidation](https://github.com/cfjedimaster/brackets-w3cvalidation)
HTMLファイル保存時に、リアルタイムにバリデーションを実行してくれます。
![W3CValidation.png](https://qiita-image-store.s3.amazonaws.com/0/48404/5d8e6dfd-f5fd-8da7-b6d4-03c8196af25e.png)



# ソースコード関連-JS/PHP、その他

## [Rename JavaScript Identifier](https://github.com/asgerf/bracket-rename)
変更したい変数・関数名上でCtrl+Rを押下、名前を編集すると、他使用箇所にも自動で編集内容を反映してくれます。
![rename.png](https://qiita-image-store.s3.amazonaws.com/0/48404/7d716a7a-c3ae-d455-5168-95190e5d1cc7.png)

## [CDN Finder](https://github.com/dnbard/brackets-cdn)
[http://www.jsdelivr.com](http://www.jsdelivr.com)にて公開されている各種CDNを検索・取得できます。
似たものに[JavaScript & CSS CDN Suggestions](https://github.com/szdc/brackets-cdn-suggestions)というものもあり、こちらの方が素早く入力出来ますが、CDN Finderの方がバージョンが豊富な印象です。
どちらを使用するかはお好みでどうぞ。
![CDN Finder.png](https://qiita-image-store.s3.amazonaws.com/0/48404/b8d80705-a70d-1d97-20eb-5fc489d04e34.png)


## [JavaScript Globals](https://github.com/ForbesLindesay/brackets-globals)
JSコード内のグローバル変数を分かりやすく表示してくれます。
意図的に使いたい場合はもちろん、意図せずにグローバルになってしまっているものもすぐに判別出来るようになります。
![JavaScript Globals.png](https://qiita-image-store.s3.amazonaws.com/0/48404/32aaff61-3401-3f17-95ba-b3d8f18d89a9.png)


## [Theseus for Brackets](https://github.com/adobe-research/theseus)
Adobe製のJSデバッガーで、ライブプレビュー中のJSをリアルタイムで監視、デバッグすることが出来ます。
ファイル→Enable Theseusより、機能のON/OFFを制御します。
詳しい使い方の説明は、下記記事がとても参考になります。
[Adobe製のJavaScriptデバッガTheseusがすごい](http://qiita.com/YoshiyukiKato/items/1d13e6b62c37015e8dba)
![theseus.png](https://qiita-image-store.s3.amazonaws.com/0/48404/5e6ebc1d-6182-2616-a946-d9574d2aaed2.png)


## [QuickDocsJS](https://github.com/Wikunia/brackets-QuickDocsJS)
クイックドキュメント機能にJSのドキュメントを追加します。
（ショートカットはデフォルトのCtrl+Kのまま）
![QuickDocsJS.png](https://qiita-image-store.s3.amazonaws.com/0/48404/683370a7-2cf8-d612-ca5a-54d8b9d67124.png)

## [Brackets Wordpress Hint](https://github.com/Tusko/brackets-wp-hint/)
Wordpressタグのコードヒントを追加します。
![Brackets Wordpress Hint.png](https://qiita-image-store.s3.amazonaws.com/0/48404/73ce46e3-fe96-704a-7092-6a53b60d64d3.png)


## [PHP SmartHints](https://github.com/mackenza/Brackets-PHP-SmartHints)
PHPのコードヒントを表示してくれます。
画像のように例えば関数ならF、変数ならVのアイコンが付くので、直感的に分かりやすくなっています。
![PHP-SmartHints.png](https://qiita-image-store.s3.amazonaws.com/0/48404/304320f2-52f7-67bf-2921-6c7077be3461.png)

## [QuickDocsPHP](https://github.com/Wikunia/brackets-QuickDocsPHP)
クイックドキュメント機能にPHPのドキュメントを追加します。
（ショートカットはデフォルトのCtrl+Kのまま）
![QuickDocsPHP.png](https://qiita-image-store.s3.amazonaws.com/0/48404/1c136c79-8651-e0e9-77c8-828d67429bfd.png)

# 画像・デザインデータ連携系

## [Extract for Brackets (Preview)](https://helpx.adobe.com/creative-cloud/help/extract-for-brackets.html)
通称PSD Extractと呼ばれており、Bracketsに標準で組み込まれているAdobe製のエクステンションです。
PSDを読み込み下部に表示させ、コーディングに必要な様々な情報をその場で取得できます。

## [Brackets Color Palette](https://github.com/sprintr/brackets-color-palette)
Brackets内で開いている画像から、色を抽出出来ます。
![palette.png](https://qiita-image-store.s3.amazonaws.com/0/48404/a2d25c25-759b-6b76-3879-d31552dae616.png)

## [Swatcher](https://github.com/FreaKzero/brackets-swatcher)
スウォッチファイル(.aco)を読み込み、SASS/LESSにインポートします。
カラーピッカーによるインポートも可能です。
![Swatcher01.png](https://qiita-image-store.s3.amazonaws.com/0/48404/5e8d9352-7402-a1db-b33a-83c803267d86.png)
![Swatcher02.png](https://qiita-image-store.s3.amazonaws.com/0/48404/f758de29-2d7d-04cb-febe-9a50229e743f.png)


# 挙動改善系

## [brackets-file-tree-exclude](https://github.com/zaggino/brackets-file-tree-exclude)
プロジェクト内の除外リストを作成するためのエクステンションです。
Bracketsはプロジェクト内のファイルが30,000を超えると[横断検索・クイックエディット・クイックオープン等の一部の機能に制限がかかってしまう](https://github.com/adobe/brackets/wiki/Large-Projects)ので、それを回避したいときに活躍します。
グローバルで除外する場合はBrackets自体の設定ファイル（`デバッグ→環境設定を開く`）に、プロジェクト毎に個別で設定したい場合はプロジェクトルートに置いたbrackets.json内で設定します。

## [Console](https://github.com/ghalex/brackets-console)
console.log、console.errorを下部に表示させます。Brackets自身のコンソールだけでなく、ライブプレビュー中のJSのconsoleも表示出来るので、中々便利です。
![console.png](https://qiita-image-store.s3.amazonaws.com/0/48404/812eb905-4b31-7956-6eb4-b9be62ab2085.png)

## [Display Shortcuts](https://github.com/redmunds/brackets-display-shortcuts)
Ctrl+Alt+/で現在割り当て中のショートカットを確認できます。
上述のKey Remapperで独自に設定したものもちゃんと反映してくれます。
![shortcuts.png](https://qiita-image-store.s3.amazonaws.com/0/48404/a854f956-96b4-083e-dc5b-beb2afa317b6.png)

## [Various improvements](https://github.com/Dammmien/brackets-various-improvements)
様々なところを便利にしてくれるエクステンションです。
[公式](https://github.com/Dammmien/brackets-various-improvements)によると5つほどあるのですが、私の環境では画像の3つしか動作を確認出来ませんでした。
それでもかゆいところに手が届くため、一度使うと手放せないエクステンションです。
![variousImprovement.png](https://qiita-image-store.s3.amazonaws.com/0/48404/3facc6f0-240c-21e8-649a-86f25f99efc6.png)

# 機能拡張系

## [EditorConfig](http://editorconfig.org/)
名前の通り、BracketsをEditorConfigに対応させるエクステンションです。
EditorConfigについての詳細な説明は割愛させていただきますが、簡単に言えば改行コードやインデントの種類・幅等を異なる環境でも共通化させるためのものです。
→[公式サイト](http://editorconfig.org/)
![EditorConfig.png](https://qiita-image-store.s3.amazonaws.com/0/48404/38bb3c6f-770e-ce35-2860-8a2e3a16487b.png)

## [eqFTP](https://github.com/Equals182/eqFTP)
予めFTP設定をしておくと、ローカルのファイルを上書き保存したタイミングで自動的に指定のサーバー上の該当するディレクトリにアップロードしてくれます。
即時でアップロードするので本番環境では怖いですが、開発環境で良く使います。
![ftp.png](https://qiita-image-store.s3.amazonaws.com/0/48404/81856bcb-80e6-a7c8-bc13-d0c37eb23d41.png)

## [Edge Inspect extension for Brackets and Edge Code](https://creative.adobe.com/products/inspect)
BracketsとAdobe Edge Inspect CCを連携させるエクステンションです。Edge Inspectを使用することにより、開発をしながらリアルタイムにスマートデバイス（スマホ・タブレット）での実機確認が可能になります。
詳細は別途こちらの記事にて解説しています。
→[Brackets × Adobe Edge Inspect CCでスマホの実機チェックを効率化](http://qiita.com/assialiholic/items/8e862a20b8be11aa7c5b)

## [Extract for Brackets (Preview)](https://helpx.adobe.com/jp/creative-cloud/help/extract-css-images-psd-files.html)
インストーラーに標準搭載されているエクステンションです。
PSDをBrackets内に直接読み込み、

* 各レイヤーのwidth/height値の取得
* 隣のボックスとの相対的な距離の取得
* 適用されているスタイルをCSSとして取得
* 選択レイヤーをその場で画像としてスライスし、HTML/CSSにそのまま反映

といったことが出来るようになります。
詳細はこちらの記事にて別途解説しています。
→[PSDをテキストエディタで開く時代！次世代ツールExtract for Bracketsの使い方](http://qiita.com/assialiholic/items/d52c10605d821f597036)

## [Markdown Preview](https://github.com/gruehle/MarkdownPreview)
.mdのファイルをライブプレビュー出来るようになります。
オプションにてフォーマット（スタンダード・GitHub）の選択やテーマの変更が出来ますが、残念ながら通常のライブプレビューのように左右に並べての表示は出来ませんでした。
![markdown.png](https://qiita-image-store.s3.amazonaws.com/0/48404/409c6784-ecb3-505c-e244-96a64df5fb26.png)

## [Todo](https://github.com/mikaeljorhult/brackets-todo)
プロジェクト・ファイル単位でTodo管理が出来るようになります。
デフォルトでも十分使えますが、.todoファイルを設置することにより更に柔軟な設定・カスタマイズが出来ます。（[公式参照](https://github.com/mikaeljorhult/brackets-todo)）
![todo.png](https://qiita-image-store.s3.amazonaws.com/0/48404/9e7bafd9-f9dd-49ca-1cb8-5ab9d19116fc.png)

ファイルに直接コメントとして書き込むのでクリーン性からすると考えどころではありますが、こちらを活用すれば確かに作業忘れは減りそうです。
個人的には設定をプロジェクト単位にするのは必須、全体に関するタスクは専用のファイルを作ると良い気がしています。
もしくはタスクランナーにてコンパイル後にTodoコメントが削除されるようにしてあれば安心ですね。

## [Unused Files](https://github.com/Dammmien/brackets-unused-files)
プロジェクト内で使用していないファイルを検出出来ます。
特に運用更新時などで使っていない古いファイルを検出する際に効力を発揮します。
![unused.png](https://qiita-image-store.s3.amazonaws.com/0/48404/b7f83adf-8c1a-1e27-54c9-9595df92b30f.png)

<br />
良いものを見つけ次第、随時更新していきます。