BracketsをSublimeTextみたいに設定したい!


プログラミングの世界に足を踏み入れた時、
最初に触ったのは「Progate」でした。

その後、プログラミングを本格的に始めた時も、
会社に入ってコードを書く時も、
ずっと「SublimeText」を使ってきました。

しかし、エディターの横ですぐに変更箇所が反映されていくあの画面!

ライブプレビューが忘れられない!!

そして色々テキストエディターを探し回った結果、
ライブプレビュー機能が標準搭載されている
Brackets」というエディターに出会いました。

使い方は簡単で、矢印の先の「稲妻」みたいなアイコンをクリックするだけ!
勝手にブラウザ(Chrome)が開きます!終わり!

で、その他の詳しい使い方は別の方に譲るとして、
見た目について、私はSublimeTextに慣れすぎているので、
出来るだけ近しい設定にするべく試行錯誤したので、
それの覚え書きをしていこうと思います。

拡張機能をインストールする手順

レゴブロックみたいなのをクリックすると拡張機能のインストーラーが開きます。

入手可能タブで拡張機能のダウンロード
テーマタブでテーマ(見た目)のダウンロード
インストール済みタブで詳細を弄れます。

テーマの選択

SublimeText風テーマがいくつかあるのですが、
個人的には「Monokai Dark Soda」が一番近いかなと思いました。

インストールしたら、[表示 > テーマ] と進みます。

「現在のテーマ」というところで、ダウンロードしたテーマを選択できるので、
色々ダウンロードして全部試して確認して見るのもいいかもしれません。

ちなみにフォントもここで変更できます。
SublimeTextでは「Ricty Diminished」を使っていたようなので、
ここでも「Ricty Diminished」にします。

フォントのインストール方法

行間の変更

[ヘルプ > 拡張機能のフォルダーを開く] と進むと、フォルダーが開きます。

[user]の中に、ダウンロードした拡張機能が入っているので、
現在設定しているテーマのものを開き、
中にあるcssファイルの末尾に、以下の文言を付け足します。

.CodeMirror {
    line-height: 1.0;
}

数字を変更すれば好みの行間に変わってくれます。

お好み設定

ここまでやればだいぶSublimeTextに近くなったと思います。
あとは各人の好みでさらに拡張機能を追加してみて下さい。

Overscroll
 コードの最下段よりさらに下までスクロールできる。

Custom Work
 タブ機能とファイルアイコンの追加

Minimap
ミニマップを追加します

おわり

すごく大雑把な説明でしたが、それとなくSublimeTextみたいな感じになったかと思います。
ライブプレビュー機能は本当にありがたいのでこれから使い倒していきます。