SublimeText使い方メモ

そろそろサクラエディタを卒業してナウいテキストエディタに移ってみたいなと思って、噂の Sublime Text を使ってみたときのメモ。
早くも[恋に落ちそう](http://liginc.co.jp/designer/archives/6774)です。

環境は Windows7。

#インストール
http://www.sublimetext.com/3

#環境設定とか
##Package Control をインストール
プラグイン管理用のプラグイン？。Eclipse のマーケットプレイス的なもの。

`Ctrl + `` でコンソールを表示させてから、以下をペースト＋ Enter。

```text:
import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) 
```

`Prefereneces` メニューに `Package Control` が追加されてたらインストール完了。

##日本語入力しやすくする
- Package Control※ で `IMESupport` をインストール。

**※Package Controal でパッケージをインストールする手順**

- `Ctrl + Shift + p` で表示されるプロンプトに `Install Package` と入力して Enter。
- 少しするとパッケージ検索用のプロンプトが表示されるので、インストールしたいパッケージ名を入力して Enter。

##Shift_JIS ファイルを表示できるようにする
- Package Control で `ConvertToUTF8` をインストール。

##全角スペースを表示させる
- Package Control で `TrailingSpaces` をインストール。
- `Preferences` → `Package Settings` → `Trailing Spaces` → `Settings - Users` を選択。
- 以下をコピペして保存し、 Sublime Text を再起動。

```json:
{
    "trailing_spaces_regexp": "　|",
    "trailing_spaces_highlight_color" : "invalid"
}
```

##細かい設定
- `Preferences` → `Settings User` を選択。
- 以下をコピペして保存。

```json:
{
    "color_scheme": "Packages/Color Scheme - Default/Twilight.tmTheme", // テーマ
    "draw_white_space": "all", // タブ・半角スペースを表示する
    "font_face": "<好きなフォルトを指定>", // フォント
    "font_size": 14, // フォントサイズ
    "highlight_line": true, // 選択行をハイライトする
    "show_encoding": true, // 文字コードをフッターに表示する
    "show_line_endings": true, // 改行コードをフッターに表示する
    "translate_tabs_to_spaces": true, // タブで半角スペースを入力
    "indent_guide_options": ["draw_normal", "draw_active"], // インデントの高さを示すガイドラインを見やすくする
}
```

##拡張子ごとに個別の設定をする
タブサイズはデフォルト 4 だが、 HTML や XML は 2 にしたい。
そんな感じで拡張子ごとに設定を上書きしたい場合は以下のようにする。

- `Preferences` → `Settings - More` → `Syntax Specific` を選択。
- 以下をコピペして保存。

```json:
{
  "tab_size": 2
}
```

#設定ファイルの保存場所
設定ファイルは、 `Preferences` → `Browse Packages` を選ぶと開くフォルダの下の `User` フォルダに保存されている。

新 PC の環境をセットアップするときは、この設定ファイルをコピーしてくればいいんじゃなかろうか。

#操作方法とか
##移動
###指定行にジャンプ
`Ctrl + g`。

行番号を入力してから Enter。
Escape すると元の位置に戻る（指定行をチラ見したいときに便利？）。

##検索
###基本
- `Ctrl + f` でテキスト検索。
- オプションで、「正規表現（`Alt + r`）」「大文字小文字の区別（`Alt + c`）」「単語単位の検索（`Alt + w`）」を指定できる（デフォルトはオフ）。
- 検索ボックスにフォーカスが当たっている状態で `Enter` or `Shift + Enter` で該当箇所を前後できる。

###置換
- `Ctrk + h` でテキスト置換。
- `Ctrl + Shift + h` で順番に置換、 `Ctrl + Alt + Enter` で該当箇所を全て置換。
- `Ctrl + Enter` で改行も含めた検索ができる。

![sublimetext.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/ac16de42-7506-d050-5326-0d4791263193.jpeg)

###Grep 検索（置換）
- `Ctrl + Shift + f` で Grep 検索（置換）。

![sublimetext.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/0739457a-1b1a-feeb-b181-2d78a70159d7.jpeg)

**検索結果**

![sublimetext.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/7cb0d6b4-03c1-e151-fcfd-7c1a4c2f023e.jpeg)

###メソッド・関数検索
`Ctrl + r`

##編集
###矩形選択
####マウス操作の場合
`Shift + 右ドラッグ`

####キー操作の場合
`Ctrl + Alt + ↑ or ↓`

カーソルが上下に伸びるので、その状態で `Shift + ← or →` で矩形選択できる。

###入力補完
`Ctrl + Space` で、現在のファイル内から単語を探してきて候補を表示してくれる。

###行移動
`Ctrl + Shift + ↑ or ↓`

現在選択中の行を上下に移動させることができる。

###行コピー
`Ctrl + Shift + d`

現在行を下にコピーする。

###大文字・小文字変換
大文字→小文字： `Ctrl + k -> u`
小文字→大文字： `Ctrl + k -> l`

###ソート
`F9` で辞書の順番で行をソートできる。大文字小文字は考慮されない。

大文字小文字を考慮する場合は `Ctrl + F9`。

###マージ
標準ではショートカットが定義されていないようだが、機能は提供されている。

`Edit` → `Permute Lines` → `Unique` で重複行が削除される。

ショートカットを割り当てる場合は、以下のようにする。

- `Preferences` → `Key Bindings - User` を選択。
- 以下をコピペして保存。

```json:
[
  { "keys": ["f8"], "command": "permute_lines", "args": {"operation": "unique"} }
]
```

これで、 `F8` で重複行削除ができるようになる。

##ウィンドウ・ファイル操作
###タブ移動
`Ctrl + PageUp or PageDown`

###現在のタブを閉じる
`Ctrl + w`

###新しいファイルを作成する
`Ctrl + n`

###保存
`Ctrl + s` で上書き保存。
`Ctrl + Shift + s` で名前を指定して保存。

###ファイル検索
`Ctrl + p`

###ウィンドウ分割
###左右分割
`Alt + Shift + 2～4` で、画面を横に分割できる。

###上下分割
`Alt + Shift + 8～9` で、画面を縦に分割できる。

###上下左右（４画面）分割
`Alt + Shift + 5`

###フォーカス移動
`Ctrl + <ウィンドウ番号>`

ウィンドウ番号は、数値を指定。
例えば、左右２画面に分割した場合、左が１で右が２になる。
３つに分割したのなら、一番右のウィンドウが３になる。

###ファイル移動
`Ctrl + Shift + <ウィンドウ番号>` で、現在フォーカスが当たっているファイル（タブ）を、指定した番号のウィンドウに移動できる。

###SimpleClone を使って現在のファイルを分割表示する
`SimpleClone` というパッケージを入れると、 `Ctrl + Shift + → or ↓` で現在のファイルを右方向または下方向に分割コピーできる。

#シェルコマンドを実行する
[Shell-Turtlestein](https://github.com/misfo/Shell-Turtlestein) をインストールすると、 Sublime Text からシェルコマンドを実行できるようになる。

自分の環境では、インストールしただけでは `Ctrl + Shift + c` でプロンプトが表示できなかったので、以下のショートカット定義を追加した。

```json:
{"keys": ["ctrl+shift+c"], "command": "shell_prompt"},
```

これで、 `Ctrl + Shift + c` でプロンプトが表示されるようになる。

![sublimetext.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/e052d6c1-76d5-d3b0-2978-b4ef7a23af33.jpeg)

![sublimetext.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/4355d627-b0d0-c95c-be3a-06e7623a1fa4.jpeg)

ファイルやフォルダの追加も当然可能で、結果は即座に Sublime Text のエクスプローラにも反映される。
これは捗る。

#Markdown エディタとして改造する
##プレビュー機能を追加する
- Package Control を使って `OmniMarkupPreviewer` をインストールする。
- `Ctrl + Alt + o` で、既定のブラウザを使ってプレビューが表示される。
- 表示はリアルタイムで反映される。

###目次作成機能を追加する
- `Preferences` → `Package Settings` → `OmniMarkupPreviewer` → `Settings - User` を選択。
- 以下をコピペして保存。

```json:
{
    "renderer_options-MarkdownRenderer": {
        "extensions": [
            "tables",
            "strikeout",
            "fenced_code",
            "codehilite",
            "toc"
        ]
    }
}
```

- Markdown 中に `[TOC]` と入力すると、見出しが目次として表示されるようになる。

![sublimetext.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/fda32178-edfc-97fc-a71a-0667f38a61f0.jpeg)

##Markdown 内のコードブロックにシンタックスハイライトを適用する
- Package Control を使って `Markdown Extended` をインストール。
- `View` → `Syntax` → `Open all with current extention with as...` → `Markdown Exntended` を選択。
- コードブロックもシンタックスハイライトしてくれるようになる。

![sublimetext.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/239cdaa0-2573-1a2a-ba76-34eaadb2bd3d.jpeg)

##テーブル入力の補助機能を追加する
- Package Control を使って `Table Editor` をインストールする。
- `.md` ファイルを開いた状態で、 `Ctrl + Shift + p` → `Table Editor: Enable for current syntaxt` を選択して Table Editor を有効にする。

###使い方
- Markdown 上のテーブル内で `Tab` を入力すると、カーソルが左から右、上から下の順にセル移動する。
- `Tab` によるセル移動と同時に、各列の幅がセル内の内容に合わせて同じになるように自動で調節される（スバラシイ！）。
- `Shift + Tab` で１つ前のセルに移動することも可能。

なにこれ素敵すぎ。 Windows でも快適 Markdown 生活が送れますね。
完全に恋に落ちました。

#インストールしているプラグインメモ

| プラグイン           | 説明                                                                                                           |
| :--                  | :--                                                                                                            |
| AutoFileName         | HTML 書いてるときに、 `src` 属性とかでファイル名を補完してくれる。                                             |
| BracketHighlighter   | HTML のタグや括弧の開始・終了をハイライトする。                                                                |
| Git                  | SublimeText から git のコマンドを使う。`Ctrl + Shitf + p` でコマンドパレットを表示してから git で検索。        |
| GitGutter            | 編集中のファイルの行番号のところに、直近のバージョンとの差分を表示してくれる。                                 |
| SublimeLinter        | 構文チェック機能を追加するためのフレームワーク。各言語に対応するためには、それぞれのプラグインを更に追加する。 |
| SublimeLinter-jshint | JavaScript 用の Linter。 `npm install -g jshint` で別途 jshint をインストールしておく必要あり。                |
| Color Highlighter    | CSS で指定した色（`#fff` とか）を選択すると、背景色がその色になる。                                            |
| SideBarEnhancements  | サイドバーの右クリックで色々できるようにする。                                                                 |
| All Autocomplete     | オートコンプリート強化。別ファイルからも検索して補完してくれるっぽい。                                         |
| RecentActiveFiles    | 最近閉じたファイルを検索できる。間違えてファイルを閉じた時とか便利。                                           |


