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

.vscode/extensions.json をリポジトリにコミットし、他の人がVSCodeでワークスペースを開くと↓のダイアログが表示される。

vscode ext1

また、拡張機能メニューを開き、フィルターアイコンをクリックして「推奨」を選択すると .vscode/extensions.json に記載した拡張機能が表示される。

vscode ext3

これで複数人開発が捗る。

参考


Related #vscode

VSCodeでc++の実行環境を整える

『問題解決力を鍛える!アルゴリズムとデータ構造』を読んで実践するために

VSCode + PrettierでRubyのコードを自動フォーマットする

@prettier/plugin-rubyを利用

VSCodeで特定のファイルだけeditor.formatOnSaveを無効化する

ファイルタイプを指定することで、そのファイルタイプのみ無効化できた

VSCodeでRails環境を整える

ショートカット大事

VSCode RemoteでWindowsマシンに接続する際にstderr> 'uname'エラーが発生

言語設定を変更する必要があった