Brackets Extension ソースコード関連-全般

 

Brackets おすすめエクステンション集-2

ソースコード関連-全般

Brackets Outline List

ファイルの構造をアウトライン表示してくれます。
対応ファイルもJavaScript、CoffeeScript、CSS、SCSS、LESS、XML、HTML、SVG、Markdown、PHPと多様で、とても便利です。
類似のエクステンション:
BluePrint Beta

Brackets Outline List.png
Brackets Outline List02.png

Brackets Snippets (by edc)

各種言語のスニペットを管理・展開出来るようにするエクステンションで、より効率的なコーディングを実現します。
詳細は別途こちらの記事にて解説しています。
Brackets × “スニペット管理” で爆速コーディングを実現する

Brackets Tools

  • 単語リストを配列に変換
  • 無駄な改行の削除

等、これ1つでコーディングやプログラミングが便利になる様々な機能を追加することが出来ます。
機能が多いので、詳細は別途こちらの記事にて解説しています。
Bracketsの7つ道具的エクステンション Brackets Tools

類似のエクステンション:
・String Convert

Minifier

CSS/JSをminify出来ます。
min.png

Overscroll

ファイルの最終行より更に下方までスクロール出来るようになります。
小さなことですが、かなり便利になります。(SublimeTextはデフォルトでこの機能を搭載しています)

Paste and Indent

ペーストしたコードを、自動的に正しくインデントしてくれます。
これによりいちいち自分でインデントを調整する手間が省けますが、元々インデントが無いファイルにペーストした場合はその箇所だけインデントされるので、場合によっては注意が必要です。
Paste and Indent.png

WD Minimap

SublimeText風のミニマップを追加します。
類似のエクステンション:
Minimap
BluePrint Beta

WD Minimap.png

Whitespace Normalizer

ファイル保存時に、不要なインデントを削除してくれます。
Whitespace Normalizer.gif

ソースコード関連-HTML/CSS

Brackets Css Color Preview

色指定をしている行の左側に、実際の色を表示してくれます。
類似のエクステンション:
Color Highlighter
Brackets Css Color Preview.png

Brackets SASS

BracketsでSassのリアルタイムライブプレビューを実現します。
デフォルトでも条件を整えればライブプレビューは出来るのですが、こちらのエクステンションはlibSassを用いているため、色々と挙動が異なります。
Sassのライブプレビューについてはこちらで詳しく解説しています。

colorHints

ファイル内で一度使用した色指定を、コードヒントとして視覚的に表示してくれます。
colorHints.png

CSSFier

HTMLコードをコピーしてCSSに貼り付けるだけで、自動的にHTMLをCSS
セレクタに変換してくれます。
SASSの場合は自動的にネストまでしてくれます。
cssfier.gif

CSSLint

CSSLintの結果を保存時にリアルタイムに表示してくれます。
csslint.png

SASSHints

SASSの変数をコードヒント表示に対応させます。
SASShints.png

Emmet

みんな大好き、Emmetです!
Emmetの詳細な説明につきましては、下記サイト様が大変参考になります。
Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫

Interactive Linter

各種lint/hint系の結果をリアルタイムに表示してくれます。
2015/09/06現在でcoffeelint・csslint・htmlhint・eslint・jscs・jshint・jslint・jsx・jsonlintに対応しています。
ただしシンタックスエラーは指摘してくれますがセマンティックエラーは指摘してくれず、またW3CValidationと併用しても、Interactive Linterの方の結果のみが表示される形となります。
Interactive Linter.png

Special Html Characters

Alt+cでエンティティが必要な特殊文字を一覧表示してくれます。
special.png

W3CValidation

HTMLファイル保存時に、リアルタイムにバリデーションを実行してくれます。
W3CValidation.png

ソースコード関連-JS/PHP、その他

Brackets WordPress Hint

WordPressタグのコードヒントを追加します。
Brackets WordPress Hint.png

画像・デザインデータ連携系

 

Brackets Color Palette

Brackets内で開いている画像から、色を抽出出来ます。
palette.png

Swatcher

スウォッチファイル(.aco)を読み込み、SASS/LESSにインポートします。
カラーピッカーによるインポートも可能です。
Swatcher01.png
Swatcher02.png

挙動改善系

brackets-file-tree-exclude

プロジェクト内の除外リストを作成するためのエクステンションです。
Bracketsはプロジェクト内のファイルが30,000を超えると横断検索・クイックエディット・クイックオープン等の一部の機能に制限がかかってしまうので、それを回避したいときに活躍します。
グローバルで除外する場合はBrackets自体の設定ファイル(デバッグ→環境設定を開く)に、プロジェクト毎に個別で設定したい場合はプロジェクトルートに置いたbrackets.json内で設定します。

機能拡張系

EditorConfig

名前の通り、BracketsをEditorConfigに対応させるエクステンションです。
EditorConfigについての詳細な説明は割愛させていただきますが、簡単に言えば改行コードやインデントの種類・幅等を異なる環境でも共通化させるためのものです。
公式サイト
EditorConfig.png

eqFTP

予めFTP設定をしておくと、ローカルのファイルを上書き保存したタイミングで自動的に指定のサーバー上の該当するディレクトリにアップロードしてくれます。
即時でアップロードするので本番環境では怖いですが、開発環境で良く使います。
ftp.png

 

 

Extract for Brackets (Preview)

インストーラーに標準搭載されているエクステンションです。
PSDをBrackets内に直接読み込み、

  • 各レイヤーのwidth/height値の取得
  • 隣のボックスとの相対的な距離の取得
  • 適用されているスタイルをCSSとして取得
  • 選択レイヤーをその場で画像としてスライスし、HTML/CSSにそのまま反映

といったことが出来るようになります。
詳細はこちらの記事にて別途解説しています。
PSDをテキストエディタで開く時代!次世代ツールExtract for Bracketsの使い方

Markdown Preview

.mdのファイルをライブプレビュー出来るようになります。
オプションにてフォーマット(スタンダード・GitHub)の選択やテーマの変更が出来ますが、残念ながら通常のライブプレビューのように左右に並べての表示は出来ませんでした。
markdown.png

Todo

プロジェクト・ファイル単位でTodo管理が出来るようになります。
デフォルトでも十分使えますが、.todoファイルを設置することにより更に柔軟な設定・カスタマイズが出来ます。(公式参照
todo.png

ファイルに直接コメントとして書き込むのでクリーン性からすると考えどころではありますが、こちらを活用すれば確かに作業忘れは減りそうです。
個人的には設定をプロジェクト単位にするのは必須、全体に関するタスクは専用のファイルを作ると良い気がしています。
もしくはタスクランナーにてコンパイル後にTodoコメントが削除されるようにしてあれば安心ですね。


良いものを見つけ次第、随時更新していきます。

広告
カテゴリー: 夕陽のある海岸通り タグ: パーマリンク

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中