詳しくはこちら
Bracketsをインストールしたら最初に設定したいこと
テキストエディタ「Brackets」をインストールしたら、最初に設定しておきたいことをまとめました。
おすすめの拡張機能に関しては様々なサイトで紹介されているので、今回は拡張機能以外（Emmetを除く）のことを紹介します。
Emmetのインストールと設定
Emmetとは、htmlやcssを省略記法でマークアップすることが可能になる拡張機能です。
例えば、p.textと入力して［Tab］キーを押すと、<p class="text"></p>のコードに変換されます。
下記はEmmetを使った書き方の一例です。
<!--
p.text
-->
<p class="text"></p>
<!--
ul.num-lists>li*3
-->
<ul class="num-lists">
<li></li>
<li></li>
<li></li>
</ul>/*
fll
*/
float: left;
/*
diib
*/
display: inline-block;
/*
op.5
*/
opacity: .5;cssは基本的に単語の頭文字を使うので、なんとなく「こんな風に入力したらこう展開される」というイメージが湧くかと思います。
なので、fsと入力したら普段よく使うfont-sizeが展開されるように思いますが、実際は滅多に使わないfont-styleが展開されてしまいます。これでは地味に不便なので、この設定を変えてみたいと思います。
※font-sizeはfzで展開されます。
ここからは環境設定ファイルを直接編集するので、不安な方はバックアップをとっておきましょう
- メニューバー > ヘルプ > 拡張機能からフォルダを開く
- extensions/user/brackets-emmet/node_modules/emmet/lib/snippets.jsonを開く
- ファイル内で"font-size:|;"を検索
- "fz": "font-size:|;",のように記述されているので、fzの部分をfsに変えます。
これで変更は完了なのですが、このままではfont-styleとfont-sizeどちらもfsで展開される状態です。
展開させるキーが被っている場合は、より下の行に記述されている方が優先されます。
font-sizeの方がfont-styleより下の行に記述されているので問題は無いのですが、気になる方はfont-styleが記述されている箇所を探し、fsから任意のキーに変えてあげるといいでしょう。
テーマ（全体の見た目）の変更
エディタ全体の配色やフォントサイズを変更していきたいと思います。
まずはテーマをインストールして適用させます。
- メニューバー > ファイル > 拡張機能マネージャー
- 「テーマ」のタブから好きなテーマをインストールします。「Monokai Dark Soda」「Monokai」「New Moon」が私のおすすめです。
- メニューバー > 表示 > テーマ
- 「現在のテーマ」から先程インストールしたテーマを選択して「完了」ボタンをクリック
先程のテーマを変更した箇所で、全体のフォントサイズとフォントファミリーも指定可能です。
下記は私の設定です。
※上記のフォントファミリーの指定は「源ノ角ゴシック」がインストールされている前提になります
インストール先：https://github.com/adobe-fonts/source-han-code-jp/releases
その他の細かい設定
カーソルがある行をハイライトさせる
メニューバー > 表示 > アクティブ行をハイライトにチェックを入れる
インデントの形式を変更
画面右下の「タブ幅」もしくは「スペース」クリックで、インデントを半角スペースかタブに切り替えられます。
半角スペース2つでのインデントが最近は主流なのかなと私は思っています。
まとめ
Bracketsをインストールしたら最初に設定しておきたいことは以上になります。設定完了後は、様々な拡張機能をインストールして使ってみるといいでしょう。
Emmetは展開させるキーを自分の使いやすいように変更すると、作業スピードが格段に変わります。
text-alignやdisplayあたりは値の候補が多いので、どのキーでどのように展開されるのか一度確認してみるのもいいかと思います。
関連記事
