マシンの引っ越しや初期化のたびに諸々設定しなおすので、自分用に備忘録です。
基本的にはPackage Controlでインストールできます。
##プラグイン一覧
All Autocomplete
優秀なコード補完です。これ入れておけば、とりあえずサジェストに色々出てきます。
AutoFileName
ファイル名の補完機能追加。相対でディレクトリを追ってくれるのが便利。
プロジェクトごとにルート相対にもできます。
プロジェクト > Edit Project
{
"settings":
{
"afn_proj_root": "【例）/Users/ユーザー名/ ... /ルートフォルダ】",
"afn_use_project_root": true
}
}
BracketHighlighter
閉じタグ強調プラグイン。必須です。
Codecs33
ConvertToUTF8とともに入れることで、Shift-Jisに対応できます。
Package Controlでは見つからない場合もあるようで、
その際は上記のリンクから、Githubからインストールすることになります。
Compass
sublimeでコンパイルできるようになります。
事前準備として、SassとcompassをPCにインストールしなきゃなので、
そちらも時間を見つけてメモしておきたいです。
ConvertToUTF8
sublimeは初期設定だとutf-8しか対応していないので、必須です。
これだけでも結構まかなえます。
CSS3
古いCSSをハイライトしてくれます。
Diffy
比較ツールです。納品ファイルつくるときとか。
Sync View Scrollと一緒にいれると複数画面同時スクロールできていい感じです。
Emmet
言わずと知れたEmmet。毎日お世話になってます。
弊社のガイドラインでは各ブラウザの最新版のみ対応なので、
ベンダープレフィックスは消しちゃってます。消し方は後述。
Emmet Css Snippets
Emmetのスニペットです。
Goto-CSS-Declaration
HTMLから該当のクラスまでジャンプしてくれる機能です。めちゃくちゃ便利。
分割ウィンドウでクラスが書かれているCSSを開いてないと使えないので注意。
HTML5
HTML5の補完です。
Inc-Dec-Value
数字を「alt + 上下キー」で操作できるようになります。
テンキーがない時などは重宝します。
InputSequence
連番入力ができるようになります。すごく便利。
Package Controlにはありませんが、開発が日本の方なので、
Githubの説明が読みやすいです。
Japanize
sublimeの日本語化プラグイン。
インストール後に操作が必要なので、プラグインのReadmeにしたがって作業が必要です。
jQuery
jQueryのコード補完です。
Sass
sublimeでSassが使えるようになります。
compassと合わせて入れると便利。
SASS Snippets
Sassのスニペットです。
SCSS
Scssを使えるようにします。
SFTP
保存したファイルを自動でアップロードしてくれます。
本来は有料なのですが、無料でも購入を促すポップアップが出るだけなので、使い続けられます。
sftp-config.jsonが必要なので、説明を読んで配置してあげてください。
Smart Delete
行末から改行をデリートすると、インデントも削除してくれます。めっちゃ便利。
スペースでインデントとってあるファイルに当たると、これ無しはキツイです。
Sync View Scroll
複数画面同時スクロール機能プラグイン。上記のDiffyと同時に使うといい感じのやつです。
やや動作が不安定かも。
TrailingSpaces
スペースを可視化するだめのプラグインです。全角半角の区別に使えるので、おすすめは下の設定です。
基本設定 > Package Setting > Trailing Spaces > Settings - User
{
"trailing_spaces_regexp": " |｛|｝|￥|＝|“|”|’|＋|＠|：|；|＿|[０-９]|[ａ-ｚ]|[Ａ-Ｚ]|"
}
設定の仕方が変わった様です（2020/04/28追記）
ハイライトが効かなくなったので、git hubを確認したところ、接頭辞のtrailing_spaces_が削除になったようです。
というわけで、以下の様に変更ののち、sublime textを再起動で表示されました。
{
"regexp": " |｛|｝|￥|＝|“|”|’|＋|＠|：|；|＿|[０-９]|[ａ-ｚ]|[Ａ-Ｚ]|"
}
##その他設定
不可視文字の可視化
基本設定 > Setting
{
"draw_white_space": "all",
}
Emmetのベンダープレフィックスをつけない設定
基本設定 > Package Setting > Emmet > Settings - User
{
"preferences": {
"css.autoInsertVendorPrefixes": false,
"caniuse.enabled": false,
},
}
ついでにコメントアウトの位置を調整を追記
{
"preferences": {
"css.autoInsertVendorPrefixes": false,
"caniuse.enabled": false,
"filter.commentAfter": "<!-- <%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->"
},
}
これでコメントアウトが閉じタグ後改行無しになります。
##ショートカットキー設定
完全に自分用です。mac OSXです。
せっかくなので、一個ずつメモ。
InputSequence（連番プラグイン）の立ち上げ
{ "keys": ["command+shift+-"], "command": "input_sequence"},
Emmetの展開キーの変更
{
"keys": [
"command+e"
],
"args": {
"action": "expand_abbreviation"
},
"command": "run_emmet_action",
"context": [
{
"key": "emmet_action_enabled.expand_abbreviation"
}
]
},
Goto-CSS-Declaration（使用クラスへジャンプ）のキー変更
{
"keys": ["option+super+right"], "command": "goto_css_declaration",
"args": {"goto": "next"}
},
{
"keys": ["option+super+left"], "command": "goto_css_declaration",
"args": {"goto": "prev"}
},
行数指定移動のキー変更
{ "keys": ["command+g"], "command": "show_overlay", "args": {"overlay": "goto", "text": ":"} }