extensions.json で指定された VS Code 拡張をコマンドで一括インストールする

こんにちは、CX 事業本部製造ビジネステクノロジー部の若槻です。

VS Code（Visual Studio Code） では、ワークスペースやプロジェクトで導入を推奨したい拡張機能を指定することができます。

指定方法は、次のような extensions.json ファイルを .vscode ディレクトリに作成するだけです。

.vscode/extensions.json

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "redhat.vscode-yaml",
    "Arjun.swagger-viewer"
  ]
}

しかし、この extensions.json に指定したからと言って自動で VS Code にインストールされるわけではなく、次のように RECOMMENDED の一覧に表示されるだけなので、この中から extensions.json で推奨された拡張機能を個別に手動でインストールする必要があります。それは少し手間ですね。

今回は、この extensions.json で指定された VS Code 拡張をコマンドを使って一括インストールするようにしてみました。

一括インストールする方法

いずれも extensions.json の内容をパースして code --install-extension コマンドを繰り返し実行すうという力技です。

シェルスクリプトを使う場合

次のシェルスクリプトを作成します。

install-recommended-vscode-extensions.sh

#!/bin/bash

# extensions.json ファイルのパス
EXTENSIONS_FILE=".vscode/extensions.json"

# extensions.json が存在するか確認
if [ ! -f "$EXTENSIONS_FILE" ]; then
    echo "extensions.json ファイルが見つかりません: $EXTENSIONS_FILE"
    exit 1
fi

# recommendations を読み込み、それぞれの拡張機能をインストール
for ext in $(jq -r '.recommendations[]' $EXTENSIONS_FILE); do
    echo "拡張機能をインストールしています: $ext"
    code --install-extension $ext
done

echo "すべての拡張機能のインストールが完了しました。"

ターミナルで以下のコマンドを実行して、シェルスクリプトを実行可能にします。

chmod +x install-recommended-vscode-extensions.sh

シェルスクリプトを実行すると、すべての拡張機能がインストールされます。

$ ./install-recommended-vscode-extensions.sh
拡張機能をインストールしています: dbaeumer.vscode-eslint
Installing extensions...
Installing extension 'dbaeumer.vscode-eslint'...
(node:95823) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
(Use `Electron --trace-deprecation ...` to show where the warning was created)
Extension 'dbaeumer.vscode-eslint' v2.4.4 was successfully installed.
拡張機能をインストールしています: esbenp.prettier-vscode
Installing extensions...
Extension 'esbenp.prettier-vscode' v10.1.0 is already installed. Use '--force' option to update to latest version or provide '@<version>' to install a specific version, for example: 'esbenp.prettier-vscode@1.2.3'.
拡張機能をインストールしています: redhat.vscode-yaml
Installing extensions...
Extension 'redhat.vscode-yaml' v1.14.0 is already installed. Use '--force' option to update to latest version or provide '@<version>' to install a specific version, for example: 'redhat.vscode-yaml@1.2.3'.
拡張機能をインストールしています: Arjun.swagger-viewer
Installing extensions...
Installing extension 'arjun.swagger-viewer'...
(node:95856) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
(Use `Electron --trace-deprecation ...` to show where the warning was created)
Extension 'arjun.swagger-viewer' v3.1.2 was successfully installed.
すべての拡張機能のインストールが完了しました。

esbenp.prettier-vscode と redhat.vscode-yaml はすでにインストールされているため、インストールされませんでした。

dbaeumer.vscode-eslint と Arjun.swagger-viewer は未インストールだったためインストールされました。DEP0005 の警告が出ていますが、これはインストールのプロセスに起因するものなので、code コマンドの今後のアップデートでの解消を待ちましょう。

npm scripts を使う場合

同じスクリプトを npm scripts に指定しておけば、シェルスクリプトを作成する必要がなくなります。

package.json

{
  "scripts": {
    "install:recommended-vscode-extensions": "for ext in $(jq -r '.recommendations[]' .vscode/extensions.json); do code --install-extension $ext; echo \"\"; done"
  }
}

npm run コマンドを実行すると一括でインストールできました。

$ npm run install:recommended-vscode-extensions 

> cdk-lambda-dynamodb-sample@1.0.0 install:recommended-vscode-extensions
> for ext in $(jq -r '.recommendations[]' .vscode/extensions.json); do code --install-extension $ext; echo ""; done

Installing extensions...
Extension 'dbaeumer.vscode-eslint' v2.4.4 is already installed. Use '--force' option to update to latest version or provide '@<version>' to install a specific version, for example: 'dbaeumer.vscode-eslint@1.2.3'.

Installing extensions...
Extension 'esbenp.prettier-vscode' v10.1.0 is already installed. Use '--force' option to update to latest version or provide '@<version>' to install a specific version, for example: 'esbenp.prettier-vscode@1.2.3'.

Installing extensions...
Extension 'redhat.vscode-yaml' v1.14.0 is already installed. Use '--force' option to update to latest version or provide '@<version>' to install a specific version, for example: 'redhat.vscode-yaml@1.2.3'.

Installing extensions...
Extension 'arjun.swagger-viewer' v3.1.2 is already installed. Use '--force' option to update to latest version or provide '@<version>' to install a specific version, for example: 'arjun.swagger-viewer@1.2.3'.

個人的にはこちらの方法の方が私は好みです。

おわりに

extensions.json で指定された VS Code 拡張をコマンドで一括インストールする方法をご紹介しました。

シェルを使った力技ではあったのですが、リポジトリなどの README に「次のコマンドを実行するとこと」と一文を書くだけで他のメンバーに推奨設定を展開することができるのは便利だと思います。

ちなみに今回推奨する拡張機能の例として上げた redhat.vscode-yaml と Arjun.swagger-viewer は、下記で紹介している通り OpenAPI 仕様書の編集時に役立つ拡張機能です。是非に使ってみて下さい。

参考

以上