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

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

##プラグイン一覧

### [All Autocomplete](https://github.com/alienhard/SublimeAllAutocomplete)
優秀なコード補完です。これ入れておけば、とりあえずサジェストに色々出てきます。

### [AutoFileName](https://github.com/BoundInCode/AutoFileName)
ファイル名の補完機能追加。相対でディレクトリを追ってくれるのが便利。
プロジェクトごとにルート相対にもできます。
プロジェクト > Edit Project

```hoge.sublime-project
{
	"settings":
	{
		"afn_proj_root": "【例）/Users/ユーザー名/ ... /ルートフォルダ】",
		"afn_use_project_root": true
	}
}
```

### [BracketHighlighter](https://github.com/facelessuser/BracketHighlighter)
閉じタグ強調プラグイン。必須です。

### [Codecs33](https://github.com/seanliang/Codecs33)
ConvertToUTF8とともに入れることで、Shift-Jisに対応できます。
Package Controlでは見つからない場合もあるようで、
その際は上記のリンクから、Githubからインストールすることになります。

### [Compass](https://github.com/whatwedo/sublime-text-compass)
sublimeでコンパイルできるようになります。
事前準備として、SassとcompassをPCにインストールしなきゃなので、
そちらも時間を見つけてメモしておきたいです。

### [ConvertToUTF8](https://github.com/seanliang/ConvertToUTF8)
sublimeは初期設定だとutf-8しか対応していないので、必須です。
これだけでも結構まかなえます。

### [CSS3](https://github.com/y0ssar1an/CSS3)
古いCSSをハイライトしてくれます。

### [Diffy](https://github.com/zsong/diffy)
比較ツールです。納品ファイルつくるときとか。
Sync View Scrollと一緒にいれると複数画面同時スクロールできていい感じです。

### [Emmet](https://github.com/sergeche/emmet-sublime)
言わずと知れたEmmet。毎日お世話になってます。
弊社のガイドラインでは各ブラウザの最新版のみ対応なので、
ベンダープレフィックスは消しちゃってます。消し方は後述。

### [Emmet Css Snippets](https://github.com/P233/Emmet-Css-Snippets-for-Sublime-Text-2)
Emmetのスニペットです。

### [Goto-CSS-Declaration](https://github.com/rmaksim/Sublime-Text-2-Goto-CSS-Declaration)
HTMLから該当のクラスまでジャンプしてくれる機能です。めちゃくちゃ便利。
分割ウィンドウでクラスが書かれているCSSを開いてないと使えないので注意。

### [HTML5](https://github.com/mrmartineau/HTML5)
HTML5の補完です。

### [Inc-Dec-Value](https://github.com/rmaksim/Sublime-Text-2-Inc-Dec-Value)
数字を「alt + 上下キー」で操作できるようになります。
テンキーがない時などは重宝します。

### [InputSequence](https://github.com/KzKousaka/InputSequence)
連番入力ができるようになります。すごく便利。
Package Controlにはありませんが、開発が日本の方なので、
Githubの説明が読みやすいです。

### [Japanize](https://github.com/kik0220/sublimetext_japanize)
sublimeの日本語化プラグイン。
インストール後に操作が必要なので、プラグインのReadmeにしたがって作業が必要です。

### [jQuery](https://github.com/SublimeText/jQuery)
jQueryのコード補完です。

### [Sass](https://github.com/braver/SublimeSass)
sublimeでSassが使えるようになります。
compassと合わせて入れると便利。

### [SASS Snippets](https://github.com/sublimebrasil/sublime-snippets-sass)
Sassのスニペットです。

### [SCSS](https://github.com/MarioRicalde/SCSS.tmbundle)
Scssを使えるようにします。

### [SFTP](https://wbond.net/sublime_packages/sftp)
保存したファイルを自動でアップロードしてくれます。
本来は有料なのですが、無料でも購入を促すポップアップが出るだけなので、使い続けられます。
sftp-config.jsonが必要なので、説明を読んで配置してあげてください。

### [Smart Delete](https://github.com/mac2000/sublime-smart-delete)
行末から改行をデリートすると、インデントも削除してくれます。めっちゃ便利。
スペースでインデントとってあるファイルに当たると、これ無しはキツイです。

### [Sync View Scroll](https://github.com/zzjin/syncViewScroll)
複数画面同時スクロール機能プラグイン。上記のDiffyと同時に使うといい感じのやつです。
やや動作が不安定かも。

### [TrailingSpaces](https://github.com/SublimeText/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"},
```

<br>Emmetの展開キーの変更

```Default(OSX).sublime-keymap
	{
        "keys": [
            "command+e"
        ], 
        "args": {
            "action": "expand_abbreviation"
        }, 
        "command": "run_emmet_action", 
        "context": [
            {
                "key": "emmet_action_enabled.expand_abbreviation"
            }
        ]
    },
```

<br>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"}
    },
```

<br>行数指定移動のキー変更

```Default(OSX).sublime-keymap
    { "keys": ["command+g"], "command": "show_overlay", "args": {"overlay": "goto", "text": ":"} }
```