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

# はじめに
この記事は2023年度の振り返りです。

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

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

https://zenn.dev/youfuku/articles/a8177d420db979

rubyインストールは以下のコマンド
```
asdf plugin add ruby
asdf install ruby 3.2.2
asdf global ruby 3.2.2
gem update --system
ruby -v
```

# vscodeの設定(お好みで)

```bash:コマンド実行
mkdir .vscode
touch .vscode/extensions.json
touch .vscode/settings.json
```

```bash: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を見やすく
  ]
}
```

```bash: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の設定
プロジェクト直下で色々実行
```sh:コマンド
touch Gemfile
```
```ruby: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"
```
```sh:コマンド
bundle install
```
最後にVScodeを再起動。
起動時にrubyLSPの設定が走るので起動が若干時間かかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632357/235bdabe-7199-8e6c-3cb6-b7d0263df998.png)
rubyファイルを開いた際に、左のアイコンで上記の画像のようにruby LSP がrunningとなってれば正常です。

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