「Adobe Edge Code」で使える、コーディングを加速させる様々なプラグイン

「Adobe Edge Code CC」徹底入門（3）

コード向けユーティリティ

Beautify

• https://github.com/drewhjava/brackets-beautify

　alt+command+LでJavaScript/HTML/CSSファイルを整形してくれるプラグイン。使いやすいです。

W3CValidation

• https://github.com/cfjedimaster/brackets-w3cvalidation

　リアルタイムでHTMLバリデーションをしてくれるプラグイン。

Snippets

• https://github.com/jrowny/brackets-snippets

　f myFuncと打つと、下記のようにfunction定義を展開してくれます。

function myFunc () {

}

　for x myArrayと打つと変数定義して、for文を展開してくれます。

var x;
for (x = 0; x < myArray.length; x++) {

}

ImageToData

• https://github.com/FloValence/brackets-ImageToData

　インストールすると、右のメニューにボタンが追加されます。ボタンクリックで表示されるダイアログで直接画像のURLを指定すると、Data URIに変換してくれます。

Image dimension extractor

　このプラグインをインストールすると、コンテキストメニューにGet image dimensionというメニューが追加されます。また、CSSファイル上の画像パスを記述している箇所で実行すると、画像の幅と高さのプロパティが追加されます。

String Convert

　文字列を変換するメソッドを、Editメニュー/コンテキストメニューに追加してくれるプラグインです。

　以下のメニューが使えるようになります。

To Upper Case/To Lower Case/HTML Entity Encode/HTML Entity Decode/Double to Single Quotes/Single to Double Quotes/Toggle Quotes/Encode URI Component/Decode URI Component Strip Trailing Whitespace/Convert Tabs to Spaces/Convert Spaces to Tabs

Special Html Characters

• https://github.com/thaneuk/brackets-special-html-chars

　コンテキストメニューに、特殊文字を表示するHTMLのショートカット機能を追加してくれるプラグイン。コピーライトやトレードマークなどの特殊文字を簡単に挿入できるようにしてくれます。

JSHint

• https://github.com/cfjedimaster/brackets-jshint

　標準ではJSLintのパネルのみ搭載されています。このプラグインでJSHintのエラーパネルを追加できます。少しLineの列幅が広いのはご愛嬌です。

Interactive-Linter

• https://github.com/MiguelCastillo/Brackets-Interactive-Linter

　自前のlinterをプロジェクト単位で使えるようにしてくれるプラグイン。プロジェクトフォルダに.jshintrc/.jslintrc/.coffeelintrcを用意することで有効になり、エラー箇所の行頭にアテンションを出してくれます。

xUnit&Blanket

• https://github.com/brackets-xunit/brackets-xunit

　Jasmine/QUnit/YUI3などのテストをサポートしてくれるプラグイン。JSのコードから自動でテスト定義を生成してくれる機能を備えています。詳しくは、YouTubeの紹介映像でご覧いただけます。