Sublime Text 3 から Visual Studio Code に完全移行して約2年経った話

＜追記：2018年7月11日 内容をアップデートしました＞

Windowsで使っていた頃は特に不満が無かった Sublime Text。
ATOMが流行しはじめた頃もちょっと試してすぐSublimeに戻ったほど気に入っていました。

ただ、メインをMacにしてからは、IME（ATOK）との相性がいまいち。

そんななか、後輩からSJIS使えるいいエディタ無いですかと聞かれて、
自分もSublimeで（少し不安定な）プラグインを使ったり
SJIS案件はわざわざDreamweaverを開いたりしていたので、
いいかげん全部モダンなエディタで作業したいぞと、探した結果知ったのが、

**Visual Studio Code** (略称 VS Code)

Microsoft謹製。Electronで構築されています。

使い始めたのは1.4から、いまは1.5.3になっています。
まだ少し、かゆいところに手が届かないですが、
どんどんバージョンアップされるスピード感に期待が膨らみます！

古いバージョンで離れた人も、もう一度試してみては。

#### （追記）
そして2018年7月のいま、1.25までアップデートされました！
もはや当時との差分がわからないほど機能が追加され、
そして洗練されたエディタになりました。

## すっごい良いところ

### IntelliSense（入力補完）が優秀

マークアップしているときも便利なんですが、
テキストを扱っている時も、スペース等で区切られたかたまりをサジェストしてくれて便利。

#### （追記）
コードを書いているともはやこの機能がないとやってられません。
これだけでもう VSCode を使う理由としては十分です。

### Git対応超便利

