Brackets:コードヒントやクイックドキュメントを拡張できるエクステンションまとめ

Brackets:コードヒントやクイックドキュメントを拡張できるエクステンションまとめ

Bracketsにはコーディング時に役立つ機能として、HTML・CSS・JavaScriptを記述する際にヒントを出してくれるコードヒントとCSSの各種プロパティについて簡単なドキュメントを確認できるクイックドキュメントという機能が予めついているのですが、それらを更に便利にしてくれるエクステンションを紹介します。また、正確には少し違うのかもしれませんが、同じくコーディング時にヒントを出してくれたり、プロパティなどのブラウザ対応状況を確認することができるエクステンションも併せて紹介します。

コードヒントは普段から使い慣れている言語で使用した場合に、逆にヒントが表示される動作が重い時があったりでちょっと鬱陶しく感じてしまうことも正直あるんですが、まだタグの種類や記述の仕方が曖昧だと感じる場合は非常に便利です。

また、クイックドキュメントは英語表示ではありますがBrackets上でそのタグやプロパティなどに関するドキュメントを表示できるので、少しど忘れしてしまった時などにすぐ確認ができて役立ちます。
クイックドキュメントは調べたいプロパティなどを選択した状態で、メニューにある「クイックドキュメント」を選択したり、ショートカット(Ctrl(Win) / Cmd(Mac) + k)を使うことで呼び出すことができます。

More HTML5 Code Hints

デフォルトでもひと通りのタグをヒント表示してくれますが、HTMLの要素名や属性名のヒント表示を更に拡張してくれます。
特に属性に関してはREADMEにもあるように様々なものを追加してくれ、エクステンション名はHTML5となっていますが一部HTML4のヒント表示も追加されます。

More CSS Code Hints

こちらはデフォルトでは表示されないCSSのヒントを表示してくれるようになるエクステンションです。
ただ、ほぼ使わないようなものが多いので正直入れる必要ないような気もします…。

Brackets CSS Class Code hint

こちらは現在編集しているHTMLが読み込んでいるCSS内で使用されているID・クラス名をヒント表示してくれるものです。
個人的には複数のクラスを組み合わせてスタイルを指定していくようなページをコーディングする際に特に便利だなと感じました。

SASSHints

SASS/SCSS利用時に変数をヒント表示してくれます。

CanIUse

タグやプロパティの各ブラウザ対応状況などを確認できる「Can I use」をBrackets上で表示できるエクステンションです。
エクステンション有効後、メニューにある「Show CanIUse」を選択 又は ショートカット(Ctrl(Win) / Cmd(Mac) + Alt + u)で呼び出すことが可能で、確認したいタグやプロパティを選択した状態で使用するとそれらの情報がすぐ表示されます。

PHP SmartHints

こちらはPHPのコードヒント表示を実装してくれます。

WordPress関連のコードヒント

WordPressのコードヒントを表示してくれるエクステンションもあり、以下をそれぞれインストールすることでテンプレートタグ・関数・各種フックなどが表示されるようになるので、テーマやプラグイン作成時に役立ちます。

QuickDocsJS

JavaScriptのクイックドキュメントが追加され、使用例やパラメータなどを確認できるようになります。
jQueryやNodeJSなどにも対応されています。

QuickDocsPHP

PHPのクイックドキュメントが追加され、使用例やパラメータなどを確認できるようになります。

QuickDocsRegEx

こちらは正規表現のクイックドキュメントを追加できるエクステンションです。

以上、Bracketsでコードヒントやクイックドキュメントを拡張できるエクステンションのまとめでした。
今回紹介しているのはいずれも自分で実際に使用している(使用してみた)ものやランキングで頻繁に見かけるものですが、「他にもこんなのあるよ!」っていうのがあれば是非教えてください :)

Back to Top

Brackets:コードヒントやクイックドキュメントを拡張できるエクステンションまとめ

Brackets:コードヒントやクイックドキュメントを拡張できるエクステンションまとめ

/ Services & Resource

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。