環境はOS X 10.11。
設定
「Preference -> Settings - User」に下記を記述して自分なりに使いやすい設定にする。
{
"draw_white_space": "all", //タブやスペースなどの不過視文字を表示
"translate_tabs_to_spaces": true, //タブをスペースに変換
"tab_size": 2, //タブサイズ
"highlight_line": true, //現在の選択行をハイライト表示
"trim_trailing_white_space_on_save": true, //保存時に空白を削除
"word_wrap": true, //テキストの折り返しを有効
"fallback_encoding": "UTF-8", //文字コードが不明なファイルのエンコーディングの文字コード
"show_encoding": true, //エンコーディングの文字コードを右下のステータスバーに表示
"show_line_endings": true,//改行コードをステータスバーに表示,
"open_files_in_new_window": false, //ファイルを新規ウインドウではなく新規タブで開く
"close_windows_when_empty": false,//開いているファイルがなくなってもSublimeを終了しない,
"scroll_past_end": true, //最後の行以降もスクロールできる
"line_padding_top": 3, //行の上の空き
"line_padding_bottom": 3, //行の下の空き
"font_options": [ "gray_antialias" ], //フォントにアンチエイリアスをかけて見やすく
"bold_folder_labels": true, //サイドバーのフォルダ名を太字に
"indent_guide_options": [ "draw_normal", "draw_active" ], //インデントのガイドラインを表示
"overlay_scroll_bars": "enabled", //スクロールさせたときだけバーを表示
}
パッケージ
Package Control
「Ctrl + `」でSublime上でコマンドラインを起動。
Package Control公式サイトのインストールコードをコピペ。
とりあえず初期装備
AutoFileName
プロジェクトフォルダのフォルダやファイル名を自動補完。
All Autocomplete
自動補完機能を強化。
Abacus
=など特定の記号で列を揃える。
「⌘+shift+P」から使用。
BracketHighlighter
[], (), {}, "", '', <tag></tag>といったカッコ類を強調
https://packagecontrol.io/packages/BracketHighlighter
ConvertToUTF8
UTF-8以外の文字コードのファイルを開いても文字化けしないようにする。
Mac/LinuxではCodecs33というパッケージもインストールする必要あり。
Color Highlighter
選択した色をその色でハイライト。
View in Browser
開いているhtmlをショートカットでブラウザで開けるようにする。
「Preference -> Key Bindings - User」に下記を記述。
[
{ "keys": [ "super+shift+o" ], "command": "view_in_browser", "args": { "browser": "chrome" }}
]
Emmet
Emmetを有効化。
ユーザー設定でhtmlのスニペットをlang="ja"になるように修正。
{
"snippets": {
"variables": {"lang": "ja"}
}
}
Hayaku
Emmetを強化。
cでcolor: #FFF;を展開できるなどかゆいところに手が届く。
TrailingSpaces
末尾に半角スペースが入っていたらハイライトして保存時に削除。
ユーザー設定でハイライトを非表示に、全角スペースも削除されるように変更。
{
"trailing_spaces_enabled": false,
"trailing_spaces_regexp": " |[ ]+"
}
Origami
画面分割機能を強化。
Increment Selection
複数カーソルで数字を選択してインクリメント。
GitGutter
Gitの差分を視覚化。
Goto-CSS-Declaration
読み込んでいるcss、scssを開いていればhtmlから対応したコードに⌘+ctrl+→でジャンプできる。
Scss
Scssをシンタックスハイライト。
Sassだとemmetの展開時にセミコロンが自動でつかない。
Better CoffeeScript
CoffeeScriptをシンタックスハイライト。
HTML5
HTML5のコード補完。
jQuery
jQueryのコード補完。
SublimeLinter
リアルタイムにコードのエラーをチェック。
さらに個別に各Linterプラグインが必要。
SublimeLinter-html-tidy
brew install homebrew/dupes/tidyで有効化。
SublimeLinter-jshint
npm install -g jshintで有効化。
SublimeLinter-csslint
npm install -g csslintで有効化。
SublimeLinter-contrib-scss-lint
gem install scss_lintで有効化。
SublimeCodeIntel
各言語のコード補完など。
テーマ
ファイルアイコンをつけたかったので「Material Theme」をパッケージインストール。
下記を「Preference -> Settings - User」に追加。
{
"theme": "Material-Theme-Darker.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
}