sublime text3の自分用プラグインまとめ（各プラグイン他の設定もついでに） #SublimeText

マシンの引っ越しや初期化のたびに諸々設定しなおすので、自分用に備忘録です。
基本的にはPackage Controlでインストールできます。

プラグイン一覧

All Autocomplete

優秀なコード補完です。これ入れておけば、とりあえずサジェストに色々出てきます。

AutoFileName

ファイル名の補完機能追加。相対でディレクトリを追ってくれるのが便利。
プロジェクトごとにルート相対にもできます。
プロジェクト > Edit Project

hoge.sublime-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.sublime-settings

{
"trailing_spaces_regexp": "　|｛|｝|￥|＝|“|”|’|＋|＠|：|；|＿|[０-９]|[ａ-ｚ]|[Ａ-Ｚ]|"
}

設定の仕方が変わった様です（2020/04/28追記）
ハイライトが効かなくなったので、git hubを確認したところ、接頭辞のtrailing_spaces_が削除になったようです。
というわけで、以下の様に変更ののち、sublime textを再起動で表示されました。

trailing_spaces.sublime-settings

{
"regexp": "　|｛|｝|￥|＝|“|”|’|＋|＠|：|；|＿|[０-９]|[ａ-ｚ]|[Ａ-Ｚ]|"
}

その他設定

不可視文字の可視化

基本設定 > Setting

Preferences.sublime-settings

{
    "draw_white_space": "all",
}

Emmetのベンダープレフィックスをつけない設定

基本設定 > Package Setting > Emmet > Settings - User

Emmet.sublime-settings

{
    "preferences": {
        "css.autoInsertVendorPrefixes": false,
        "caniuse.enabled": false,
    },
}

ついでにコメントアウトの位置を調整を追記

Emmet.sublime-settings

{
    "preferences": {
        "css.autoInsertVendorPrefixes": false,
        "caniuse.enabled": false,
        "filter.commentAfter": "<!-- <%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->"
    },
}

これでコメントアウトが閉じタグ後改行無しになります。

ショートカットキー設定

完全に自分用です。mac OSXです。
せっかくなので、一個ずつメモ。

InputSequence（連番プラグイン）の立ち上げ

Default(OSX).sublime-keymap

    { "keys": ["command+shift+-"], "command": "input_sequence"},

Emmetの展開キーの変更

Default(OSX).sublime-keymap

    {
        "keys": [
            "command+e"
        ], 
        "args": {
            "action": "expand_abbreviation"
        }, 
        "command": "run_emmet_action", 
        "context": [
            {
                "key": "emmet_action_enabled.expand_abbreviation"
            }
        ]
    },

Goto-CSS-Declaration（使用クラスへジャンプ）のキー変更

Default(OSX).sublime-keymap

    {
        "keys": ["option+super+right"], "command": "goto_css_declaration",
        "args": {"goto": "next"}
    },
    {
        "keys": ["option+super+left"],  "command": "goto_css_declaration",
        "args": {"goto": "prev"}
    },

行数指定移動のキー変更

Default(OSX).sublime-keymap

    { "keys": ["command+g"], "command": "show_overlay", "args": {"overlay": "goto", "text": ":"} }