VSCode Extensionをチームで共有する
最近はエディタにVSCodeを使うことが主流になってきた。
複数人で開発する際に、保存時に自動でESLintを実行するように設定していても、人によってはESLintのVSCode ExtensionがインストールされておらずLintが実行されない問題が起きた。
そこで、VScode Extensionをチームで共有する方法について調べた。
.vscode/extensions.json
を追加し、そこにextention idを指定しておくことで、ワークスペースを開いた際に「推奨拡張機能のインストールダイアログ」を表示することができる。
// .vscode/extensions.json
{
"recommendations": [
"editorconfig.editorconfig",
"dbaeumer.vscode-eslint",
"bradlc.vscode-tailwindcss",
"esbenp.prettier-vscode"
]
}
extention idは拡張機能の名前の隣に表示されている。
もしくは歯車アイコンをクリックしてidのコピーができる。
![vscode ext2](http://images.ctfassets.net/83xbj7nb79zu/78zFdP2xdRYkXQz5WlqI3M/8a74f88a7112fa0565c6ef35dfa6cd01/vscode_ext2.png)
.vscode/extensions.json
をリポジトリにコミットし、他の人がVSCodeでワークスペースを開くと↓のダイアログが表示される。
![vscode ext1](http://images.ctfassets.net/83xbj7nb79zu/3wMvGfIdUADnypsF6pOB9t/57a28be127fc23276bb7e00fb63fb0c4/vscode_ext1.png)
また、拡張機能メニューを開き、フィルターアイコンをクリックして「推奨」を選択すると .vscode/extensions.json
に記載した拡張機能が表示される。
![vscode ext3](http://images.ctfassets.net/83xbj7nb79zu/3uEDptAqgFnqiOyZ11exgN/39fd6d83514846fbf5d3fa172ec1d153/vscode_ext3.png)
これで複数人開発が捗る。