マルチワークスペース下のVSCodeでShopify.ruby-lsp導入

こんにちは！ hacomono スクール開発チームの一員、森山です。今回は小ネタです。

導入

早速ですが、rebornix.Ruby が Deprecated になって長らく経つので、弊プロジェクトにも Shopify.ruby-lsp を導入しました。
しかしながら、バックエンドとフロントエンドが混在するリポジトリで開発していると、上手く動作してくれなかったのです。
調べるとマルチワークスペースになるとのことなので、動作するように設定しましたよという話を書いておきます。

各設定ファイル

まずは前提となるディレクトリ構成ですね。下記が完成形になりました。

リポジトリ/
  ├── .vscode/
    　　　　　　　　├── extensions.json　         推奨拡張の設定ファイル
    　　　　　　　　└──　settings.json            vscodeの設定ファイル
  ├── api/                          バックエンド(弊プロダクトだとRails)
        └── Gemfile
  ├── app/                          フロントエンド
  └── hacomono.code-workspace 　　　　    ワークスペースの設定ファイル
  

詳しく個別にみていきましょう。

1..code-workspaceファイルの作成

• 「hacomono」のプロダクトなので hacomono.code-workspace と名前をつけて作成しています。
  • バックエンド側を個別のワークスペースとして認識させるために、apiディレクトリを個別で”path”に指定して記述しました。

{
    "folders": [
        {
            "path": "."
        },
        {
            "path": "api"
        }
    ]
}

2.VSCodeにRuby-LSPの導入

• .vscode/extensions.json に、ワークスペース内に推奨・非推奨な拡張として下記を記述します。

{
  "recommendations": [
    "Shopify.ruby-lsp"
  ],

  "unwantedRecommendations": [
    "rebornix.Ruby"
  ]
}

• VSCode上で Shopify.ruby-lsp をインストールします。

3.バックエンド側にruby-lspを導入

• api/Gemfile にruby-lspを指定して、開発環境のみ使うように宣言します。

group :development do
  gem 'ruby-lsp'
end

• ターミナル上から bundle install を実行します。

4.settings.jsonの設定

• .vscode/settings.json に バックエンド側のGemfileのパスを指定します。
  • hacomonoではrubocopで書式を揃えているので、ついでにrubyLsp.formatterを指定しています。

{
  "rubyLsp.bundleGemfile": "api/Gemfile",
  "rubyLsp.formatter": "rubocop"
}

以上で設定ファイルの作成・配置は完了です。次は動作確認ですね！

動作確認

1. コマンドパレットを開き「RubyLSP」と入力して、「RubyLSP: Start」を選択します。

2. 「Ruby LSP: indexing files: x%」 と表示されていればOK。

3. Lintを試すことで動作確認するのも良さそうですね。 www.youtube.com

まとめ

以上で、バックエンドとフロントエンドが混在するリポジトリにvscodeのRuby-LSPを導入する準備が整いました。
これにより、VSCode+Rubyな開発環境が最適化され、より効率的な開発が可能になると思います。是非お試しください！

---

株式会社hacomonoでは一緒に働く仲間を募集しています。
採用情報や採用ウィッシュリストもぜひご覧ください！