Bracketsでお薦めの拡張機能(エクステンション)と拡張機能のインストール・アンインストール方法

無料エディタ・Bracketsのお薦めの拡張機能の紹介と拡張機能のインストール・アンインストール方法の覚え書きです。

Bracketsをインストールしてから拡張機能をインストールせずに使ってきていましたが、そろそろいろんな機能に挑戦しようと思い、拡張機能を追加した時のインストール・アンインストール方法を記しています。

お薦め拡張機能については実際に私が試していいと思ったものを紹介しています。

インストール方法

拡張機能のインストール方法ですが、「ファイル」から拡張機能マネージャーをクリックしてマネージャーを立ち上げます。

拡張機能のインストール方法

インストール済みのタブをクリックすると現在、インストールされている拡張機能が表示されています。

インストールされている拡張機能が表示

入手可能タブに戻って入手可能な拡張機能から欲しい機能のを選ぶか、評判のいい機能を選ぶ、もしくは拡張機能名がわかるなら検索から探すこともできます。

入手可能な拡張機能

検索ボタン横のボタンで並び替えも出来るので、検索時に活用すると便利ですよ。

検索ボタン横のボタンで並び替えも出来る

表示された拡張機能のインストールボタンをクリックすればインストールが始まります。

表示された拡張機能のインストールボタンをクリック

インストールが成功すれば次の表示が出てきます。

インストールが成功

インストールが終わったらBracketsをリロード(再起動)します。
デバッグタブから拡張機能付きでリロードをクリックしてください。

Bracketsをリロード(再起動)

未保存のファイルがあれば保存してくださいとメッセージが出てくるので保存しておいて下さい。

未保存のファイルがあれば保存

これで拡張機能を使う準備が整いました。

アンインストール方法

次に拡張機能をアンインストールする方法ですが、拡張機能マネージャーを開いてインストール済みのタブをクリックします。
するとインストールされている拡張機能が表示されるので、削除ボタンをクリックして、閉じるボタンをクリックします。
ここでは複数同時に削除することも可能です。

拡張機能をアンインストールする方法

すると拡張機能を削除してリロードのボタン表示が出てくるのでクリックしましょう。

拡張機能を削除してリロードのボタン表示

これでアンインストールは完了です。簡単ですね。

お薦め拡張機能

最後に私のオススメの拡張機能を紹介します。

Extensions Rating

拡張機能を探すときに拡張機能のレイティングを表示してくれます。

拡張機能のレイティング

これを指標にしてダウンロードして見るのもいいと思います。

Brackets CSS Class Code hint

作成・編集中のHTMLファイルが読み込んでいるCSSのセレクタに記述してあるIDとclassが、属性記述時に表示されます。
アルファベット順に出てくるので頭文字のアルファベットがわかれば、それを入れるだけで近くのコードが表示されます。
IDとclassの入力時の入力補完として初心者の方にも使いやすいと思います。
これはなかなか便利です。

CSSFier

こちらはHTMLのコードをコピーしてCSSファイルに張り付けることによってルールセットを自動で作成してくれる機能です。
言葉で説明するのは難しいので一度、リンク先のライブプレビューを見て頂ければと思います。

html wrapper

この拡張機能はリストやナビ、テーブルを複数作成するときに便利な機能です。
リストを作りたいデータを記述してまとめてタグ付してくれます。
機能のライブプレビューを見てもらえればよくわかると思います。

Beautify

HTMLやCSS、JavaScriptのコードを見やすいように整形してくれる拡張機能がBeautifyです。
対象範囲を選択して図のように編集→Beautifyでコードを整形してくれます。
また、minファイルの復元・解析にも使えるようです。

編集→Beautifyでコードを整形

「保存時にBeautifyで保存する」にチェックを入れておけばデータ保存する際に自動で整形してくれるので便利です。

Tabs – Custom Working

開いているファイルを上部にタブ表示してくれます。
画面分割表示ができるようになるので私はこれをメインに使っています。
編集中のHTMLとCSSを見ながら作業が出来るので便利です。

HTML Block Selector

開始・終了タグどちらかにフォーカスが当たっている状態でCtrl+Shift+Tを押すと、対応するタグまでの範囲を選択してくれます。
BootStrapなどのフレームワークでサイトを作成するときに私は重宝しています。

最後に

今回はBracketsの拡張機能のインストール・アンインストール方法とオススメ拡張機能(エクステンション)について紹介しました。
初心者の方はもちろん、中級、上級者の方にとっても使いやすいツールだと思うので、一度試してみてはどうでしょうか。
最後にBracketsのダウンロードリンクも付けておきます。

こちらもオススメ!

Webのための次世代エディタ Bracketsの教科書

  • Pocket
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

Evernoteにも保存できる、無料で使える画面キャプキャツール「Skitch」
htaccessファイルの作成方法-サイトのリダイレクトやアクセス制限にも使えます
画像に簡単に説明を加える事が出来るキャプチャ(スクリーンショット)&注釈ツール「Screenpresso」
レスポンシブwebサイトを構築するためのポイント「viewport」とは
簡単にWindows10のフォントを変更できるツール
表示しながらCSSの編集が出来るFirebugの使い方
これは便利!グラデーションが簡単に作れるCSSジェネレーター
Dreamweaverを超えた?無料で使える高性能htmlエディタBrackets
SNS上でのサイトの評価・評判を解析する無料ウェブアプリ
FireFox、Chromeブラウザのアドオンツール「SimilarWeb」で簡単にアクセス解析を
ワードプレステーマを変更せずにCSSを追加・管理する方法
悪用厳禁!Android端末の居場所が特定できるAndroidデバイスマネージャー
デザイン全般で使えるweb色見本
サイト構造と被リンクの確認が無料で出来るツール「AdMatrix Analytics」
レスポンシブウェブサイトで必須!メディアクエリとブレイクポイントの仕組み

Menu

HOME

 TOP