アプリ

Bracketsのおすすめプラグイン15選|効率を上げるならコレ

更新日:

brackets-plugin

Bracketsのおすすめプラグインを紹介します。

爆速でコーディングを可能にするものから、あると何気に便利なものまで、使用頻度の高さを考えてセレクトしました。

参考にしてもらえれば幸いです。

Bracketsでプラグインをインストールする方法

kkm1

「ファイル > 機能拡張マネージャー」を選ぶか、右端にある上から2番目のアイコンをクリックするかで、プラグインパネルが開きます。

kkm2

プラグインパネルが開いたら、機能拡張プラグインを名前で検索してインストールしてください。

また、プラグインをダウンロード数順で並び変えることも可能です。

Bracketsのおすすめプラグイン15選

Emmet

emmet

コーディングが爆速で行えます。

例えばhtml:5と打ち、5の後ろにカーソルを置いた状態でtabキーを押すと、html5のDOCTYPE宣言となります。tabキーを押すことは展開なんて呼ばれています。

Brackets Snippets (by edc)

BracketsSnippets

スニペットのショートカットキーを入力することにより、特定のコードを一発で入力できるようになります。

青背景の白抜き文字がショートカットキー。記載されている通りに入力してTabキーを押せば、該当するコードが展開されます。画像にはHTMLとJavaScriptのスニペットが表示されていますが、右側にあるLibraryからHTML、CSS、JavaScript、PHPのスニペットを追加することが可能。

オリジナルのスニペットを登録できるので、自分なりによく使うコードを登録しておけば、コーディングの効率を上げることができます。

Beautify

beautify

めちゃくちゃになってしまっているインデントや圧縮されて見づらいコードが一発で見やすくなります。

手動でBeautifyを実行する時はcommand + shift+ L 。それ以外には、ファイル保存時に自動実行することが可能です。

HTML、CSS、JavaScriptに対応。

Paste and Indent

paste

他のページからコピーしたコードをリアルタイムで修正してくれます。

インデントがすでにずれてしまっている場合はBeautifyを実行する必要がありますが、このPaste and Indentならインデントをずらすことなくコピペが可能。Beautifyと、このPaste and Indentがあれば、面倒なインデント修正地獄から抜け出すことができます。

ダブ・スペース幅はウインドウ右下にあるスペース設定によります。

CSSFier

CSSFier

CSSを記述する時に、HTMLファイルの該当部分をコピーしてCSSファイルにペーストするだけで、該当部分が自動的にCSSセレクタになります。

名づけ太郎 (codic)

nazuketarou

id名やclass名、または変数名や関数名っていちいち考えるのが面倒ですよね。

そんな時は、この名づけ太郎をインストールすればOK。例えば、id=”メインコンテナ”と打ち、メインコンテナの文字列を選択した状態で右クリックからCodicを選べば、id=”mainContainer”と変換されます。変換方法は2種類あり、camelCaseを選ぶとmainContainer、snake-caseを選ぶとmain-containerとなります。

利用するにはcodicのサイトにてサインアップする必要があります。名づけ太郎をインストールするとcodicへのアクセストークンを求めてきますので、それに従ってサインアップしてください。100回/1時間までは無料で使えます。

PHP SmartHints

PHPSmartHints

PHPのコードヒントが自動で表示されます。

画像のVというアイコンはVariable(変数)のV、FというアイコンはFuncton(関数)のFとなっています。変数と関数を間違えることはないと思いますが、見やすいのはいいことです。

Brackets WordPress Hint

BracketsWordpressHint

これもPHPのコードヒントが表示されるものですが、こちらはWordPressタグに特化したタイプ。

ちょっとだけWordPressをいじりたい人には、PHP SmartHintsではなくこちらがおすすめ。

Special Html Characters

SpecialHtmlCharacters

特殊文字をHTMLエンティティに変換してくれます。

例えば、HTMLタグとして利用している < をブラウザに表示させるには、&lt;と記述しなければなりませんが、それが簡単に挿入できるようになるので便利。

option + C で、パネルが開きます。

Response for Brackets

responsive1

右側にあるスマホのような形のアイコンをクリックするとプレビュー画面が起動。画面を見ながらResponsiveコーディングができるようになります。

responsive2

左上にあるINSPECTボタンをオンにするとInspect Modeとなり、プレビュー画面で要素をクリックすればその部分のコードがリアルタイムでハイライト表示されるので、とにかく便利。

W3CValidation

W3CValidation1

「表示 > 保存時にファイルをLintチェックをアクティブ」にすると、ファイルを保存する時にバリデーションを実行してくれます。

W3CValidation2

右下にアラートマークが出た時は、アラートマークを押せばエラーの内容が表示されるので、それに従って修正すればアラートは消えます。

colorHints

colorHints

CSSでカラーを指定する時に、#とだけ入力すればファイル内で使用しているカラーをヒントとして表示してくれます。

Color Highlighter

ColorHighlighter

CSS内のカラーをわかりやすいようにハイライト表示してくれます。

何気に便利。

Todo

todo

Todo管理が出来るようになります。

が、ファイルに直接書き込む必要があるので、データとしては汚くなります。ただ、設定をファイル単位かプロジェクト単位かで選べるので、プロジェクト単位に設定して、Todo専用のファイルを作ればデータを汚すことなくうまく運用できるでしょう。

書き方は以下の通り。

// TODO: ここにTODOコメント
// NOTE: ここにNOTEコメント
// FIXME: ここにFIXMEコメント
// CHANGES: ここにCHANGESコメント
// FUTURE: ここにFUTUREコメント

詳細は以下のリンクからどうぞ。
https://github.com/mikaeljorhult/brackets-todo

SFtpUpload

SFtpUpload

Bracketsから直接FTPアップロード可能になります。

サーバーを指定して、変更したファイルをすべてまたは個別に、uploadするかskipするか選択できます。FTPプラグインはいくつかありますが、これが一番簡単で使いやすいのでは?

あとがき

とりあえず15個ほどピックアップしてみました。

ただ、今回改めてBracketsのプラグインを眺めてみたのですが、3年前くらいからラインナップがあまり変わってないんですよね。

これは、今日のWeb制作で必須となる機能が現段階のBracketsとそのプラグイン群でほとんど実装されていることを意味しているのかもしれません。

もちろん、いいプラグインを見つけ次第、更新します。

-アプリ

Copyright© ゆるくやって人生優勝 , 2019 All Rights Reserved.