Visual Studio Code Extension 설치 자동화

프롤로그

이 글은 Visual Studio Code Extension의 설치 과정을 CLI 환경에서 자동화해주는 방법을 설명하고 있습니다. (단, 본인의 환경에서 Visual Studio Code가 설치 되어있어야만 합니다.)

관련 소스 코드는 아래의 링크를 확인해주세요.

https://github.com/mugglim/vscode-extension-install-automation

GitHub - mugglim/vscode-extension-install-automation: How to install vscode extension in CLI. (for automation)

 

CLI 환경에서 Extension 설치하기

VSCode는 CLI 환경에서 Extension을 추가 및 삭제 할 수 있는 방법을 제공하고 있습니다.
⇒ Command line extension management

CLI 환경에서 Extension을 제어하기 위해서는 Extension의 Unique Identifier이 필요합니다. Unique Identifier은 VSCode의 Marketplace에서 Extension을 검색 후 More Info 섹션에서 확인 가능합니다.

code --install-extension {Unique Identifier}

예제 : TODO Highlight을 CLI 환경에서 설치해보기

1. MarketPlace에서 TODO Highlight 검색하기

2. Unique Identifier 확인하기

• TODO Highlight Extension의 Unique Identifier는 wayou.vscode-todo-highlight입니다.
  (기준 : 2022.10.22)

3. TODO Highlight CLI로 설치 하기

code --install-extension wayou.vscode-todo-highlight

4. VSCode 재실행하기

Shell script로 Extension 설치 자동화하기

프로젝트를 세팅하다 보면, 종종 Extension도 설치하는 경우가 있습니다. 이 과정을 Shell scrip로 자동화해보겠습니다.

예제: ESLint, Prettier, TODO Highlight Shell script로 설치하기

우선, 각 Extension의 Unique Identifier을 vscode-extension.text에 작성해주세요. 각 Extension의 Unique Identifier은 아래와 같습니다.

• ESLInt : dbaeumer.vscode-eslint
• Prettier : esbenp.prettier-vscode
• TODO Highlight : wayou.vscode-todo-highlight

1. vscode-extension.text 작성

dbaeumer.vscode-eslint
esbenp.prettier-vscode
wayou.vscode-todo-highlight

2. vscode-auto-install.sh 작성

#!/bin/bash

BASE_DIR=$(dirname "$0")
EXTENSION_IDENTIFIERS=$(cat "${BASE_DIR}/vscode-extension.txt")

for identifier in $EXTENSION_IDENTIFIERS
do
    echo $(code --install-extension $identifier)
done

3. vscode-auto-install.sh 실행

sh ./vscode-auto-install.sh

• (참고) zsh을 사용하는 경우 chmod를 통해 스크립트 파일의 쓰기 권한을 부여 후 진행해주세요

chmod +x vscode-auto-install.sh

(추가) Node로 Extension 설치 자동화하기

1. vscode-extension.json 작성

{
  "eslint": "dbaeumer.vscode-eslint",
  "prettier": "esbenp.prettier-vscode",
  "todo-highlight": "wayou.vscode-todo-highlight"
}

2. vscode-auto-install.js 작성

const {exec} = require('child_process');
const ExtensionIdentifiers = require('./vscode-extension.json');

const VSCODE_INSTALL_EXTENSION_SCRIPT = 'code --install-extension';

for (const [extension, identifier] of Object.entries(ExtensionIdentifiers)) {
  exec(`${VSCODE_INSTALL_EXTENSION_SCRIPT} ${identifier}`, (err, stdout) => {
    if (err) {
      console.log(err);
    }

    console.log(`🚀 ${extension} 🚀`);
    console.log(stdout);
  });
}

3. vscode-auto-install.js 실행

node vscode-auto-install.js

레퍼런스

• Command line extension management