mcpField
T
tsconfig

tsconfig

github.com/gkwa開発090 回インストール5 日前に更新
リポジトリ

tsconfig について

Vite プロジェクト向けの TypeScript 設定例です。厳格な型チェックと、Chrome 拡張機能 API の型を任意で設定でき、主要なコンパイラーオプションも説明します。

主な機能

  1. 01ES2020 ターゲットと ESNext モジュール
  2. 02Bundler モジュール解決
  3. 03厳格な型チェック
  4. 04ファイルを出力しない型チェック
  5. 05任意の Chrome API 型

活用シーン

  1. 01Vite の TypeScript 設定
  2. 02Chrome 拡張機能 API の型チェック
  3. 03TypeScript 出力と Vite の競合防止

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/gkwa/volcanicviper --skill tsconfig

インストール後、Claude Code で/tsconfigを入力して読み込まれたか確認します。

同梱ファイルtile.json

詳細

次の設定を含む tsconfig.json を追加します。

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noEmit": true,
    "types": ["chrome", "vitest/globals"],
    "lib": ["ES2020", "DOM", "DOM.Iterable"]
  },
  "include": ["src"]
}

主なオプション：

  • "moduleResolution": "bundler" — Vite で ES モジュールを正しく解決するために必要です
  • "types": ["chrome"] — Chrome 拡張機能の API（chrome.storage、chrome.runtime など）の IntelliSense と型チェックを有効にします。Chrome 拡張機能を開発しない場合は削除してください
  • "noEmit": true — Vite のコンパイルと競合せずに、TypeScript で型チェックを行えます
  • "target": "ES2020" — async/await、オプショナルチェーンなどの最新の構文を有効にします
  • "strict": true — バグを早期に検出し、一貫したコーディングパターンを徹底します

Chrome 拡張機能を開発する場合は、Chrome の型定義パッケージをインストールします。

pnpm add --save-dev @types/chrome

コメント

Markdown 対応