Corredor

ウェブ、プログラミングの勉強メモ。

プロジェクトで使う VSCode 拡張機能の導入を推奨する方法

VSCode を使ってチーム開発をしている時、VSCode 拡張機能を導入して Lint チェックエラーを表示させたり、自動フォーマット機能を利用したりしたいが、チームメンバがどのような拡張機能を入れているかは分からない。「あの人、拡張機能を入れれば自動化できることを手作業でやってて、しかもミスがある…」なんてこともしばしば。

そこで、チーム開発しているプロジェクトの中に VSCode 用の設定ファイルを置いて、「このプロジェクトの開発をする時はこの拡張機能を入れてね」とアラートを出すようにしよう。コレを設定しておくと、推奨される拡張機能を一括インストールしてもらうこともできるようになるので、まずどのメンバの環境にも必要な拡張機能が導入できるはずだ。

拡張機能を推奨する設定ファイル

指定の拡張機能の導入を推奨するための設定ファイルは、プロジェクトルート配下 ./.vscode/extensions.json というファイルを置くことで管理できる。

extensions.json の中身は以下のように書く。

{
  "recommendations": [
    "推奨したい拡張機能名"
  ]
}

拡張機能名の調べ方

extensions.json に書く拡張機能名は、「拡張機能」タブで拡張機能の詳細ページを開いた時に、名称の隣に表示されている。

もしくは、Visual Studio Marketplace のサイト上で参照している時は、「Unique Identifier」という項目に表示されている文字列がそれになる。

例えば、HookyQR 氏作成の「Beautify」という拡張機能の場合、

Unique Identifier は「HookyQR.beautify」となっているので、extensions.json に追加する際は以下のように書く。

{
  "recommendations": [
    "HookyQR.beautify"
  ]
}

recommendations プロパティの値は配列になっているので、複数の拡張機能を指定できる。

{
  "recommendations": [
    "HookyQR.beautify",
    "dbaeumer.vscode-eslint"
  ]
}

推奨拡張機能を導入させるには

このような extensions.json を用意したら、このファイルを Git 管理対象に追加してやるなどして、開発メンバがこのファイルをチェックアウトできるようにする。

このファイルを含んだプロジェクトを開発メンバが開くと、ウィンドウ右下に「このワークスペースには拡張機能の推奨事項があります。」と表示されるので、「すべてインストール」ボタンを押せば、インストールを一括実行できる。「推奨事項を表示」ボタンを押すと、「拡張機能」タブで各推奨機能の詳細が @recommended にまとまって参照できる。

以上

コレで、チーム内の VSCode 拡張機能の導入状況を揃えられるだろう。

Angular Webアプリ開発 スタートブック

Angular Webアプリ開発 スタートブック