Ruby
VSCode

VSCodeでRubyを書く環境を整えた

はじめに

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

インストールしたパッケージ

設定ファイルの内容

user_setting
{
    "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 でコマンドパレットを開いて

command_palette
Shell

と打って、codeコマンドをインストール。

ターミナル内で、

console
$ 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

おわりに

おすすめのパッケージなどがあれば、ぜひコメントを。

参考