有没有办法在 VSCode 中配置 eslint 以支持 HTML 文件中 JavaScript 的 typesRoot 类型？-解网

问：

赏金将在 2 天后到期。回答这个问题有资格获得 +250 声望赏金。Gman希望引起人们对这个问题的更多关注：

寻找有效的解决方案

我正在使用这样的jsconfig.json

{
  "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",
    ".",
    ".eslintrc.js",
  ]
}

以及像这样的文件eslintrc.js

module.exports = {
  env: {
    browser: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 11,
    tsconfigRootDir: __dirname,
    project: ['./jsconfig.json'],
    extraFileExtensions: ['.html'],
  },
  plugins: [
    '@typescript-eslint',
    'eslint-plugin-html',
    'eslint-plugin-optional-comma-spacing',
    'eslint-plugin-one-variable-per-var',
    'eslint-plugin-require-trailing-comma',
  ],
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  rules: {
    ...
  },
};

重要的部分是这条线

    "typeRoots": [ "./node_modules/@webgpu/types", "./node_modules/@types"]

它添加了 webgpu 类型，我可以看到它在 VSCode 中适用于 javascript 文件

但它不适用于 HTML 文件中的 JavaScript

是否可以让它在 HTML 文件中包含 JavaScript 类型的知识？

javascript eslint 稿打字稿

您可以通过尝试使用 JSDoc 注释来了解其工作原理，这些注释允许您在 JS 文件中指定类型。如果实现下面的代码，你将看到类型成功传递到“main.js”文件中，但是，如果您复制“main.js”中指定的代码并将其粘贴到 HTML 文件的脚本标记中，则类型不会传递。

来自官方 Typescript 文档的代码：JSDoc @type

// @filename: types.d.ts
export type Pet = {
  name: string,
};
 
// @filename: main.js
/**
 * @param {import("./types").Pet} p
 */
function walk(p) {
  console.log(`Walking ${p.name}...`);  // p.name has type 'string'
}

顺便说一句，您可以使用 JSDoc 注解手动指定类型，这确实有效。但是，正如您在下面看到的，没有发生 linting，因此无论如何它都没有多大用处。

感谢您的详细解释。似乎html-langauge-server可以/应该使用选项进行更新，以将JS语言服务用于脚本标签。事实上，这对于其他语言非常有用，例如在我输入代码示例时的 markdown。为了满足我的特殊需求，我为 WebGL/WebGPU/Three.js 编写了很多单文件 .html 示例。将它们保存在一个文件中比将它们拆分更方便，但这意味着没有一个完成适用于三个.js或WebGPU（现在是浏览器的标准部分）

0赞 gman 11/18/2023

能够嵌套语言服务器对于C++，Rust，JavaScript，TypeScript，Python等中的内联着色器也非常有帮助。可能也适用于 SQL 内容

0赞 gman 11/18/2023

在研究它时，我发现了这篇关于嵌入式语言的文章。该文档声称 html-lanaguage-server 调用了 css 的 css-language-server，并且似乎它调用了 JavaScript 的 javascript-lanauge-server，这表明问题出在配置上，而不是顶层是 html-language-server 的事实。

上一个：确定鼠标按下是否会触发 JS 中的上下文菜单

下一个：根据 iframe 中的点击导致的主页 URL 更改触发 GTM 事件

有没有办法在 VSCode 中配置 eslint 以支持 HTML 文件中 JavaScript 的 typesRoot 类型？

Is there a way to configure eslint in VSCode to support typesRoot types for JavaScript in HTML files?

评论

评论