VSCodeのワークスペース機能でエディタ設定をシェアしよう

こんにちは、GMOメイクショップコアグループフロントエンドエンジニアの原田です。本記事では普段からよく利用しているVSCodeのワークスペース機能についてご紹介します。

はじめに
ワークスペース機能でできること
- 様々な設定をまとめて1ファイルでシェアできる
- 複数のフォルダやリポジトリをまとめて登録できる
ワークスペースの作成方法
ワークスペースで共有できる設定例
まとめ
参考

はじめに

現プロジェクトのフロントエンド開発には主に Visual Studio Code（VSCode）を利用しています。開発するコードの可読性や保守性を高めるため、各種Linter/FormatterやVSCode用の拡張機能を活用しています。それらの数ある設定を1つずつドキュメント等に書いて、都度メンバーに共有するのはメンテナンスが大変で、時間も消費します。環境構築は開発において最大の難関と言われることもあり、再現性高くすばやく環境を構築、共有できる方法が重要です。そんなとき便利なのが、VSCodeのワークスペース機能です。

ワークスペース機能でできること

様々な設定をまとめて1ファイルでシェアできる

利用する拡張機能、タスクランナー、linterなどの設定を .code-workspace ファイルとして1ファイルにまとめて管理できます。通常、VSCodeのユーザー設定は .vscodeフォルダ内にバラバラに保存されています。それらをそのままリポジトリにコミットすることでも他の開発者と設定をシェアすることができますが、その場合、各環境のユーザー設定が衝突することになるため、個別のエディタカスタマイズが不可能になってしまいます。代わりに、.code-workspaceファイルに共通設定を書き、それを各開発者が開くようにすると、個別のユーザー設定と共通のワークスペース設定の設定を併用し、カスタマイズ性を保持しつつ必須の設定をシェアすることが可能になります。

複数のフォルダやリポジトリをまとめて登録できる

ワークスペース内のフォルダ一覧にフォルダをドロップすると、リポジトリ内の個別のフォルダ、または異なるリポジトリのフォルダをまとめてワークスペースフォルダとして登録することができます。フロントエンドとバックエンドで設定ファイルを分けたい場合、フォルダが多く普段作業するフォルダだけを登録したい場合、リポジトリが複数に分かれているプロジェクトの場合等にとても助かる機能です。

ワークスペースの作成方法

ワークスペースの作成は非常にシンプルです。

1 ワークスペース化したいフォルダを開く
2 ファイル -> 名前を付けてワークスペースを保存... でリポジトリのどこかに.code-workspaceファイルとして保存
3 保存した.code-workspaceファイルを編集またはコマンドパレットの基本設定:ワークスペース設定を開く (Preferences: Open workspace settings) からカスタマイズ
4 リポジトリにCommitしてPush

以降開発時、リポジトリ内の .code-workspaceファイルを開くとワークスペース設定を反映させつつ開発することができます。

ワークスペースで共有できる設定例

Linter / Formatter設定

まずはLinterやFormatterの設定を共有したくなるかと思います。このような一般的な設定は、基本設定:ワークスペース設定を開く (Preferences: Open workspace settings) または、ワークスペースファイル内のsettingsセクションに直接記入して設定することができます。例として、下記設定では保存時にPrettierのフォーマットとESLintの実行を強制させています。この設定を共有していると、ESLintのエラーがあれば、どの環境でもエディタ内で警告が表示されるようになり、コードスタイルの統一がとてもしやすくなります。

{
    "settings": {
      "editor.tabSize": 2,
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true,
      "files.eol": "\n",
      "editor.codeActionsOnSave": {
        "source.fixAll": "never",
        "source.fixAll.volar": "never",
        "source.fixAll.esLint": "explicit",
        "source.organizeImports": "explicit"
      },
      "eslint.validate": ["vue", "javascript", "typescript"],
      "editor.insertSpaces": true,
    }
}

推奨拡張機能

Linter設定を共有する際、そのLinterをサポートする拡張機能も同時にセットで共有したくなるかと思います。その場合は、拡張機能セクションを開き、右下の拡張機能設定 -> ワークスペースの推奨事項に追加する か、ワークスペースファイル内のextensionsセクションに直接記入するとワークスペース推奨の拡張機能を設定することができます。例として、現プロジェクトでは下記のような拡張機能を推奨としています。この設定を共有していると、ワークスペースを開いた際に推奨として通知されるようになり、便利な拡張機能の共有がしやすくなります。

{
  "extensions": {
    "recommendations": [
      "vue.volar",
      "dbaeumer.vscode-eslint",
      "esbenp.prettier-vscode",
      "streetsidesoftware.code-spell-checker",
      "pkief.material-icon-theme",
      "oderwat.indent-rainbow",
      "shardulm94.trailing-spaces",
      "ibm.output-colorizer",
      "ms-playwright.playwright",
    ]
  }
}

スペル辞書 (Code Spell Checker)

プロジェクトで採用している場合は、コード内のスペルチェックをしてくれるCode Spell Checkerなどの拡張機能の設定もワークスペース設定、settingsセクションに記入することができます。CodeSpellCheckerでは、通常の辞書に載っていない英単語(Vuetify)などの単語辞書をワークスペース設定として共有することができます。

{
  "settings": {
    "cSpell.words": [
      "pinia",
      "vuetify",
      "makeshop"
    ]
  }
}

タスクランナー設定

タスクランナーとは、様々なコマンドを簡単に実行できる実行タスクを定義するためのものです。これはワークスペースファイル内のtasksセクションに直接記入すると設定することができます。例として下記設定ではフロントエンドの各種ツールの実行や、フロントエンドの実行で前提として必要となるローカルバックエンドの起動コマンドをタスク化しています。この設定を共有していると、コマンドパレット等から簡単に各タスクを実行でき、コマンドを手打ちする手間が省けるようになります。

{
  "tasks": {
    "version": "2.0.0",
    "tasks": [
      {
        "type": "npm",
        "label": "frontend: start dev server",
        "detail": "フロントエンドのDevサーバーを起動します。",
        "script": "serve"
      },
      {
        "type": "npm",
        "label": "frontend: install",
        "detail": "yarn.lockを元に開発環境に必要な全ての依存関係をインストールします。",
        "script": "install"
      },
      {
        "type": "npm",
        "label": "test: playwright",
        "detail": "playwrightを用いたE2Eテストを実行します。",
        "script": "pw:test"
      },
      {
        "type": "npm",
        "label": "test: vitest",
        "detail": "vitestを用いたユニットテストを実行します。",
        "script": "test:unit"
      },
      {
        "type": "shell",
        "label": "backend: start dev server",
        "detail": "バックエンドサーバーコンテナを起動します。",
        "command": "cd ../backend/src/docker; docker-compose up -d"
      }
    ]
  },
}