テキストエディタ Sublime Text 3 を使って、コーディングの効率をあげるための設定をインストールから、プラグインインストールまで一連の流れを追ってメモ
Sublime Text 3 のインストール
- 公式サイトから各OS用インストーラをダウンロード、実行
https://www.sublimetext.com/3 - アプリを起動する
Package Controll のインストール
Sublime Text のパッケージ管理ツールをインストールします。
公式サイト：https://packagecontrol.io/
- Sublime Text 3 を起動
- ショートカットキー「Ctrl + `」でコマンドライン表示
- 公式サイトの Installation からコマンドをコピーしてコマンドラインで実行
https://packagecontrol.io/installation#st3
EditorConfig のインストール
EditorConfig は、異なるエディタを使うケースや複数人数に渡るプロジェクトにおいて力を発揮します。
改行コードや文字コードが異なることによるエラーを防ぐことができるよう、エディタの設定ファイルを外部ファイルで管理するプラグインです。
プロジェクトごとに異なるインデントや文字コードなどの規定がある場合に非常に役立ちます。
公式サイト：http://editorconfig.org/
- Sublime Text 3 を起動
- ショートカットキー「Ctrl + Shift + P」でコマンドパレットを表示
- Package Controll: install Package を実行
- EditorConfig を検索してインストール実行
EditorConfig の設定
- .editorconfig ファイルの作成
文字コードは UTF-8、改行コードは CRLF または LF - 設定したいプロパティの値を指定して、.editorconfig に保存
https://github.com/sindresorhus/editorconfig-sublime#readme
Emmet のインストール
html をチート入力できます。
コードの記述時間が大幅に短縮されます。
Ctrl + E で変換！
公式サイト：http://emmet.io/
- Sublime Text 3 を起動
- ショートカットキー「Ctrl + Shift + P」でコマンドパレットを表示
- Package Controll: install Pachage を実行
- Emmet を検索してインストール実行
チートシートはURLを参照：http://docs.emmet.io/cheat-sheet/
Emmet の設定
もし、Hayaku を入れる場合は、tab が喧嘩してしまうので、下記の通り設定を変更します。
1. Sublime Text 3 を起動
2. メニューの Preferences を開く
3. Package Settings → Emmet → Settings - User を選択
4. 下記を記述して保存
{
"disable_tab_abbreviations_for_scopes": "css,less,sass,scss,stylus"
}
を記述して保存
ConvertToUTF8 のインストール
ShiftJIS のファイルを UTF-8 に変換して表示してくれます。
保存するときは文字コードを戻してくれます。
- Sublime Text 3 を起動
- ショートカットキー「Ctrl + Shift + P」でコマンドパレットを表示
- Package Controll: install Pachage を実行
- ConvertToUFT8 を検索してインストール実行
SublimeLinter のインストール
SublimeLinter はリアルタイムで構文チェックをしてくれます。
- Sublime Text 3 を起動
- ショートカットキー「Ctrl + Shift + P」でコマンドパレットを表示
- Package Controll: install Pachage を実行
- SublimeLinter を検索してインストール実行
BracketHighlighter のインストール
{ } をハイライト。閉じたかどうかチェック。
- Sublime Text 3 を起動
- ショートカットキー「Ctrl + Shift + P」でコマンドパレットを表示
- Package Controll: install Pachage を実行
- BracketHighlighter を検索してインストール実行