Adobe Edge Code(brackets)で入れると幸せになれるプラグイン

2014/02/27時点ではプレビュー版ですが、既にEdgeCodeをメインエディタとして使っている人も多いと思います。
まだの人はBracketsであればオープンソースとして使うことが可能なので是非試してみてください。

簡単に紹介すると、html、css、javascriptを書くことに特化したエディタです。

• コードヒント
• カラーリング
• Less対応
• クイック編集(htmlからcssやjavascriptを開かずに編集!)
• ライブプレビュー
• Adobe Inspect連携
• Edge Web Fonts連携
• その他色々

そのままでも十分強力ですが、今日は幸せになれる(かもしれない)プラグインを紹介します。

1.まずは見た目

Brackets-Themesを入れるとエディタの見た目を変更できます。
やっぱり気分が乗らないとコードを書く気にもならないので必須のプラグインです。

2.Todoコメントを残す

brackets-todoを使うとコード中に付箋のようにTodoを貼り付けることが出来ます。
例えば下記のようにコメントを残すと・・

<!-- /* NOTE  メイン処理はここで行います! */ -->
<div id="controller_main" ng-controller="ng_controller_main">
	<div ng-include="mainContents">
    </div>
</div>
 <!-- /* NOTE  デバック表示はここで行います! */ -->
<div id="debug"></div>
</body>
<!-- /* TODO  本番環境様にコメントを修正する */ -->
<script type="text/javascript" src="cordova.js"></script>
<!-- アプリケーションの起動 -->
<!-- /* CHANGES  2014/2/28にjqueryをバージョンアップしました! */ -->
<script type="text/javascript" src="js/lib/jquery.min.js"></script>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-touch.min.js"></script>
<!-- /* FIXME  読込中にバグがあります */ -->
<script type="text/javascript" src="js/app.min.js"></script>

Todoが綺麗に表示されます！
行番号やファイル名も表示されていてTODOをクリックすると、ちゃんとコメント位置へジャンプします。

3.コードの折りたたみを行う

brackets-code-foldingをい入れるとコードの折りたたみが有効になります。
javascriptを書くときに地味に便利なので入れておいたほうが良いと思います。

4.MarkDownのプレビューを行う

MarkdownPreviewを入れるとmarkdownのプレビューを表示することが出来ます。

5.Phongap buildを使う

brackets-phonegap/を使うとEdgeCodeからbuildリクエストを送ることが出来ます。
最近まで不具合でインストール出来なかったようですが、今日見たらアップデートしていました。
PhoneGap Buildのアカウントを入力して有効にするとBuildリクエストを送ります。

6.ミニファイする

brackets-minifierを入れましょう。
cssやjavascriptを簡単に圧縮することが出来ます。

7.ミニファイされたコードを綺麗にする

ミニファイの逆です。
brackets-beautifyで簡単に出来ます。

8.Vim風にする

brackets-vimderbarを入れるとキーマップがvimになります。
好みが別れるところですが、vimに慣れている人は入れると幸せになれるかもしれません。

9.自分で見つける

Extensions一覧に利用可能なエクステンションの一覧が表示されています。
色々あるので好きなプラグインを見つけて下さい!