次世代のテキストエディタ『Brackets』のインストール方法と初期設定

どうもこんにちは。

先日から悩みに悩んだ結果テキストエディタをDreamweaverからBracketsに乗り換えようとしている僕です。今回はそのウェブ制作における開発用のテキストエディタ「Brackets」のダウンロード方法とインストール後のちょっとした初期設定手順の図解メモです。

Bracketsをこれから使ってみようかなと思っている人、参考までにどうぞ。

テキストエディタの有名どころを素人目線で比較してみた

無料体験版もあるので全部インストールして、全部触ってみました。

結果的には好みは人それぞれだと思いましたが、僕はこのBracketsが良かったのでこれでいくことにします。

 

Bracketsのダウンロードとインストール

では早速インストールしましょう。

まずはBracketsのサイトにアクセスして「 Download Brackets 」をクリックします。

インストール先を任意の場所に指定するとすぐにダウンロードが始まります。

 

Bracketsの初期設定

ダウンロードしたBracketsのzipファイルを解凍して立ち上げてみます。

▲デフォルトの作業画面です。

デモのソースが書かれていますので、これを参考に自分好みに簡単にカスタマイズします。

 

Bracketsのテーマ設定

Bracketsのメニューバーから

をクリックします。

▲テーマ設定のウィンドウが開きますので、

• 現在のテーマ：Brackets Dark
• フォントサイズ：16px
• フォントファミリー：Menlo

にして「完了」をクリックします。

 

▲個人的に背景は暗いほうが目がチカチカしないので好きです。

フォントサイズも少しだけ大きくしました。

また、表示＞テーマからだとデフォルトの明暗2パターンからしか選択できませんが、別テーマをインストールすることも可能です。

 

テーマのインストール

メニューバーから

をクリックします。

▲「テーマ」タブをクリックします。

 

▲インストール可能なテーマが一覧でズラーッと並びます。

しかしこれサムネイルが無いのでこれだけ見たって色のイメージわからないですよね……

 

そこに救世主！

 

なんと全てのテーマをインストールしてスクリーンショットを撮ってくれた方がいました。

▶︎Brackets 1.0：テーマカラー89種類まとめ | STOCQ（現在リンク切れです）

 

すごい手間かけてくれてますね。

僕は結局デフォルトのダークカラーにしましたが、これを参考にお気に入りのテーマをインストールしてみてください。

 

インデントの設定

お次はインデントの設定です。

▲デフォルトではこのように半角4つ分のスペースですが、僕は2つ派なので設定を変更します。

 

▲コード画面の右下からインデントの変更ができます。

 

▲タブ幅：4となっていますので

 

▲2に変更します。

これで以降はtabキーでインデントを半角2つ分のスペースで挿入できます。

 

画面の分割

お次は画面の分割です。

僕はスーパーど素人のため頭の中で組み立てながら一気にHTML書いて、そのあと一気にCSSで。とかできないので一つ一つこなしていく必要が有ります。

▲サイドメニューのこの小さなアイコンをクリックします。

 

▲分割メニューが開きますので「左右分割」をクリックします。

Bracketsでは左右2分割か上下2分割の2パターンが選択できるようですね。

 

▲画面が2分割されました。

少し分かりづらいですが右側の「このペインに〜」の部分の文字が左の「index.html」よりも明るくなっていてアクティブ状態になっていると思います。

右側の画面をアクティブにしたら開きたいCSSをサイドメニューから選択します。

 

▲CSSが表示されました。

これでかなりコーディングしやすくなりましたね。

 

プレビュー画面の立ち上げ

お次はプレビュー画面です。

僕は頭の中で組み立てながら一気にコーディングとかできませんので、自分の書いているコードがどう表示されているのか常に気にしなければなりません。

ですのでプレビュー画面は超大事です。

画面右側の稲妻みたいなこれまた小さなアイコンをクリックします。

 

▲Google Chromeが立ち上がってブラウザでのプレビュー画面が表示されました。

僕は『 Shift It 』というアプリを使って画面左にプレビューウィンドウ、左側にBracketsを立ち上げています。

 

これでプレビューを確認しながらHTML・CSSともに書くことができます。

▲そしてこのBracketsのプレビュー画面はリアルタイムで変更されてくれます。

HTMLでカーソルを合わせた部分がプレビューでハイライトされてくれるのでどの部分を編集してるのかも非常にわかりやすいです。

 

これであとはプラグイン入れたりしてさらに強化すればだいぶ作業効率があがりそうな予感がしています！

 

まとめ

いかがでしたでしょうか。

これから使い始める段階ですので、まだまだ使用感とかはわからないのですがかなり期待値が高いです。

本当に素人なので少しでも効率が上がるようにツールの勉強もしていかないとですね。

今度はプラグインを調べてインストールしてみます。

 

ではまた。