railsに合わせ、vscodeの設定の見直し

はじめに

この記事は2023年度の振り返りです。

rails(API)で新規で構築したので、それに合わせてvscodeの設定も変更した備忘録です。

rubyのインストール

zennの記事を元にasdfをインストール

rubyインストールは以下のコマンド

asdf plugin add ruby
asdf install ruby 3.2.2
asdf global ruby 3.2.2
gem update --system
ruby -v

vscodeの設定(お好みで)

コマンド実行

mkdir .vscode
touch .vscode/extensions.json
touch .vscode/settings.json

extensions.json

{
  "recommendations": [
    // ruby関係
    "Shopify.ruby-extensions-pack", // Rubyのサポート
    "misogi.ruby-rubocop", // rubocop
    "rubocop.vscode-rubocop", // rubocopを表示するためだけに利用
    "castwide.solargraph", // コードスニペット（予測変換機能 ）と、メソッドの説明機能
    "TabNine.tabnine-vscode", // AIを活用して、非常に精度の高い予測変換
    "Quoyi.rails-vscode", // erb補完（実験中）
    "esbenp.prettier-vscode", // 保存時にコードを整形
    // 一般
    "kaiwood.endwise", // 自動入力機能
    "shardulm94.trailing-spaces", // コード末尾の余計なスペースが赤字で表示
    "emmanuelbeziat.vscode-great-icons", // iconを変更
    "chihiro718.whitespacepp", // 改行などをsakura editar 風に表示
    "mhutchie.git-graph" // gitを見やすく
  ]
}

settings.json

{
  ////////////////////////////////////////////////////////////////
  // editor設定
  ////////////////////////////////////////////////////////////////
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.renderWhitespace": "all",
  "editor.fontSize": 14,
  "editor.fontFamily": "ＭＳ ゴシック",
  "editor.renderLineHighlight": "all",
  "editor.rulers": [
    40,
    80,
    120
  ],
  "editor.bracketPairColorization.enabled": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "files.encoding": "utf8",
  "terminal.integrated.fontFamily": "MS Gothic",
  "git.autofetch": true,
  "workbench.tree.indent": 15,
  // ruby設定
  "[ruby]": {
    "editor.defaultFormatter": "rubocop.vscode-rubocop", // rubocp
    "editor.formatOnSave": true, // Format files automatically when saving
    "editor.tabSize": 2, // Use 2 spaces for indentation
    "editor.insertSpaces": true, // Use spaces and not tabs for indentantion
    "editor.semanticHighlighting.enabled": true, // Enable semantic highlighting
    "editor.formatOnType": true // Enable formatting while typing
  },
  // (erb)vscode-erb-beautifyの設定
  "[erb]": {
    "editor.defaultFormatter": "aliariff.vscode-erb-beautify",
    "editor.formatOnSave": true
  },
  "files.associations": {
    "*.html.erb": "erb"
  },
}

拡張機能をインストール時に「@recommended 」で探すと「extensions.json」記載分を検索可能で、一括インストール等もできます

rubyLSPの設定

プロジェクト直下で色々実行

コマンド

touch Gemfile

Gemfile

# frozen_string_literal: true

source "https://rubygems.org"

gem "ruby-lsp"
gem "rubocop"
gem "rubocop-packaging"
gem "rubocop-performance"
gem "rubocop-rspec"
gem "rubocop-shopify"
gem "rubocop-thread_safety"
gem "rubocop-rails"
gem "dip"
gem "solargraph"

コマンド

bundle install

最後にVScodeを再起動。
起動時にrubyLSPの設定が走るので起動が若干時間かかります。

rubyファイルを開いた際に、左のアイコンで上記の画像のようにruby LSP がrunningとなってれば正常です。

さいごに

vscodeの設定となります。
いつの間にかrubyのサポートが切れ、ruby LSPなるものが出てたりとかで、rubocopなども正常に動いていないことが多かったので、この機に見直しました。
あと、ここ最近自分のはやりは、自分のvscodeの設定は最小にとどめ、プロジェクト毎にしっかり設定を書くという方針です。
そうすることで、開発メンバー全員が同じオプションや設定に統一されるので、コマンドの説明などがやりやすくなります。
今回の記事の内容は、個人的なものなので皆さん自分用にブラッシュアップしてください