RubyをVSCodeで快適に書く設定メモ

2019.03.23

RubyをVSCodeを利用して快適に書くために色々設定した、その記録です。

Rubyインストール

  1. 公式サイト（https://rubyinstaller.org/downloads/）からインストーラーをダウンロード。
    ※WITH DEVKIT版をダウンロード。
    ※DEVKITはC言語で記述された拡張ライブラリをインストールするときに必要となるものです。
  2. インストーラーを起動。コマンドプロンプトが起動したら、MSYS2をインストールするか聞かれるので、「1」, 「2」, 「3」と入力して初期化・更新する。

新しいバージョンのRubyを入れたい場合は、インストーラーを再度ダウンロードしてインストールすればいいらしいです。

VSCodeのインストールとプラグイン導入

VSCodeのインストール

公式サイト（https://code.visualstudio.com/）よりインストーラーをダウンロードして、インストール。

VSCodeのプラグイン導入

VSCodeのプラグインの導入方法は「拡張機能」から「検索」と進み、導入したいプラグイン名を検索してインストールする。

  • Ruby
    VSCodeでRuby書くなら、皆まず入れてるプラグイン。
  • Code Runner
    VSCode上でサクッとRubyを実行できるプラグイン。”Ctrl + Alt + n”で実行可能。
  • Git History
    gitの変更履歴が確認できる。
  • change-case
    キャメルケース、スネークケースなどに変更可能。”ctrl + shift + p”から変更できる。

gem導入とVSCodeのsetting.json, keybinding.json追記

gemをインストールし、VSCodeのsetting.json, keybinding.jsonに設定を追記することで、いろいろ便利な機能を発揮します。

コードジャンプ

メソッドやクラスの定義元にジャンプするやつです。

setting.jsonに以下を追記しましょう。

1
"ruby.intellisense": "rubyLocate",

入力補完

メソッド名などの入力補完です。

  1. 以下コマンドで必要なgemをインストール。
    1
    2
    gem install solargraph
    gem install rubocop

    ※rubocopはsolargraphを動かすために必要。solargraphが動くかどうかは、”solargraph help”などで確認しましょう。
  2. VSCodeのプラグイン”Ruby Solargraph”をインストール。
  3. setting.jsonに以下追記。
    1
    "solargraph.commandPath": "C:\\Ruby26-x64\\bin\\solargraph.bat",

    ※パスは各環境で異なるので確認しましょう。
  4. 入力補完ききます(^o^)／

デバッグ

VSCode上でステップ実行したりする方法です。

  1. 以下コマンドで必要なgemをインストール。
    1
    2
    gem install ruby-debug-ide
    gem install debase
  2. VSCodeのデバッグアイコンから、「Add Configration」でlaunch.json作成。
  3. ブレークポイントしかけてデバッグ実行。

Emmet補完

拡張子”hoge.html.erb”を扱うときに便利な設定です。EmmetはHTMLやCSSを扱う際の入力補完で、すごい便利みたいです。

setting.jsonに以下を追記しましょう。

1
2
3
4
5
6
    "files.associations": {
        "*.erb": "erb"
    },
    "emmet.includeLanguages": {
        "erb": "html"
    },

タブサイズ設定

setting.jsonに以下記述。

1
2
"editor.tabSize": 2,
"editor.renderWhitespace":true, // スペースの表示

ターミナル設定

デフォルトのターミナルをgit bashに設定します。

setting.jsonに以下記述。

1
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",

キーボードショート設定

1
2
3
// ターミナルの切り替えのショートカット
{ "key": "ctrl+shift+k", "command": "workbench.action.terminal.focusNext", "when": "terminalFocus" },
{ "key": "ctrl+shift+j", "command": "workbench.action.terminal.focusPrevious", "when": "terminalFocus" },

 

以上です。多分どんどん追記します。

コメント