Open7

VSC拡張機能プロジェクトの準備

星野 仁星野 仁

初期コンテナ作成

  • 開発用フォルダ作成
  • VSCでフォルダを開く
  • VSCの左下のメニューから「開発コンテナ構成ファイルを追加」を選択
  • 「ワークスペースに構成を追加」を選択
  • 公式の「Node.js & TypeScript devcontainers」を選択
  • 既定のベースコンテナ（22-bookworm）を選択
  • .devcontainer/devcontainer.json が生成されるので「コンテナで再度開く」を選択
  • 開発に必要な拡張機能（Git Graphなど）を開発コンテナに追加して右クリック「devcontainer.jsonに追加」で自動追加に設定
星野 仁星野 仁

VSC拡張機能のプロジェクト構成

Yeoman と VS Code Extension Generator をインストール

/workspaces/[プロジェクト名]
yarn global add yo generator-code

インストールが完了したら親ディレクトリでYeomanによるVSC拡張プロジェクト構成を実行。

/workspaces/[プロジェクト名]
cd ..
npx yo code
# 中略 - 以下は参考例
? What type of extension do you want to create? New Web Extension (TypeScript)
? What's the name of your extension? vscweb-sample
? What's the identifier of your extension? vscweb-sample
? What's the description of your extension? 
? Initialize a git repository? Yes
? Which bundler to use? esbuild
? Which package manager to use? yarn

VSC拡張機能をインストール

推奨の拡張機能をインストール

  • Extension Test Runner
  • esbuild Problem Matchers
    その他必要な拡張機能も開発環境にインストールしておく
星野 仁星野 仁

Git環境構築

YeomanでGit環境を自動構築するがDevContainer環境の設定を追加で行う。

セキュリティ設定

プロジェクト名フォルダをセキュリティ対象から解除設定する。

/workspaces/[プロジェクト名]
git config --global --add safe.directory `pwd`
デフォルトリポジトリ名変更

ワークスペースでターミナルを開いてリポジトリを構成

/workspaces/[プロジェクト名]
git branch -m master main
星野 仁星野 仁

Webテスト環境

yarn playwright install
sudo yarn playwright install-deps

package.json の「デバッグ」から run-in-browser を実行。

星野 仁星野 仁

TypeScriptのLint&Formatter

VSCのワークスペースに ESLint と Prettier を設定し、Gitのコミット時に自動で実行する環境を構築。
デファクトっぽい以下のツールを適用する。

  • Husky: コミット時の自動処理用ツール
  • ESLint: Linter
  • Prettier: Formatter

インストール

Node.jsのパッケージに以下を追加

yarnでのインストール
yarn add --dev husky eslint prettier eslint-config-prettier @eslint/core

VSCのDevContainerで拡張機能を有効化し、Node.jsの環境構築とHuskyのインストールを行う。

DevContainer設定ファイルの例
.devcontainer/devcontainer.json
{
...
  "customizations": {
    "vscode": {
      "extensions": [
        ...
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ]
    }
  },
  "postStartCommand": "./.devcontainer/post-start.sh",
  ...
}
DevContainerの起動スクリプトの例
.devcontainer/post-start.sh
#!/bin/bash

# Abort script if any command returns an error.
set -euo pipefail

# Set the safe.directory
git config --global --add safe.directory `pwd`

# Setup typescript environment for development.
yarn install

# Install husky if not already installed.
if [ ! -d "./.husky/_" ]; then
  yarn run husky install || true
fi

設定

package.json のスクリプトに以下を追加

package.jsonの抜粋記述例
package.json
  "scripts": {
    ...
    "lint": "eslint ./src",
    "format": "prettier --write ./src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"
  },

ESLintの設定ファイルに必要項目を設定

eslint.config.mjsの記述例
eslint.config.mjs
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import prettierConfig from "eslint-config-prettier";
import pluginChaiFriendly from "eslint-plugin-chai-friendly";

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  prettierConfig,
  {
    files: ["**/*.test.ts"],
    plugins: { "chai-friendly": pluginChaiFriendly },
    rules: {
      "@typescript-eslint/no-unused-expressions": "off",
      "chai-friendly/no-unused-expressions": "error",
    },
  },
);

Husky の pre-command フックを追加

.husky/pre-commit と .husky/pre-commit.sh の記述例
.husky/pre-commit
.husky/pre-commit.sh
.husky/pre-commit.sh
#!/bin/bash

# List all staged files
STAGED_FILES=$(git diff --cached --name-only --diff-filter=d | grep -E '\.(js|ts|tsx)$')

if [ -z "$STAGED_FILES" ]; then
  echo "No staged files to lint."
  exit 0
fi


# check staged files dirrerent from working directory
DIFF_FOUND=0
for FILE in $STAGED_FILES; do
  if [ -e "$FILE" ]; then
    if ! git diff --quiet -- "$FILE"; then
      echo "'$FILE' is different content from the staged and the working directory."
      DIFF_FOUND=1
    fi
  else
    echo "'$FILE' does not exist in the working directory."
  fi
done

if [ $DIFF_FOUND -ne 0 ]; then
  echo "Please stage the changes or reset the changes before committing."
  exit 1
fi


# check by ESLint 
echo "Linting and formatting staged files: $STAGED_FILES"

yarn run eslint --fix --max-warnings 0 $STAGED_FILES
EXIT_CODE=$?


# check by Prettier
FORMATTED_FILES=$(yarn run -s prettier --list-different $STAGED_FILES)

if [ -n "$FORMATTED_FILES" ]; then
  echo "Format files: $FORMATTED_FILES"
  yarn run prettier --write $FORMATTED_FILES
  EXIT_CODE=1
fi

if [ $EXIT_CODE -ne 0 ]; then
  echo "ESlint or Prettier found issues and attempted to fix them. Please review the changes and commit again."
fi

exit $EXIT_CODE

参考情報

https://typescript-eslint.io/users/what-about-formatting/#suggested-usage---prettier
https://prettier.io/docs/en/integrating-with-linters.html

星野 仁星野 仁

テスト実行

環境構築

拡張機能 Extension Test Runner をインストールしておく。
vscode-test を実行できる環境をDevContainer上に構築する。

初期状態でもVSCのテストビュー上でデバグ実行は可能。
通常のテストを実行すると vscode-test がヘッドレス環境に対応していないためエラー停止するので、以下の手順でダミーのX環境を構築する必要がある。

  • 必要ライブラリを追加
  • xvfb を起動
  • $DISPLAY 環境変数を設定
devcontainer.json と post-start.sh の記述例
.devcontainer/post-start.sh
... （以下を追加）
# Install module for vscode-test/vscode-linux-arm64
sudo apt-get update && sudo apt-get install -y libnss3 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 libgtk-3-dev libasound2 xvfb
sudo Xvfb :99 -screen 0 1024x768x16  &> /tmp/xvfb.log &
sleep 3
echo "Xvfb started"
ps -la
.devcontainer/devcontainer.json
    ... （以下を追加）
	"containerEnv": {
		"DISPLAY": ":99"
	}

コンテナをリビルドしてtestスクリプトが正常に実行できれば環境としては成功。

yarn run test
# `package.json` 内のスクリプトで "vscode-test" が実行される

この状態であれば Test Runner (テストビュー) でも実行可能になっているはず。

テスト記述

調査中

参考リンク

https://code.visualstudio.com/api/working-with-extensions/testing-extension