Web

【Brackets】必ず入れるべき拡張機能5選

前回のブログでオススメのエディタとして

Bracketsをオススメしました。

 

このブラケッツには拡張機能というエディタに追加機能を付与することができ、

エディタをより便利にすることができます。

 

そこで今回はHTMLやCSSをメインに使用するコーダー向けの拡張機能をご紹介します。

拡張機能の種類は本当に膨大ですが、最低限これだけあれば問題ないと思う5つを厳選してご紹介します

拡張機能の追加方法

以下記事でも紹介していますが、

念のためご紹介します。

 

ブラケッツを開いた後、右側にあるブロックのようなマークを押してください。
(画像参考)

そうすると以下画像のような画面になるので、

検索窓に該当の拡張機能の名前を入れてください。

その後、

右側にあるインストールボタンを押せば終了です。

拡張機能を適用させるためにはいったんブラケッツを閉じて再度開きなおしてください。

 

拡張機能7選

それでは早速ご紹介していきます。

①Add HTML template

これは名前のままですが、

何もない状態からボタン一つでHTMLのテンプレを作成してくれます

 

追加後にBracketsのメニュー欄に「Html」というタブが増えているので

「ファイル」→「新規作成」でファイルを作成した後、

「Html」→「New html」の順で押してください。

そうすると空白だった入力エリアにHTMLのテンプレが作成されます。

②Beautify

これはビューティーという拡張機能で、

改行位置やインデントをそろえてくれます

 

以下はHTMLを作成した後そのまま保存した画像です。
見づらいですねぇ

そんでこいつを追加したBeautifyでインデントをそろえるとこんな感じになります

これはそこそこ重宝しますよ。

 

使い方は簡単で、

画像の左上側にメニュー欄があり、

「編集」→「Beautify」の順で押すだけです。

 

ちなみにその下には「保存時にBeautifyする」という項目があるので、

それを選択しておくと常にインデントをそろえてくれます。

③Brackets Icons

これはまぁなくても困りはしないけど

あったら便利かなって感じのものなのでスルーしても大丈夫です。

 

この機能はファイル名の横に

そのファイルの種類ごとにアイコンを表示してくれる機能です。

④CSSFier

これはめっちゃ便利な機能なので是非入れましょう。

 

HTMLをコピーしてCSSファイルに張り付けすると、

CSSを整形してくれます

 

百聞は一見に如かずといいますし見た方が早いですね。

これはとくに設定などはないので追加するだけで使えます。

⑤HTML Block Selector

HTML Block SelectorはHTMLタグの、

開始タグか終了タグのどちらかを選択した状態で、

「Ctrl」+「Shift」+「T」を押すと

開始タグから終了タグまでが全選択されます。

 

コードが複雑だったりたくさんあったりすると見つけづらかったりするので、

たまに必要になります。

 


以上、必須拡張機能5選です。

ブラケッツを入れてみた人は是非参考にしてください。

ピックアップ記事

  1. 目標がない人はやりたいことリスト100をやってみよう
  2. 新しいことへのあと一歩の勇気が出ない人へ「勇気はあとからついてくる。」
  3. Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法

関連記事

  1. Web

    非同期(Ajax)でPHPの関数を実行させサーバーにフォルダとファイルを作成する

    最近PHPを勉強し始めたので備忘録がてら書きます。今回は、H…

  2. Web

    ブログサービス「Blogger」の使い方紹介

    友人が2名「自分もブログやりたい!」と言っていたので、自分がや…

  3. Web

    【ace.js】エディタを複数表示させる方法

    ブラウザ内でコードを書くならそれ用のエディタを使うわけなんですが、…

  4. Web

    Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法

    今回はGoogleform埋め込みで回答完了画面に遷移させない方法…

  5. Web

    自分のITリテラシーのレベル把握してる?リテラシーレベル表

    自分のITリテラシーのレベル、把握してますか?そもそもITリテ…

  6. Web

    ディスプレイポートとは?HDMIと比較・メリット紹介!

    今まで自宅の環境ではHDMIかVGAを使用していたのでDisp…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Web

    ランサーズで稼げるの?副業初めての会社員が1ヶ月試した結果
  2. Web

    【Brackets】コーダーオススメのエディタはブラケッツ一択!
  3. Web

    【ace.js】エディタを複数表示させる方法
  4. Web

    chrome/IE/FireFoxのサイズ解釈
  5. Diary

    Switchソフトで悩んだらゼノブレ2を買え!ゼルダBOWよりオススメXenob…
PAGE TOP