Sublime Text 3 から Visual Studio Code 1.5 に完全移行した話

  • 10
    Like
  • 1
    Comment

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

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

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

Visual Studio Code (略称 VS Code)

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

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

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

すっごい良いところ

IntelliSense(入力補完)が優秀

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

Git対応超便利

加えて、gitflowGit History のExtensionを入れています。
重いsourcetreeを使う頻度が下がり、慣れないコマンドを叩くこともなく便利。

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

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

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

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

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

日本語対応の細かさよ

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

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

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

Gulpが動かせる……え?!

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

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

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

SJIS死んでない

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

markdownプレビュー対応

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

起動の速さ、軽さ。

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

ちょっとかゆい

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

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

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

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

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

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

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

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

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

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

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

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

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

SublimeのAlwaysHightlightと同等のExtensionがない

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

keybindingで<br>の挿入とかできない?

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

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

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

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

Sublime: Cmd+Shift+PSet Syntax: Html

VS Code: Cmd+Shift+PChange Language ModeHtml

今の設定

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"
  }
]

インストールしたExtension

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

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

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