Skip to content →

Edge / BracketsでEmmetとかLESSを

Adobeさんが出してる「Edge Code」、TextMateやSublime Text 2っぽいですよね(笑)。で、そのEdge Codeも公開されている拡張機能をインストールすることで、アプリケーションの機能を追加することができるようになっています。

brackets-001

公開中の拡張機能は、Edge Codeの元になってるオープンソースプロダクト「Brackets」のGitHubページにリンクがまとまっています

Edge Code / Brackets でEmmetを使う

WebサイトのHTMLやCSSのコーディングをする際に「Zen-Coding」を使っている方もだいぶ増えました(おかげさまで 謎)。

しかしもうZen-Codingは開発終了で、次期バージョンの「Emmet」に置き換えられています。とまぁ、そうなるとより機能が拡充されたEmmetが必要になるわけですが、ちゃんとBrackets / Edge Codeでも動く拡張機能が公開されています

BracketsやEdge Codeに拡張機能を追加するには、「extensions」フォルダ内にある「user」にダウンロードした拡張機能を入れます。最近OS Xではユーザーディレクトリの「ライブラリ」が見えないので不便ですよね(笑)。ターミナルで以下のコマンドを入れれば開きます。

Bracketsは

$ open ~/Library/Application\ Support/Brackets/extensions/user

Edge Codeは

$ open ~/Library/Application\ Support/Adobe/Edge\ Code/extensions/user

Emmetをインストールしたら、一度Brackets / Edge Codeを再起動しましょう。メニューバーのとこに「Emmet」が追加されたらオッケー。あとは「Tab」キーとか「Cmd+Enter」で展開できますので。

あ、そうそう、Emmetには「Fuzzy search」ってのが追加されてるので、Sublime Text 2の「Hayaku!」みたいな感じで「w20p」を展開すれば「width:20%」とかに変換されますから。スペルミスしても適当に入力してもまぁまぁ大丈夫です(笑)。

LESSの拡張機能もあるよ

で、その公開ディレクトリを覗いていたら「BracketLESS」なんてものもありまして、これをインストールするとLESSを編集するだけで自動的にCSSにコンパイルすることができるようです。いえ、できます。Edge Codeでは試していませんが、Bracketsでは動作しています。インストールしたら「表示」メニューの一番下あたりに「Enable BracketLESS」ってのがあるのでそれを有効にします。

新規ファイルで「〜.less」を作って保存すれば、同じディレクトリに「〜.css」が生成されます。うまく作られない場合は、一度Bracketsを再起動してみましょう。Edge Codeでは試してないのでご自身で試してください(笑)。

Node.jsがあれば、Extension Managerも

この拡張機能の中には「Extension Manager」もあったりします。

brackets-002

これは残念ながらEdge Codeでは動かないのと、「Node.js」が必要になります。インストールは、単純にコピーするだけではなく「npm install .」でいくつかのNodeのモジュールを入れなければなりません。

モジュールのインストールが終わったら、「node server」でExtension Managerを起動してからBracketsを起動しましょう。

Gitが入ってる方は以下のような流れで

「user」ディレクトリに移動

$ cd ~/Library/Application\ Support/Brackets/extensions/user/

Gitでクローン

$ git clone git://github.com/jdiehl/brackets-extension-manager.git extension-manager

「extension-manager」に移動

$ cd extension-manager/

モジュールをインストール

$ npm install .

んで、Nodeを動かす

$ node server

これでExtension Managerが起動するので、Bracketsを立ち上げましょう。

Extention Managerで拡張機能を管理

ってな感じでExtension Managerをインストールすると、メニューのとこに「Tools」ってのが追加されて使用できるようになります。あとは、リストから入れたい拡張機能のチェックボックスを有効にするだけで使用できるようになります。アップデートもここからできるので便利ですね。いちいちダウンロードしてコピーとかしなくていいですし。

あ、一回Extension Managerで拡張機能を追加すれば、その後はいちいち「node server」とか打たなくて良いです。Extension Manager使いたいときだけそのコマンドを実行しましょう。

以上、Bracketsでも、EmmetやLESSが使えますよ、って話でした。

Published in articles