【Brackets】おすすめプラグイン一覧

この記事では、Bracketsを効率的に活用できるおすすめプラグインを一覧にしてまとめてみました。

## おすすめプラグイン

おすすめのプラグインを項目別にまとめてみました。
尚、プラグインのインストール方法は下記事で解説しています。
【参考】【Brackets】プラグインのインストール方法

## システム関連のカスタマイズ

Beautify

Beautifyは、JavaScript,HTML,CSSのコードを自動で整形してくれます。
コードを部分的に選択して自動整形したり、ファイル保存時に自動的に整形したりなど細かく設定できます。

custom-work

custom-workは、開いているファイルを上部にタブ表示するプラグインです。

Brackets File Icons

サイドバーのファイルツリーや、「Tabs – Custom Workingy」プラグインなどで作った上部タブに拡張子ごとのアイコンを表示します。

Brackets Outline List

ファイル構造をアウトライン表示してくれます。
これによりファイル階層の状態がすぐにわかります。

Extensions Rating

拡張機能マネージャーを改良するプラグインです。
プラグインの検索画面でダウンロード総数やスター数などを表示します。

Brackets Git

BracketsをGitできるプラグインです。
【参考】【Brackets】Gitプラグインの使い方

## コード編集画面のカスタマイズ

Brackets Editor Bookmarks

ソースコード中にブックマークを作ることができます。
これにより、ソースコードの任意の位置にすぐに戻ったりアクセスできるようになります。

Indent Guides

空白(インデント)の数を表示します。

Highlight Multibyte Symbols

全角英数字を強調表示(ハイライト)します。
これにより、誤って全角入力したかどうかわかります。

HTML Block Selector

HTMLタグの範囲を視認できるツールです。
タグにマウスカーソルを当てて「Ctrl+Shift+T」を押すと、そのタグの範囲(開始タグ~終了タグ)を選択できます。

Paste and Indent

貼り付けたコードを自動でインデントします。

Special Html Characters

ショートカットキー「Alt+c」で特殊文字を一覧表示します。

## 色関連のカスタマイズ

Brackets Css Color Preview

コード中にカラーコードがあると、その行の左側に色を表示してくれます。

colorHints

カラーコードを入力すると、類似する他の色をヒント表示してくれます。

【関連記事】
【Brackets】基本的な使い方
ES2015(ES6) 入門
Javascript入門 基本文法

コメント

タイトルとURLをコピーしました