エディターの準備

Bracketsのインストール

アドビ システムズがオープンソースとして公開しているテキストエディタ「 Brackets 」をインストールします。 Bracketsにアクセスしダウンロードボタンをクリックし、ダウンロードしたファイルを実行します。

拡張機能のインストール

Bracketsには拡張機能という追加機能があり、これを追加することによりエディタをより便利にすることができます。拡張機能の種類は本当に膨大ですが必要に応じて追加します。拡張機能に関する多くのサイトが公開されていますので各自勉強して下さい。ここでは定番の「Emmet」と「Beautify」をインストールしました。

1. ツールバーの「ファイル」から「拡張機能マネージャー」をクリックします。
   又は画面右上の「拡張機能マネージャー」ボタンをクリックします。
2. 「拡張機能マネージャー」ダイアログボックスの「入手可能」タブで検索欄に必要とする拡張機能を入力します。
3. 目的の拡張機能の右側の「インストール」ボタンをクリックします。

拡張機能Emmetを日本語対応に変更する

Emmetを導入すると、HTMLファイルで「!」と入力して、tabキーを押すとHTMLの面倒な宣言文等のベースタグが入力されますが、2行目のhtmlタグが「html lang="en"」と英語版になります。下記により「html lang="ja"」と記述されるように変更します。

1. 下記のパスからsnippets.jsonを開きます。
   C:\Users\ユーザ名\AppData\Roaming\Brackets\extensions\user\brackets-emmet\node_modules\emmet\lib\snippets.json
2. 3行目の"lang": "en",を"lang": "ja",に書き替えます。
3. 4行目の "locale": "en-US",を "locale": "ja-JP",に書き替えます。
4. 上書き保存します。
5. Bracketsを再起動します。