Sublime Textの機能をVisual Studio Codeに移行する


前に[Atomに色々入れて試した](http://qiita.com/sou_lab/items/32c67f82fdc1e49233c8)けど、VSCodeでも色々入れて試している。


追加したら追記していきます。
アップデートが盛んで機能もどんどん追加されているので、パッケージ不要で出来るようになっている機能もあるかも。

---

## キーバインドをSublimeライクに

・Sublime Text Keymap
https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

![Microsoft.VisualStudio.Services.Icons.png](https://qiita-image-store.s3.amazonaws.com/0/16548/c1079f89-565d-ff35-87b5-b511f9006c4c.png "Microsoft.VisualStudio.Services.Icons.png")


Sublime Textのキーバインド（ショートカット）をVSCodeに設定してくれる公式パッケージ。
60弱のキーバインド設定がされるので、操作がかなりSulimeライクになる。

とはいえ足りないものもあるので、その辺りは手動で追加。

VSCodeのキーバインド設定は、`command` の先頭に `-`を指定すると、無効にできるのが便利。


```keybindings.json
//例：⌘+⌥+←→のファイル移動を無効
{
  "key": "alt+cmd+left",
  "command": "-workbench.action.previousEditor"
},
{
  "key": "alt+cmd+right",
  "command": "-workbench.action.nextEditor"
},
```




## クリックマルチカーソルをaltからcmdに
Sublimeでは標準機能。`cmd`＋クリック。

標準では `alt`＋クリックだけど、
メニュー＞選択 から、Sublimeと同じ `cmd`＋クリックに切り替えることができます。


![CodeScreenSnapz001.png](https://qiita-image-store.s3.amazonaws.com/0/16548/e8360bba-9fbe-964c-9c80-7b3f207b5a70.png "CodeScreenSnapz001.png")




## 矩型選択
Sublimeでは標準機能。`option`＋ドラッグで矩型選択。

VSCodeは`cmd`＋`shift`＋ドラッグ
（デフォルトは`alt`＋`shift`＋ドラッグだけど、マルチカーソルを`alt`から`cmd`に切り替えたのでこれも切り替わった）


![editingevolved_column-select.gif](https://qiita-image-store.s3.amazonaws.com/0/16548/0ebc3add-a285-9fb2-4335-fa08ec235dea.gif "editingevolved_column-select.gif")





## 選択範囲拡張
・expand-region
https://marketplace.visualstudio.com/items?itemName=letrieu.expand-region

Sublimeでは[ExpandRegion](https://packagecontrol.io/packages/ExpandRegion)。
選択範囲を拡張できる。Sublimeと同じ`cmd + shift + space`に設定した。

`option`ドラッグにしたいけどわからず。


![javascript.gif](https://qiita-image-store.s3.amazonaws.com/0/16548/694d6974-626a-3fd2-604d-c25c94bd891a.gif "javascript.gif")



## 選択範囲の複製
・Sublime Duplicate Text
https://marketplace.visualstudio.com/items?itemName=brian-anders.sublime-duplicate-text
（[duplicateText](https://marketplace.visualstudio.com/items?itemName=rivenvirus.duplicatetext)がうまく動かなくなったのでSublime Duplicate Textに乗り換え。）


Sublimeでは標準機能。
VSCodeでは`cmd+shif+D`は選択状態でも行の複製しかできないので、パッケージで追加。


```keybindings.json
{
  "key": "cmd+shift+d",
  "command": "sublime-duplicate-text.duplicateText",
  "when": "editorTextFocus && editorHasSelection"
},
{
  "key": "cmd+shift+d",
  "command": "editor.action.copyLinesDownAction",
  "when": "editorFocus && !editorHasSelection"
}  
```
![example.gif](https://qiita-image-store.s3.amazonaws.com/0/16548/78351a52-a026-4331-cb0e-3810a5cfa827.gif)


## インデントを保ったままペースト
・Paste and Indent
https://marketplace.visualstudio.com/items?itemName=Rubymaniac.vscode-paste-and-indent

Sublimeでは標準機能。Paste and Indent。

`"editor.formatOnPaste": true` でもできるが、パッケージを入れた方がイメージ通りの動作だった。



## ユーザースニペットを補完の先頭に表示

```settings.json
{
  "editor.snippetSuggestions": "top"
}
```

なぜか、ユーザースニペットが補完候補の下の方に表示されるので、この設定で先頭に持ってくる。
Emmetの候補もこれで先頭にくる。




## htmlの閉じタグを ` </` で
・Auto Close Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag


SublimeText3Modeをオンにする

```settings.json
{
    "auto-close-tag.SublimeText3Mode": true
}
```

[バージョン1.16から標準機能で搭載](https://code.visualstudio.com/updates/v1_16#_html-close-tags)された。
しかし、htmlしか効かないっぽいのでこのパッケージも併用している。


![Auto close on .gif](https://qiita-image-store.s3.amazonaws.com/0/16548/554cccb0-60e8-5ad6-d8cf-1337af1db4f2.gif "Auto close on .gif")




## 特定ワードをトグルで変更
・Incrementor
https://marketplace.visualstudio.com/items?itemName=nmsmith89.incrementor

Sublimeでは[Inc-Dec-Value](https://packagecontrol.io/packages/Inc-Dec-Value)。

指定した単語をショートカットでループさせることができる。
`true``false`のトグル切り替えが一番便利。

ユーザー設定ファイル `"incrementor.enums"` にトグルしたい単語を登録する。


![Demo.gif](https://qiita-image-store.s3.amazonaws.com/0/16548/bf0acb69-f2b6-26c0-9eed-92b986d97002.gif "Demo.gif")





## HEXとRGBaをトグル切り替え

・hex-rgba converter
https://marketplace.visualstudio.com/items?itemName=medzhidov.hex-rgba-converter

Sublimeでは[Inc-Dec-Value](https://packagecontrol.io/packages/Inc-Dec-Value)。
Inc-Dec-ValueはカラーコードをHEXからRGBaに変換もできる。

キーバインドを割り当てて、トグルでHEX⇄RGBAを変換できる。
`#`からからコードまでまできっちり選択しないと変換できないので、その行にフォーカス当たってれば変換できるSublimeよりちょっと不便。


・Unitconverter
https://marketplace.visualstudio.com/items?itemName=DiegoMolina.unitconverter

Unitconverterも使っている。コマンドパレットから変換できる。


![Unit Converter.gif](https://qiita-image-store.s3.amazonaws.com/0/16548/22c4387d-e509-383b-7f88-06786851cf82.gif "Unit Converter.gif")



## 連番入力
・Increment Selection
https://marketplace.visualstudio.com/items?itemName=albymor.increment-selection

Sublimeでは[InputSequence](https://github.com/kazu1107/InputSequence)。

コマンドパレットから`Increment Selection`を選択し連番を入力できる。
`Decrement Selection`で逆連番。`Reverse Selection`で逆転できる。

![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16548/22d39918-9abf-50b2-301b-af32324104df.gif)


## ソート
・Sort lines
https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines

![usage-animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16548/794521a9-087e-db38-8dc4-ceac3402269f.gif)



Sublimeでは標準機能で`F5`キー。


## プロジェクト管理
・Project Manager
https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
Sublimeでは標準機能。

プロジェクト（ディレクトリ）の保存、呼び出し。
`projects.json` というファイルにプロジェクトの設定を保存して管理する。


![List.png](https://qiita-image-store.s3.amazonaws.com/0/16548/472cd913-8c32-c77b-07d6-1671eb049aba.png "List.png")


ステータスバーからもプロジェクトの移動ができる。
![Save.png](https://qiita-image-store.s3.amazonaws.com/0/16548/e253612f-7379-b850-208b-9c5b38caf5d3.png "Save.png")


## TODOを確認
・TODO Highlight
https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

Sublimeでは[TodoReview](https://packagecontrol.io/packages/TodoReview)。

「TODO」「FIXME」などアノテーションコメントをハイライト & 検索、移動ができる。


![list-annotations.gif](https://qiita-image-store.s3.amazonaws.com/0/16548/9082d8f5-45ca-96dc-e69f-b2090d2bee49.gif "list-annotations.gif")


Macの場合、TODO検索から移動するとエラーが出るので以下の設定をする。

```settings.json
{
    "todohighlight.toggleURI": true
}
```



## git blameを表示
・git-blamer
https://marketplace.visualstudio.com/items?itemName=howardzuo.vscode-git-blamer

Sublimeでは[Git blame](https://packagecontrol.io/packages/Git%20blame)。

git blameをエディタ上で表示。
![blame.gif](https://qiita-image-store.s3.amazonaws.com/0/16548/1d13cf72-8a52-77a3-1b96-6c68eaf0fa17.gif "blame.gif")




## SourceTreeで開く
・Open in SourceTree
https://marketplace.visualstudio.com/items?itemName=morrislaptop.vscode-open-in-sourcetree

Sublimeでは[SourceTree](https://packagecontrol.io/packages/SourceTree)。


開いているプロジェクトディレクトリをSouceTreeで開くことができる。
VSCode標準でGit付いてますが、`git add -p`とか対話式リベースしたい時とかSouceTree楽ですよ。


## ライブリロード
・livereload
https://marketplace.visualstudio.com/items?itemName=zeeshanu.livereload

Sublimeでは[LiveReload](https://packagecontrol.io/packages/LiveReload)。

ご存知ブラウザオートリロード。
今のところ設定がうまく効かないのと、CPUの負荷がすごいので、[LiveReload](http://livereload.com/)を使ってます。


## eCSStractor
・eCSStractor for VSCode
https://marketplace.visualstudio.com/items?itemName=diz.ecsstractor-port

Sublimeでは[eCSStractor](https://packagecontrol.io/packages/eCSStractor)。


htmlをCSSセレクターに展開してくれる神プラグインのVSCode版

![ecsstractor.gif](https://qiita-image-store.s3.amazonaws.com/0/16548/9776621a-6135-4bf4-84b2-24f1834cbd73.gif)


---



## できてないこと

### <del>複数行の検索・置換</del>

[October 2018 (version 1.29)](https://code.visualstudio.com/updates/v1_29)　で実装された！！


### htmlのidとclassをササっと
・Auto-id-class

SublimeではEmmet標準の機能。
htmlタグの中で`.`を押すと`Class=""`に、`#`で`id=""`に変換される。
地味に便利なので欲しい