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

関連記事

  1. Web

    レンタルサーバー探してるならCORESERVER使ってみて!

    ブログを始めるならCORESERVERを使おう!もともと私はデータ…

  2. Web

    Googleform埋め込みでラジオボタンのデータを送信する方法

    Web制作している人間なら誰しもフォームでつまづくと思います。(つまづ…

  3. Web

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

    みなさんエディタは何を使っていますか?そもそもエディタとは、端…

  4. Web

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

    前回の記事でGoogleformからnameを取得するところまでを説明…

  5. Web

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

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

  6. Web

    chrome/IE/FireFoxのサイズ解釈

    ブラウザごとにmargin(マージン)の間隔が違うことは以前から知って…

コメント

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

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

最近の記事

  1. Web

    USBにデータ保存は危険?データが消えるので注意!
  2. Other

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

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

    Canon EOS Kiss X8iで撮影したポートレート写真
  5. Web

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