はじめに
Visual Studio Code Advent Calendar 2017 - Qiita の21日目の記事。
記事内に出てくるコマンドなどはmacOSが対象。
VSCodeとは
Visual Studio Code - Code Editing. Redefined
マイクロソフト製のフリーのオープンソースエディタ。マルチプラットフォームで展開されている。
乗り換えた理由
最近までテキストエディタはAtomを使っていた。コードを書いている時にlinter周りでもっさりしてるなーと感じていた。使っているパッケージの問題もあるかもしれないが、起動時の速度など、他にも時間がかかっていると感じた部分があった。そこで、動作速度が速いという噂を聞いて、VSCodeに乗り換えてみた。
実際にベンチマークを取られてる方もいた。下記記事参照。
Atom vs Visual Studio Code 速度比較!! Electron系テキストエディタ2大決戦!!
実際どうだったか
どちらもElectron製のエディタなので、そこまで速度に差はないと思っていたが、実際に使ってみて、結構速度差を感じた。複数プロジェクトを開いていても、軽快さがある。快適になった。
あと、Atomでよくやった「Chromeにフォーカスが当たっていると思って Cmd + Alt + I を押してデベロッパーツールが開かれて絶望を味わう」ことがなくなった。キーバインドをジャックせずとも、VSCodeではデベロッパーツールは開かれない。
乗り換えるためにやったこと
VSCodeのインストールはここから。
VSCodeのパッケージも結構揃ってきているので、Atomで使っていたパッケージは、大体VSCodeの方にもある。以降でVSCodeに乗り換えた時にやった作業を示す。
Rubyをメインで書いているので、一般的なエディタの設定からRubyを書く環境を整えたところまで記述する。
設定のTL;DR
インストールしたパッケージ
- Advanced New File - Visual Studio Marketplace
- Color Highlight - Visual Studio Marketplace
- file-icons - Visual Studio Marketplace
- One Dark Pro - Visual Studio Marketplace
- Ruby - Visual Studio Marketplace
- Sass - Visual Studio Marketplace
- Slim - Visual Studio Marketplace
- Sort lines - Visual Studio Marketplace
設定ファイルの内容
{
"workbench.startupEditor": "welcomePage",
"workbench.iconTheme": "file-icons",
"workbench.colorTheme": "One Dark Pro",
"editor.rulers": [80],
"editor.fontSize": 13,
"editor.fontFamily": "Ricty Diminished",
"editor.tabSize": 2,
"editor.renderWhitespace": "boundary",
"files.insertFinalNewline": true,
"ruby.lint": { "rubocop": true },
"explorer.confirmDragAndDrop": false,
"extensions.ignoreRecommendations": true,
"window.zoomLevel": 0
}
カラーテーマの変更
Atomのカラーテーマが気に入っていたので、下記テーマを入れた。 Code > 基本設定 > 配色テーマ から設定できる。選択すると設定ファイルに設定が加えられる。
One Dark Pro - Visual Studio Marketplace
Qiitaのカラーテーマもある。
Qiita - Visual Studio Marketplace
アイコンテーマの変更
デフォルトはSetiというテーマが入っている。Rubyのアイコンが毒々しくて、エラーが出ているように見えるので、変更したくなった。Code > 基本設定 > ファイル アイコンのテーマ から設定できる。選択すると設定ファイルに設定が加えられる。
seti-icons - Visual Studio Marketplace
vscode-icons
多分、一番人気のアイコンテーマだが、少しうるさく感じた。
vscode-icons - Visual Studio Marketplace
file-icons
Atomで使っていたので、結局これに落ち着いた。
file-icons - Visual Studio Marketplace
設定の変更
Font系とタブスペースとスペース表示を設定。
"editor.fontSize": 13,
"editor.fontFamily": "Ricty Diminished",
"editor.tabSize": 2,
"editor.renderWhitespace": "boundary",
各ファイルのシンタックスハイライト
下記をインストール。
rubocopでlintしたい
下記をインストール。
Ruby - Visual Studio Marketplace
ユーザ設定に下記を追加。
"ruby.lint": { "rubocop": true },
Cmd + Shft + M で問題ウィンドウの表示非表示を切り替えられる。この問題ウィンドウ内でrubocopの結果を確認できる。
ターミナルからVSCodeを開きたい
VSCode内で、 Cmd + Shift + P でコマンドパレットを開いて
Shell
と打って、codeコマンドをインストール。
ターミナル内で、
$ code .
と打つとアプリケーションカレントディレクトリを開いてくれるようになる。
ガイドを表示したい
下記の設定を追加。下記は80文字目にガイドを入れる例。
"editor.rulers": [80],
ファイルの最後に改行を加えたい
下記の設定を追加。
"files.insertFinalNewline": true,
エクスプローラー内で新規ファイル作成をしたい
下記をインストール。
Advanced New File - Visual Studio Marketplace
Cmd + Alt + N でパスとファイル名を入力できて、ファイルを追加できるようになる。
エクスプローラー内でフォーカスが当たっているファイルのパスがデフォルトで入っている。
選択行をソートしたい
下記をインストール。
Sort lines - Visual Studio Marketplace
デフォルトの設定だと、 F9 を押すとソートされる。
16進数のカラーコードを色で表示したい
下記をインストール。
Color Highlight - Visual Studio Marketplace
よく使うショートカット
基本的にはAtomと同じ。
- ファイルの移動:
Cmd + P - 検索:
Cmd + F - 置換:
Cmd + Alt + F - ファイル内検索:
Cmd + Shift + F - 複数のファイルで置換:
Cmd + Shift + H - エクスプローラーを開く:
Cmd + Shift + E - コマンドパレットを開く:
Cmd + Shift + P - 問題を開く:
Cmd + Shft + M - ターミナルを開く:
Ctrl + ` - 拡張機能を開く:
Cmd + Shift + X
おわりに
おすすめのパッケージなどがあれば、ぜひコメントを。