本記事は、開発エディターに VSCode を採用している方を対象としております
VSCode ワークスペース
VSCode には、ワークスペースという機能がありソースコードで VSCode の設定ファイルを組織またはチームごとに統一することができます。
詳しくはこちらの記事を参考ください。
.code-workspaceファイルをデスクトップに置く利点
- パソコンを起動した際、デスクトップ画面には開発環境すばやくアクセスするためのものが並んでいるため、すぐに仕事に取り掛かることができるため、無駄な時間を省くことができる
- monorepo 開発時、
foldersでプロジェクトを区切ることでファイル検索&アクセスが容易になる - プロジェクトのチームごとに VSCode の設定が共有できる
- 過去のコードを参考にしたいとき、すぐにファイルを開くことができる
手順
-
.code-workspaceファイルを作成し、プロジェクトのトップに置く -
.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 の機能で、組織やプロジェクトに応じて開発環境を統一できます。
ぜひ、使ってみてください ❗
Discussion