如何配置VSCode的ESLint使HTML中的JS支持typeRoots类型？

以下是几个可行的配置方案，按优先级排序：

1. 调整jsconfig.json的文件包含范围 #

修改jsconfig.json的include字段，明确指定HTML文件，确保VSCode的语言服务将其纳入类型检查范围：

{
  "compilerOptions": {
    // 保留原有配置
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "typeRoots": ["./node_modules/@webgpu/types", "./node_modules/@types"]
  },
  "include": [
    "build/**/*",
    "**/*.js",
    "**/*.html",
    ".eslintrc.js"
  ]
}

2. 配置VSCode启用HTML内的JavaScript类型支持 #

在VSCode的用户设置（settings.json）中添加以下配置，确保HTML语言服务能读取jsconfig的类型配置：

{
  "html.javascript.enabled": true,
  "javascript.preferences.includeAutomaticTypeAcquisition": true
}

3. 验证ESLint配置的有效性 #

确保eslint-plugin-html和@typescript-eslint/parser的配置正确覆盖HTML文件：

• 确认parserOptions.extraFileExtensions已包含.html
• 执行npm install @webgpu/types --save-dev，确保类型包已正确安装

4. 兜底：手动添加类型引用注释 #

如果上述配置仍未生效，可在HTML的<script>标签开头添加类型引用注释，强制加载WebGPU类型：

<script>
/// <reference types="@webgpu/types" />
// 此处的WebGPU API将获得类型提示
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
</script>

内容的提问来源于stack exchange，提问作者user128511