【VSCode】code-workspaceファイルのエイリアスをデスクトップに置くと開発速度が上がった

.code-workspaceの書き方

基本の書き方

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

foldersには、プロジェクトのトップの相対パスを設定します。
monorepo開発している際foldersの設定はかなりの効果を発揮しますが、単一プロジェクトの場合は一つのことが多いです。

settingsには、VSCodeの環境設定を設定できます。
例えばeslintを保存と同時に実行したい場合は、以下のように記載すれば他のチームメンバーにも同じ設定ファイルが共有されます。

{
  "folders": [
    {
      "path": "."
    },
  ],
  "settings": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  }
}

monorepo開発

{
  "folders": [
    {
      "path": "."
    },
    {
      "name": "client",
      "path": "./pacakges/nextjs"
    },
    {
      "name": "server",
      "path": "./packages/nestjs"
    },
  ],
  "settings": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  }
}

monorepo開発時は、packagesディレクトリで区切ることが多いと思います。
今回の例は、clientとserverの2つのプロジェクトをmonorepoで開発しているときの設定方法です。

このように設定することで、VSCodeのファイル検索機能（cmd + p）でpackage.jsonファイルにアクセスしたいとき、package clientと入力しEnterキーを押せば、clientのpackage.jsonに容易にアクセスできます。serverの場合、package serverと入力します。

ファイルへのアクセス速度が上がれば必然的に開発速度もあがります！

参考

こちらが執筆時の著者のデスクトップ画面です。

執筆時の著者は、LINE関係のアプリまたはサービスしか開発していないため、直近で開発したLINE関係のVSCodeファイルのみをデスクトップにおいています。

⚠作ったものすべてを置いてしまうと、探すのが大変で、過去の汚いコードにアクセスすることがあるため、厳選してデスクトップに置きましょう。（10~20ファイルまでがちょうどいいと思います）

まとめ

このように、.code-workspaceファイルをデスクトップに置くことで、直近のプロジェクトと過去のコードへのアクセス速度が上がるため、開発速度を向上させることができます。
また、ワークスペースはチーム開発でも強力なVSCodeの機能で、組織やプロジェクトに応じて開発環境を統一できます。

ぜひ、使ってみてください❗