※`RecentActiveFiles` はデフォルトではキーバインドが設定されていないので、 `recent_active_files` を任意のキーにマッピングさせる。

#参考
- [Sublime Text 3をインストールしたらまずやること](http://keidrun.tumblr.com/post/73033053898/tips-sublime-text-sublime-text)
- [Sublime Text 2 で改行コードが CR/LF のファイルを開いたときに警告する · Issue #49 · shikakun/tips](https://github.com/shikakun/tips/issues/49)
- [Sublime Text：インデント(tab)を言語ごとに設定する方法 - フロントエンドとかPCとかスマホとか](http://charlie.hateblo.jp/entry/2013/10/10/101650)
- [Sublime Text: grep 機能のこと :: log.chocolateboard](http://log.chocolateboard.net/sublime-text-grep/)
- [1ヶ月使って便利だと思った Sublime Text 2 のショートカット 12 選（Win、Mac両方） ｜ Developers.IO](http://dev.classmethod.jp/tool/sublime-text-2-shortcut/)
- [SublimeText - Sublime Text 3 のショートカットと設定メモ(個人用) - Qiita](http://qiita.com/knt45/items/973084042751c12f9c2b#3-7)
- [#13 ウィンドウを分割してみよう | Sublime Text 2入門 - プログラミングならドットインストール](http://dotinstall.com/lessons/basic_sublimetext/10513)
- [Hotkey to remove duplicate lines in Sublime Text 2? - Super User](http://superuser.com/questions/561355/hotkey-to-remove-duplicate-lines-in-sublime-text-2)
- [Sublime Text で Markdown を快適にする3つのパッケージ - 情報系大学生のWebメモ](http://webmem.hatenablog.com/entry/sublime-text-markdown#OmniMarkupPreviewer)
- [SublimeText - Sublime Text で markdown をカラフルに - Qiita](http://qiita.com/shuhei/items/093d04d37f110e6ba38c)
- [Sublime Text の Table Editor で Markdown の表を書くのが楽ちんになった - rakugaki-box.net](http://blog.rakugaki-box.net/entry/2014/06/20/sublime_table_editor)
- [SublimeText2 - Sublime Text環境を構築する - Qiita](http://qiita.com/mashumashu/items/d240d6e5c1934aead9b1)