BLOG

テキストエディタをSublime TextからBracketsに移行してみた

「恋に落ちるエディタ」こと「Sublime Text」を長年メインエディタとして使用してきたわけだが、最近、急に思い立ってAdobeの「Brackets」を試してみることにした。
実は随分と前にインストールだけしておいてほったらかしだったのだが、使ってみると実に魅力的なエディタだった。

本日は、これからお世話になるであろう「Brackets」の便利な使い方や自分がインストールした拡張機能についてのメモを書き残しておく。

クイック編集

command+Eで何やら便利なことをやってくれる。

CSSのクイック編集

現在カーソルが置いてある位置の要素やid/classのスタイルをダイレクトに編集できる。
Sublime Textで言うところの「Goto-CSS-Declaration」みたいなやつ。あれは、編集したいCSSファイルを開いてないと出来なかったけど、Bracketsは開いてなくてもできる。神かよ。

色のクイック編集

カラーピッカーが表示され、そこから色を編集できる。

アニメーションのクイック編集

アニメーションをベジェ曲線で編集できる。

拡張機能

Beautify

HTML、CSS、JavaScriptを読みやすいように綺麗に整形できる。
整形したい箇所を選択して、command+shift+L

beautify

BluePrint Beta

アウトラインとミニマップを表示できる(下図の赤枠部分)。

blueprint-outline

アウトライン。

blueprint-minimap

ミニマップ。

Brackets CSS Class Code hint

CSSのclass名、id名を入力補完できる。

Brackets CSS Class Code hint

Brackets Css Color Preview

カラーコードの実際の色を行の左側に表示してくれる。

Brackets Css Color Preview

Brackets Tools

コードを書く上で役立つ色んな機能が一つになったやつ。下記のリンク先に詳しく書いてある。

Bracketsの7つ道具的エクステンション Brackets Tools

Brackets WordPress Hint

WordPressのコード補完。

Brackets WordPress Functions Hints

WordPressの関数やテンプレートタグの補完。

Brackets WordPress Hooks Hints

WordPressのアクションフックやフィルターフックの補完。

colorHints

CSSファイル内で、一度使用したカラーコードのコードヒントを表示できる。

colorhints

Emmet

おなじみのやつ。もうこれがないとコード書けない。

emmet

Extensions Rating

拡張機能の導入画面で、拡張機能のダウンロード数やスター数等が表示されるようになる。
どの拡張機能が人気なのかがわかるから探しやすくなる。

Extensions Rating

HTML Block Selector

開始タグか終了タグのどっちかにフォーカスが当たってる状態で、command+shift+Tで、そのタグ全体を選択してくれる。

HTML Block Selector

Indent Guides

インデント表示してくれる。見やすくなる。

JavaScript & CSS CDN Suggestions

CDNのライブラリを利用するときに便利。「jquery」とか書くと入力補完してくれたり、バージョンの候補も表示されたりする。

JavaScript & CSS CDN Suggestions

Overscroll

ファイルの最終行までいっても、更に下にスクロールできるようになる。地味だが、結構便利。

Paste and Indent

ペーストしたコードを自動で綺麗にインデントしてくれる。

PHP SmartHints

PHPのコードヒントを表示。

SFtpUpload

BracketsからSFTP経由(FTPも)でファイルをアップロードできるようになる。
変更があったファイルが下図のようにリスト表示され、「Upload」ボタンをクリックでサーバーにアップロードされる。
保存と同時にアップロードされるようにもできる。

SFtpUpload

Simple JS Code Hints

JavaScriptのコードヒント。

Tabs – Custom Working

現在開いてるファイルをタブ表示できる(下図の赤枠部分)。
その他、サイドバーの表示・非表示の切り替えや、エディタの分割設定等。

Tabs - Custom Working

Various improvements

エディタの下部に更新日時とファイルサイズを表示する(下図の赤枠部分)。

Various improvements

WordHint

PHP、Python、Perl等のコードヒント。

気になる点

良いことばっかじゃない。ボクがやり方を知らないだけかもしれないけど・・・

Emmetの画像サイズ自動挿入ができない

imgタグ内でcontrol+shift+Iで、画像の幅と高さを自動で挿入できたんだけど、Bracketsはそれができないみたい。辛い。

一度保存しないとファイルタイプが選べない

HTMLとかちょっと書きたいだけで別に保存するほどでもないやつとか、少し不便。

とまあこんな感じで、まだ使い始めたばっかだから使いこなせてない機能とかあるけど(Extract!)、これから徐々に覚えていく。

RELATED POSTS