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

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

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

  2. Diary

    ポートフォリオサイト作成しました。

    わざわざ大々的に言う必要もないんですが、PORTFOLIO(ポートフ…

  3. Web

    圧縮ファイルの種類別紹介!

    そもそも圧縮ファイルってなに?圧縮ファイルとは、圧縮アルゴリズムを…

  4. Web

    画像1枚なおしただけでAdSense審査に通過した話

    こんにちは~AdSense審査でことごとく落とされていたのに1…

  5. Web

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

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

  6. Web

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

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

コメント

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

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

最近の記事

  1. Web

    無料でWebサイトを作成するならOnePageがおすすめ!
  2. Other

    資格・免許は話のネタになる。資格を取るメリットとオススメの資格は?
  3. Web

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

    災害対策。最低でもこれだけは準備しておけ!
  5. Web

    chrome/IE/FireFoxのサイズ解釈
PAGE TOP