加えて、[gitflow](https://marketplace.visualstudio.com/items?itemName=vector-of-bool.gitflow) と [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) のExtensionを入れてます。
重いSourceTreeを使う頻度が下がり、慣れないコマンドを叩くこともなく便利。

#### （追記）
その後、SourceTreeはほぼ使わなくなりました。  
VSCode の機能を使うほか、
常に出しているターミナルでコマンドを叩くことも多いです。

左下に常にブランチ名が出ているのも安心。

また、サブモジュールに対応したので、
別途フォルダを別に開かなくてもGit操作できて便利です。

### サイドバーの使い勝手がとてもいい

コマンドパレットだけじゃ扱いづらかったり、
かといってエディタ領域を使うのも大きすぎたり、
そういうのがサイドバーに揃っています。便利。

#### （追記）
Docker の Container が見えるようになったり、
npm scripts が一覧できたり、
1つのワークスペースに複数のフォルダを追加できたりと、
色々と便利になっています。

### IMEとの親和性は非常に高い

SublimeはIMEに対するキーバインドが全てエディタにとられていたので、
予測変換とかほぼ使えなくて不便でした。

VS Code を導入した時のが丁度IMEをサポートしたバージョンだったんですね。
運命を感じます。

### 日本語対応の細かさよ

さすが作っているのがグローバル企業というところ。
メニューから設定ファイルに至るまで日本語になっていて感動しました。
（一部設定やもちろんExtensionの設定は英語のままの事もあります）
コマンドパレットは日本語化されつつも英語が併記されているので、
日本語がわかりやすい部分と英語が使いやすい部分をシームレスで使い分けられて便利。

### ターミナルが内蔵されてるだと……

```npm install```できます。```open .```したってかまいません。

#### （追記）
ターミナルは常に出した状態で使っています。
また、ターミナルを複数分割できるので、
左ペインでログ流しながら右で操作するなんてのも楽々です。

### Gulpが動かせる……え？！

ターミナルで使えるじゃん、と思っていたらそんなんじゃない。

```Cmd+Shift+p```で```task watch```を叩くと、
フォルダ直下にある```gulpfile.js```を見て、```gulp watch```を動かしてくれます。
ここまでやるか。

このTask機能、本来はもっとやばい機能ですがまだ試せてないので割愛。

#### （追記）
ターミナルがあればなんでもできるのでこれは使わなくなりました。
サイドメニューに npm script の一覧が出るようになったので、
このリポジトリで使えるコマンドは何だろうって見る事ができます。

### SJIS死んでない

一旦開いたあと切り替える必要があるのはATOMと同じ。
SJIS案件がなくなってくれるのが一番なんですけどね！

#### （追記）
エンコードの自動切り替え機能が実装されました。
いまは改善されているかもしれませんが、
期待しない変換がかかることが多かったので自動切り替えは使っていません。

### markdownプレビュー対応

mdエディタとしてATOMを使おうかと考えていたので、
思わぬ収穫でした。なんでもできるな。

#### （追記）
最近はExtention `markdown-pdf` でPDFにしたものを、
共有資料とすることもあります。

### 起動の速さ、軽さ。

ATOMで残念だったのが起動の遅さ。
VS Code は機能てんこ盛りなのにストレスなく起動してくれます。

#### （追記）

さすがに以前より重くなっていますが、まだ軽いです。

## ちょっとかゆい

### ~~1ウィンドウで複数フォルダを開けない~~


~~Sublimeでは1プロジェクトに複数フォルダを登録できるので、~~
~~動いてる案件をまとめて放り込んで並行作業できたのですが、~~
~~VS Code は1つのウィンドウで1つのフォルダ以下しか開けません。~~

~~ただフォルダ単位で、開いているファイルを覚えているので、~~
~~使っていないウィンドウを開いたままでも閉じても自由。~~
~~ストレスなく切り替えられるので、特に困りませんでした。~~

#### （追記）
実装されました。
自分は1フォルダ1ウィンドウで使うようになりましたが、
Sublime を使ってる人に勧めやすいです。

### ステータスバーに選択行数が表示されない

ジャッと選択していま何行選択しているか見たいときがあるんです。
ないですか！？

#### （追記）
tomoki1207 さんありがとうございます！
Extention [Select Line Status Bar](https://marketplace.visualstudio.com/items?itemName=tomoki1207.selectline-statusbar) で対応できます


### ~~改行を含む複数選択ができない~~

~~Sublimeだと、改行を選択して```Cmd+D```ができるところ、~~
~~改行が含まれると、複数選択ができなくなります。~~

#### （追記）
改善されました。複数行でも複数選択ができます。
改行を含めると先頭や末尾にあるものだけを選択するなど工夫できます。
ストレスなく操作できるようになりました。

### 改行を含む検索や置換ができない

改行を含んだ検索はできません。

### ~~日本語を含む行の折り返しがちょっと怪しい~~

~~日本語対応ほんと素晴らしいんですが、インデントを含んだり、~~
~~sjisへの切り替えを挟んだときに、行の折り返しが怪しかったりします。~~

#### （追記）
sjisファイルは最近扱っていませんが、
それ以外で違和感はなくなっています。

### SublimeのSFTPプラグインと同等のExtensionがない

テストサーバーへはエディタから直接FTP繋げると便利なのですが、
いまのところ良いExtensionはありません。

#### （追記）
エディタ関係ないですが git-ftp を使うようになりました。
ターミナルを常に出していてすぐ操作できるのでストレスありません。


### ~~SublimeのAlwaysHightlightと同等のExtensionがない~~

[https://github.com/guimihanui/AlwaysHighlight](https://github.com/guimihanui/AlwaysHighlight)
長い原稿にひとつだけ全角の数字がまざってたりするのを見つけたりします。

#### （追記）
Hightlight という extention が使えます。
https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-highlight

原稿の中に入っててほしくない全角数字とスペースをハイライトしています。

```
"highlight.regexes": {
  "(　)": [
    {
      "backgroundColor": "#d9ad00"
    }
  ],
  "([１２３４５６７８９０])": [
    {
      "backgroundColor": "#d90000",
      "color": "#1f1f1f"
    }
  ]
}
```

### keybindingで```<br>```の挿入とかできない？

Sublimeでは以下の設定を使っていました。

```{ "keys": ["shift+super+enter"], "command": "insert", "args": {"characters": "<br>" } }```

VS Code での設定方法はないのか分からないです。

#### （追記）
特に困ってないので追跡調査していません。
他のシーンでは補完が充実しているので困る事も少ないです。

### 言語モードの切り替えが一手間多い

Sublime: ```Cmd+Shift+P``` → ```Set Syntax: Html```

VS Code: ```Cmd+Shift+P``` → ```Change Language Mode``` → ```Html```


## 今の設定（初稿）

```settings.json
{
  "editor.tabSize": 2,
  "editor.mouseWheelZoom": true,
  "editor.renderWhitespace": true,
  "editor.scrollBeyondLastLine": false,
  "editor.wrappingColumn": 0,
  "editor.renderIndentGuides": true,
  "files.exclude": {
    "**/.sass-cache": true,
    "**/node_modules": true
  }
}
```

```keybindings.json
[
  {
    "key": "ctrl+h",
    "command": "editor.emmet.action.wrapWithAbbreviation"
  }
]
```

## 今の設定（2018年追記）

```settings.json
{
  "editor.dragAndDrop": true,
  "editor.tabSize": 2,
  "editor.minimap.enabled": true,
  "editor.minimap.renderCharacters": false,
  "editor.renderWhitespace": "boundary",
  "editor.scrollBeyondLastLine": false,
  "editor.renderIndentGuides": true,
  "editor.wordWrap": "on",
  "editor.wrappingIndent": "indent",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "vue-html",
  ],
  "emmet.triggerExpansionOnTab": false,
  "emmet.includeLanguages": {"ejs": "html", "vue-html": "html", "javascript": "javascriptreact"},
  "files.exclude": {
    "**/.sass-cache": true,
    "**/node_modules": true
  },
  "keyboard.dispatch": "keyCode",
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": false
  },
  "caniuse.show_all": true,
  "window.zoomLevel": -1,
  "git.autofetch": true,
  "git.confirmSync": false,
  "workbench.editor.showTabs": true,
  "workbench.iconTheme": "seti",
  "window.nativeTabs": true,
  "workbench.startupEditor": "newUntitledFile",
  "python.disablePromptForFeatures": [
    "pylint"
  ],
  "git.enableSmartCommit": true,
  "diffEditor.ignoreTrimWhitespace": true,
  "npm.enableScriptExplorer": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "highlight.regexes": {
    "(　)": [
      {
        "backgroundColor": "#d9ad00",
        "color": "#1f1f1f"
      }
    ],
    "([１２３４５６７８９０])": [
      {
        "backgroundColor": "#d90000",
        "color": "#1f1f1f"
      }
    ]
  }
}
```

```keybindings.json
[
  {
    "key": "ctrl+h",
    "command": "editor.emmet.action.wrapWithAbbreviation"
  },
  {
    "key": "ctrl+l",
    "command": "editor.emmet.action.wrapIndividualLinesWithAbbreviation"
  },
  {
    "key": "cmd+e",
    "command": "editor.emmet.action.expandAbbreviation"
  }
]
```


## インストールしたExtension

* [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
* [vscode-caniuse](https://marketplace.visualstudio.com/items?itemName=agauniyal.vscode-caniuse)
* [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
* [gitflow](https://marketplace.visualstudio.com/items?itemName=vector-of-bool.gitflow) 

### （追記：抜粋）

* [Add jsdoc comments](https://marketplace.visualstudio.com/items?itemName=stevencl.adddoccomments)
* [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug)
* [Highlight](https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-highlight)
* [Image preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)
* [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
* [Select Line Status Bar](https://marketplace.visualstudio.com/items?itemName=tomoki1207.selectline-statusbar) tomoki1207 さんありがとうございます！
* [seti-icons](https://marketplace.visualstudio.com/items?itemName=qinjia.seti-icons)
* [vscode-caniuse](https://marketplace.visualstudio.com/items?itemName=agauniyal.vscode-caniuse)
* [vscode-pdf](https://marketplace.visualstudio.com/items?itemName=tomoki1207.pdf)

## おおよそ Sublime Text からの移行に違和感なし

気になるのは細かいところ、だいたいは問題ないか良くなってます。

細かい使い勝手は自分でExtensionを作っちゃえばいいんでしょうか！？
まだ少ないのでExtensionを作るチャンスではあります。

### （追記）
数年経ってかなり成熟したエディタになりました。
もう乗り換えるのに迷う必要はないですね！