HOMEPAGE TIPS BLOG

ホームページ制作TOP > Web技術Tips > 無料エディター『Brackets』を拡張機能でさらに使いやすく
[期間限定] 標準クオリティープラン  WEBサイト制作20%OFF
失敗しないWeb制作会社の選び方
便利ソフト

無料エディター『Brackets』を拡張機能でさらに使いやすく

便利ソフト2016.09.21

この記事は、前回の記事の続きですが、この記事から読み始めてもOKです。

拡張機能とは?

Bracketsでの拡張機能とは、Bracketsに新しい機能を追加できる機能です。

ショートカットを追加したり、コードヒントを強化したりと、コーディングをしやすくするツールを追加できます。

ユーザーが独自に追加した非公式な拡張機能が大多数で、ある意味ユーザーの要望を如実に反映している拡張機能が多いです。

brackets-image22

拡張機能は拡張機能マネージャーから追加します。

右のサイドバーにあるレゴブロックのようなアイコンをクリックしてください。

brackets-image18

拡張機能にはテーマ系拡張機能とプラグイン系拡張機能があります。

拡張機能を追加するには、拡張機能の列にあるインストールのボタンをクリックするだけでOKです。

いくらでも追加でき、削除したい場合は [インストール済み] のメニューから [削除] 選択します。

拡張機能の探し方

Extensions Ratingをインストール

brackets-image19

拡張機能を探す前に、まずプラグイン「Extensions Rating」をインストールします。

インストールすると、拡張機能マネージャーの機能が増えます。

brackets-image20

まず、検索欄の左側にソート機能が追加されました。

また、プラグイン名の下にダウンロード数が表示されるようになりました。

拡張機能は無数にあるので、「Extensions Rating」のこれらの機能を使って探しやすくします。

このソートで検索で見つけるという方法の他に、Bracketsの拡張機能をまとめている記事を参考に探す方法があります。まとめ記事をうまく使えば手っ取り早くて効率的です。

おすすめ拡張機能(五十音順)

手前味噌ですが、僕が今使っている拡張機能を「おすすめ拡張機能」という形で紹介します。

僕がコーダーというのもあってか、デザイナー向けの拡張機能は一切ないのでご了承ください。

Beautify

brackets-image23

インデントの種類がバラバラだったり、圧縮されていて難読化しているコードをキレイに整形します。

HTML・CSS・JacaScriptに対応しています。

Brackets Snippets (by edc)

brackets-image24

特定の文字列をショートカットで挿入できるようになります。

有効化すると拡張機能アイコンの下に電球のようなアイコンが追加されるので、そこからスニペットの追加を行えます。

ちなみに一例ですが、僕はスニペットのトリガーの頭に [@] をつけて他の補完機能とバッティングしないようにしています。

brackets-image25

${1} と書いておくと、スニペット展開後、カーソルがその場所に移動します。

Custom Work

開いているファイルに関する機能が詰まった拡張機能です。

  • ファイルのタブ化
  • ファイルタイプによってアイコンを表示する
  • サイドバーのアクティブファイル一覧を非表示

Emmet

brackets-image26

コーディングで楽するための機能が詰まっているもので、とくにコードを省略して書く方法が有名です。

この記事の中で詳しく解説します。

Extensions Rating

Bracketsをインストールしたらまず初めに入れるべき拡張機能です。

拡張機能マネージャにソート機能とダウンロード数が追加されます。

Highlight Multibyte Symbols

brackets-image27

全角英字や全角数字など、半角にした方がいい全角の文字に目印がつきます。

※すでに拡張機能[Show Whitespace]をインストールしている場合は無効にしてください、とのこと。

HTML Block Selector

タグがハイライトしている状態で、[Ctrl] + [Shift] + [T]を押すと開始タグ・終了タグの間を全選択します。

[Custom Work] と競合するようです。

Indent Guides

インデントを可視化してくれます。

Interactive Linter

brackets-image28

自動でコードを解析して、シンタックスエラーがあればその行に警告を表示します。

エラーした行で [Ctrl] + [Shift] + [E] でエラー内容を表示します。

Overscroll

デフォルトでは一番下の行より下にはスクロール出来ませんが、この拡張機能を有効化するとさらに下にスクロールできるようになります。

ただ、オーバースクロールした状態で操作すると位置が元に戻ることがあります。

Special Html Characters

brackets-image29

特殊文字の一覧を表示します。

いろいろ試してみよう

どの拡張機能を入れるべきか?に正解はないと思います。

まあ絶対に入れるべきという拡張機能もありますが、それ以外は人によって必要な機能は違うのではないでしょうか?

何事も試してみることが大事です。

Emmetの省略記法を使ってみよう

Emmetというのは、コーディングのスピードアップのためのプラグインです。

brackets-image26

Dreamweaverでは標準搭載されていますが、Bracketsの場合は拡張機能をインストールします。

あの暗号のような省略記法を長いコードを一発で変換する機能はEmmetの機能の一つです。

この機能は特に有名ですね。

書いた文の末尾で [Tab] を押すと省略文が展開されます。

Emmetの省略記法はHTML用とCSS用とがありますので、HTMLから見ていきます。

