VSCodeでRuby On Railsを快適に書きたい

13604 ワード
RSpec Rails RuboCop VSCode Ruby Ruby テキストリンク

VSCodeでRuby On Railsを快適に書くために行っている設定。1
現在いろいろ模索中なので、アドバイスあればコメント下さい〜

Ruby/Rails専用の拡張機能

Ruby

強力。必須。
ドキュメントに従って各種gemを入れれば一通りそろう！!

endwise

自動でendを挿入してくれる

ruby-rubocop

ファイル保存のタイミングでrubocopを自動で走らせることができる

Rails Go to Spec

Cmd + Shift + Y で spec ファイルと行き来できてかなり便利！

Rails Run Specs

開いているspecファイルや直近のテストをパッと実行できる。
直近のを即再実行できるの大事。

【注意】
Spec実行のコマンドが、VSCodeの標準コマンド「直近の閉じたタブを開き直す」(Command + Shift + T)と被っているのが致命的。

settings.json
{
    "command": "extension.runFileSpecs",
    "title": "Run File Specs",
    "key": "cmd+shift+t"   <= ここを「cmd+shift+t」以外の非標準の好きなコマンドに変える！
}

Slim

Slimファイルを使っているので。ERBの人はそっちを。

ruby-symbols

シンボルの自動補完をしてくれる。任意かな。

Rails

Rails用のスニペットやナビゲーションなどを提供してくれる。任意かな。

Ruby専用の設定

Rubyのみに適応するためには、以下の {}内に設定項目を追加すればOKです。

"[ruby]": {
},

タブのサイズ

"editor.tabSize": 2

その他

今のところ、タブサイズ以外はデフォルトのままです。
設定ファイルの検索で「ruby」と打つと、↓のようにたくさんあります。


   // Filepath to the configuration file for Rubocop
  "ruby.rubocop.configFilePath": "",

  // execution path of rubocop.
  "ruby.rubocop.executePath": "",

  // execute rubocop on save.
  "ruby.rubocop.onSave": true,

  // Defines if it should clear the terminal on each spec run
  "ruby.specClearTerminal": true,

  // Defines a custom command to run for specs (i.e. 'spring rspec')
  "ruby.specCommand": "",

  // Defines if it should focus on terminal on each spec run
  "ruby.specFocusTerminal": true,

  // Defines the type of tool used for testing
  "ruby.specGem": "rspec",

  // Defines the pattern for seaching test files
  "ruby.specPattern": "spec",

  // Auto Save file before running spec test
  "ruby.specSaveFile": false,

  // Zeus gem needs a certain time to start. Defined in ms
  "ruby.zeusStartTimeout": 2000,

  // Method to use for code completion. Use `false` to disable or if another extension provides this feature.
  "ruby.codeCompletion": false,

  // Which system to use for formatting. Use `false` to disable or if another extension provides this feature.
  "ruby.format": false,

  // Method to use for intellisense (go to definition, etc.). Use `false` to disable or if another extension provides this feature.
  "ruby.intellisense": false,

  // Path to the Ruby interpreter.  Set this to an absolute path to select from multiple installed Ruby versions.
  "ruby.interpreter.commandPath": "ruby",

  // Set individual ruby linters to use
  "ruby.lint": {},

  // Time (ms) to wait after keypress before running enabled linters. Ensures linters are only run when typing has finished and not for every keypress
  "ruby.lintDebounceTime": 500,

  // Defines where the Ruby extension will look to find Modules, Classes and methods.
  "ruby.locate": {
    "exclude": "{**/@(test|spec|tmp|.*),**/@(test|spec|tmp|.*)/**,**/*_spec.rb}",
    "include": "**/*.rb"
  },

  // Path to the bundler executable (used if useBundler is true)
  "ruby.pathToBundler": "bundle",

  // Path to the rct-complete command.  Set this to an absolute path to select from multiple installed Ruby versions.
  "ruby.rctComplete.commandPath": "rct-complete",

  // Whether ruby tools should be started using Bundler
  "ruby.useBundler": false

Rails のデバッグ

1) サイドバーのデバッグボタン(虫のやつ)をクリックし、以下の構成を追加。

vscode/launch.json
{
    "name": "rdebug-ide",
    "type": "Ruby",
    "request": "attach",
    "cwd": "${workspaceRoot}",
    "remoteHost": "127.0.0.1",
    "remotePort": "3000",
    "remoteWorkspaceRoot": "${workspaceRoot}"
}

2) Gemfile に gem を追加

Gemfile
gem 'ruby-debug-ide'
gem 'debase'

ちなみに、Gemfile を git 管理していると安易にこういう追加はしたくないはず。
そういう時は、環境変数を使ってうまいことやるのがオススメです。
-> 参考: Gemfileにないgemを使いたい

3) Rails を立ち上げる

$ bundle exec rdebug-ide --host 127.0.0.1 --port 3000 --dispatcher-port 26162 -- bin/rails s -p 3000

  1. 汎用的なオススメの拡張機能はこちらを参照して下さい ↩