自分用Sublime Text3の設定メモ

# 自分用Sublime Text3の設定メモ

※ 基本的にMacでの設定なので、他のOSだと一部異なる場合があります。

## Package(プラグイン)

### Package Control

これを入れないと始まらない。
参考：[https://packagecontrol.io/installation](https://packagecontrol.io/installation)

以下、よく使うPackage

### Abacus

- before

```
hoge = hoge
hoge2 = hoge2
hogehoge = hogehoge
```

- after

```
hoge     = hoge
hoge2    = hoge2
hogehoge = hogehoge
```

### All Autocomplete
オートコンプリートの拡張

### BracketHighlighter
カッコや開始タグ/閉じタグを強調


### Codecs33
「ConvertToUTF8」をMacで動かすためのもの

### ConvertToUTF8
shift-jis、euc-jpを利用可能にする


### CSScomb
CSSのセレクタを任意の順序に並び替え。可読性アップ。

PackageControlから消えた？ようなので、GitHubからインストール
```Package Control: Add Repository``` -> ```Package Control: Install Package```
https://github.com/csscomb/sublime-csscomb.git

自分用設定ファイル
https://gist.github.com/jamog3/c12e044f051b22a30e1e

memo：
node.jsを使用しており、nodebrewなどで管理してる場合は、
デフォルトのパスから変更されてしまっているので、
macの場合、シンボリックリンクを貼る必要がある。

ターミナルで

```
$ which node
```

そこで表示されたものをコピーし、

```
$ ln -s 「ここに貼る」 /usr/local/bin
```

### Emmet
みんな大好きEmmet。htmlとかcssの記述が爆速に。
チートシート：[http://docs.emmet.io/cheat-sheet/](http://docs.emmet.io/cheat-sheet/)


### FindKeyConflicts
コンフリクトしたショートカットキーの確認


### GitGutter
gitで管理してる場合、変更があった行番号にアイコンが追加されて教えてくれる


### Goto-CSS-Declaration
html上でショートカットキーを押すと、対応したcssにジャンプ。
ただし、BEM+SCSSで、`&__hoge` みたいな記述だと反応しない。


### HTML-CSS-JS Prettify
コードフォーマットの設定


### Inc-Dec-Value
alt+up / alt+downで数値を増減


### Local History
保存するたびにローカルに自動バックアップを生成


### OmniMarkupPreviewer
Markdown記法をリアルタイムプレビュー


### SideBarEnhancements
サイドバーを拡張

### StringEncode
文字列変換

- URLエンコード

```
あいうえお -> %E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A
```

- HTML特殊記号(HTML Entitize)

```
<¥> -> &lt;&yen;&gt;
```

- Unicode変換

```
“” -> \u201c\u201d
```

### sublime-multi-number-input
連番入力を劇的に楽にする。
PackageControllerからは追加できないので下記から。
参考：[http://qiita.com/airosB/items/5b743e419bbe1a1f22f9](http://qiita.com/airosB/items/5b743e419bbe1a1f22f9)


### SublimeCodeIntel
関数定義元にジャンプする


### SublimeLinter

- SublimeLinter-coffee
- SublimeLinter-contrib-sass-lint
- SublimeLinter-contrib-scss-lint
- SublimeLinter-csslint
- SublimeLinter-jshint

など。各記法のlintチェック用。いろいろ設定が必要なので詳しくは下記を参照。
参考：[http://liginc.co.jp/web/js/73704](http://liginc.co.jp/web/js/73704)


### SublimeServer
Sublime Text単体でローカルサーバを起動。
自分の環境だと不安定でよくフリーズするがお手軽なのでたまに利用。

### SuperSelect
Cmd+D(Ctrl+D)を拡張


### Theme - Afterglow
お気に入りのテーマ。使いやすい。


### Trailing Spaces
不要な半角/全角スペースをハイライト
Preferences > Package Settings > Trailing Spaces > Settings - User

```
{
  "trailing_spaces_regexp": "　|[ 　\t]+"
}
```


### その他
Syntax用に使用するものとか。
実際に使用する言語などに応じてインストール。

- Jade
- Jade Snippets
- JavaScript Console
- JavaScript Patterns
- JavaScript Snippets
- jQuery
- jQuery Snippets pack
- Mocha Coffee Snippets
- ReactJS
- Ruby Slim
- Sass
- SASS Snippets
- SCSS
- SCSS Snippets
- Syntax Highlighting for Sass


## Settings - User
Sublime Text3の設定
Preferences > Settings - User

```Preferences.sublime-settings
{
	"auto_complete_commit_on_tab": false,
	"bold_folder_labels": true,
	"close_windows_when_empty": true,
	"color_scheme": "Packages/User/SublimeLinter/Monokai Bright (SL).tmTheme",
	"dictionary": "Packages/Language - English/en_GB.dic",
	"draw_indent_guides": true,
	"draw_minimap_border": true,
	"draw_white_space": "all",
	"font_face": "Ricty Regular",
	"font_options":
	[
		"subpixel_antialias",
		"no_italic",
		"no_round",
		"directwrite"
	],
	"font_size": 13,
	"highlight_line": true,
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
		"Abacus",
		"sublime-csscomb",
		"sublime-multi-number-input",
		"Vintage"
	],
	"indent_guide_options":
	[
		"draw_active"
	],
	"jshint_options":
	{
	},
	"overlay_scroll_bars": "enabled",
	"show_encoding": true,
	"show_full_path": true,
	"show_line_endings": true,
	"show_tab_close_buttons": false,
	"status_bar_brighter": true,
	"sublimelinter_delay": 0.3,
	"sublimelinter_gutter_marks": true,
	"sublimelinter_wrap_find": true,
	"tab_size": 2,
	"tabs_padding_medium": true,
	"tabs_small": true,
	"theme": "Afterglow-orange.sublime-theme",
	"translate_tabs_to_spaces": true,
	"trim_trailing_white_space_on_save": true,
	"word_wrap": true
}
```

参考：[http://qiita.com/lunatea/items/7101572e159f98369bc9](http://qiita.com/lunatea/items/7101572e159f98369bc9)

なお、記述ミスがある状態で保存するとダイアログが出てくる。
そのままの状態でSublime Textを終了すると、立ち上がらなくなることがあるので注意。
やらかした場合は、別のテキストエディタでこの設定ファイルを修正すれば復活する。

### Syntax Specific - User
Syntax別に設定する場合。該当ファイルを開いた状態で下記から開く。
Preferences > Settings - More > Syntax Specific - User

```xxx.sublime-settings
{
  "auto_complete": false
}
```

例：特定のSyntaxの際、自動補完を切る

## KeyBindings - User
ショートカットキーがバッティングしてた場合など、ここで別のショートカットキーに割り当てる。
Preferences > KeyBindings - User

```Default.sublime-keymap
[
  // emmet
  {
      "keys": [
          "command+e"
      ],
      "args": {
          "action": "expand_abbreviation"
      },
      "command": "run_emmet_action",
      "context": [
          {
              "key": "emmet_action_enabled.expand_abbreviation"
          }
      ]
  },
  // Input Sequence sublime-multi-number-input
  { "keys": ["command+shift+alt+0"], "command": "multi_number_input"},

  {
    "keys": ["ctrl+shift+alt+."], "command": "goto_css_declaration",
    "args": {"goto": "next"}
  },
  {
    "keys": ["ctrl+shift+alt+,"],  "command": "goto_css_declaration",
    "args": {"goto": "prev"}
  },
  // indent
  { "keys": ["super+alt+r"], "command": "reindent" ,
    "args": { "single_line": false }
  },
  // タグ選択
  {
    "keys": [
        "command+ctrl+a"
    ],
    "command": "rename_tag",
    "context": [
        {
            "key": "emmet_action_enabled.rename_tag"
        }
    ]
  },
  // shift + enter で Dreamwerverのように<br>を挿入
  { "keys": ["shift+enter"], "command": "insert_snippet", "args": {"contents": "<br>"},
   "context": [
     {
       "key": "selector",
       "operand": "text.html.basic - source",
       "operator": "equal"
     }
   ]
  },
  // jade用
  { "keys": ["shift+enter"], "command": "insert_snippet", "args": {"contents": "\nbr\n| "},
   "context": [
     {
       "key": "selector",
       "operand": "source.jade, text.jade",
       "operator": "equal"
     }
   ]
  },
  // オートコンプリート
  { "keys": ["alt+space"], "command": "auto_complete" }
]
```

operandは、該当ファイルを開いた状態で command + alt + p でステータスバーに表示される。


## Syntaxのデフォルトを変更
該当のファイルを開いた状態で、
View > Syntax > Open all with current extension as...
から選択


## 検索窓で日本語を入力
参考：[https://gist.github.com/chibicode/ad1f50b3b191ee694556](https://gist.github.com/chibicode/ad1f50b3b191ee694556)

ついでに、F7でカナ変換もしたいので、下記もコメントアウト

```
{ "keys": ["f7"], "command": "build" },
```


## 他のMacでの設定の同期

DropboxかGitでやるのが一般的なようで。
参考：[https://packagecontrol.io/docs/syncing](https://packagecontrol.io/docs/syncing)


## よく使うショートカットとか
※ Mac用です。commandをctrlに置き換えると一部はWindowsでも使えます。

### カーソル関連
- ```ctrl + shift + up``` / ```ctrl + shift + down```
  カーソルが上下に増える。マルチカーソル機能。
  Macの場合、OSのショートカットと衝突するので、OS側の設定を要変更。

- （単語などを選択した状態で）```command + D```
  同じものを検索して選択状態になる

- ```command + クリック```
  複数のカーソルを任意の位置に配置

- ```command + shift + D```
  カーソルがある行を複製

- ```command + ctrl + up``` / ```command + ctrl + down```
  カーソルがある行を上下に移動

- ```command + L```
  1行選択。連打で行数が増える

- （複数行を選択した状態で）```command + shift + L```
  各行にカーソルが現れる


### 検索
- ```command + F```
  検索

- ```command + shift + F```
  複数のファイルの中から検索


### その他
- ```command + P```
  プロジェクト内のファイルを検索して開く

- ```command + /```
  コメントアウト

- ```command + alt + 2```
  画面を2列に分割