HTML

brackets-image30

HTMLでの省略記法を使うと、タグの入れ子構造を素早く記述することが出来ます。

上のgifでは、このEmmet文を展開しています。

nav#gnavi>ul>li*3

外からだと難しく見えるのは仕方ありませんが、一旦理解をすると単純な構造だということが分かります。

brackets-image31

CSSを書いてる感覚で書くとうまく行くのではないでしょうか。

ただしスペースは空けてはいけないのに注意です。

ここで各記号がどういう意味があるのかを見ておきましょう。

記号 使い方例 意味
# div#ID IDを指定する
. div.class classを指定する
[] div[data=value] 属性を指定する

dataは属性、valueは値を意味する。

> div>p 子要素を指定
+ div+p 兄弟要素を指定
^ p^div 親要素に戻る
* div*3 繰り返し
$ div{$}*3 1からスタート

繰り返すごとに数字を加算

{} div{テキスト} テキストを挿入

CSS

実はHTMLでEmmetを使っても大して時間短縮にはなりません。

めちゃめちゃ短縮できる時もありますが、だいたいは元が10だとして、7とか8になるくらいです。

逆にCSSは記述する量を大幅に減らすことができるので、かなりの時間短縮になります。

元が10だとすると、3とか4くらいに短縮できます。

brackets-image32

CSSでのEmmetはHTMLのEmmetと違って種類が多いので、ある程度暗記する必要があります。

EmmetのチートシートにCSSのEmmet文がほぼ載っていますが、これは参考程度に見てください。

初級編

よく使うのをまとめました。

一例として参照ください。

展開前 展開後
w10 width: 10px;
w100% width: 100%;
mb10

m10-10-10-10

margin-bottom: 10px;

margin:10px 10px 10px 10px;

p0 padding: 0;
br1-s#000 border-right: 1px solid #000;
tc text-align: center;
vm vertical-align: middle;
c color: #;
bg background: #;
dib display: inline-block;
op0 opacity: 0;
oh overflow: hidden;
poa position: absolute;
t0

r0

b0

l0

top: 0;
right: 0;
bottom: 0;
left: 0;
mb10! margin-bottom: 10px !important;

分かりにくいリスト

よく使うんですが、分かりにくかったのをまとめました。

展開前 展開後
ta:l text-align: left;
tar text-align: right;
dtbc display: table-cell;

プロパティと値の間にコロン(:)を付けると精度が上がります。

中級編

中級編では初級編と違い、展開するとCan I useを参照したベンダープレフィックスが付いてきます。

ベンダープレフィックスを全種類つけたい!という場合はEmmet文の最初にハイフンをつけると全種類展開されます。

-w100%

展開後は、

-webkit-width: 100%;
-moz-width: 100%;
-ms-width: 100%;
-o-width: 100%;
width: 100%;

になります。

 展開前 展開後
bgz
-webkit-background-size: ;
background-size: ;
bdrs border-radius: ;
bx
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
bxs
-webkit-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
trf
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
trs
-webkit-transition: prop time;
-o-transition: prop time;
transition: prop time;
ap
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cup cursor: pointer;
con
ct
content: ”;
content: ;

上級編

上級編はEmmetの省略記法ではなく、それ以外の機能についてです。

主にHTMLで使います。

これらの一覧はメニューのEmmetから参照できます。

brackets-image04

よく使うのだけ抜粋した表がこちらです。

ショートカットはエディターによって異なります。

 アクション名  ショートカット  説明
Previous Edit Point

Next Edit Point

[Ctrl] + [Alt] + [Left]

[Ctrl] + [Alt] + [Right]

前の / 次の編集点へ移動
Evaluate Math Expression [Ctrl] + [Shift] + [Y] 四則演算
Wrap with Abbreviation [Ctrl] + [Shift] + [A] 指定したタグで囲う
Update Tag [Ctrl] + [Shift] + [I] タグの上書き
Remove Tag [Ctrl] + [Shift] + [K] ハイライトされているタグの削除

子要素のインデントは調整してくれる

Merge Lines [Ctrl] + [Shift] + [M] 選択範囲のインデント・改行を削除して一行にする

逆は拡張機能『Beautify』

Toggle Comment [Ctrl]  + [/] 選択範囲をコメントアウト / 解除
Balance [Ctrl] + [Alt] + [B]

[Ctrl] + [Alt] + [Shift] + [B]

領域選択

何度も押すと領域が広がっていく。

[Shift] を追加すると範囲が狭くなる。

小技

pxを%に換算する

brackets-image33

※要素のサイズ300px、コンテナのサイズが960pxのとき

300/960*100

これで[Ctrl] + [Shift] + [Y] の四則演算をする。

例えば◯◯pxを◯◯%に変換するときに使います。

[Ctrl] + [Shift] + [A] などでタグを挿入する際にクラスもつける

brackets-image34

まとめ

以上、Bracketsの紹介でした。

オープンソースのソフトウェアというのは進化が本当に速いですね。

読んでいただきありがとうございました。

この記事は公開から 447 日経っているため、情報が古くなっている可能性があります。

PAGE TOP