VSCode の開発体験をローカル, DevContainer で共有する
やりたいこと
普段使いのターミナルが使えなくて少し辛かったりする。
そんなときに気軽にローカルに逃げられるようにしておきたい。
結論
VSCode の設定を .devcontainer/devcontainer.json の "customizations" に書かずに、
.vscode/{settings,extensions,launch}.json に書くようにする。
チーム開発では .vscode/ を .gitignore せずにプロジェクトで共有する、ということになる。
(Linter, Formatter の拡張機能やその設定は開発体験に影響するのでプロジェクト内で共有してもよいという思想。)
想定する設定
以下のようにDevContainer の設定ファイルに拡張機能や設定を書き込んでいるとします。
code: .devcontainer/.devcontainer.json
{
"name": "Node.js & TypeScript",
"image": "mcr.microsoft.com/devcontainers/typescript-node:0-18",
"customizations": {
"vscode": {
"extensions": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"streetsidesoftware.code-spell-checker"
],
"settings": {
"editor.tabSize": 2,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"files.insertFinalNewline": true,
}
}
}
}
修正後の設定
code: .devcontianer/devcontainer.json
{
"name": "Node.js & TypeScript",
"image": "mcr.microsoft.com/devcontainers/typescript-node:0-18",
}
code:.vscode/settings.json
{
"editor.tabSize": 2,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"files.insertFinalNewline": true,
}
code:.vscode/extensions.json
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"streetsidesoftware.code-spell-checker"
],
"unwantedRecommendations": []
}
この場合、拡張機能のインストールは右下のポップアップに従って行うことになります。
このポップアップはローカル, DevContainer の両方で動作するので、体験を共有できるというわけです。
あと、devcontainer.json 内の VSCode の設定はコンテナを再度開くまで反映されないですが、
settings.json だと即時反映されるというメリットもあります。
あとがき
DevContainer は Git の SSH キーを持ち込んでくれなかったり, Rootless docker だとパーミッションの都合で書き込みができかったりとつまづきポイントが多いので、気持ちに余裕があるときに導入したほうがいい。
拡張機能のインストールスクリプトを共有するのも面白そう。(ほんとか？)