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

Question

I'm using a jsconfig.json like this

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

and an eslintrc.js file like this

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: {
    ...
  },
};   

The important part is this line

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

It adds the webgpu types and I can see that's working in VSCode for a javascript file

But it's not working for JavaScript inside HTML files

Is it possible to get it to include knowledge of the types for JavaScript inside HTML files?

Answer 1

The issue is that VSCode utilizes its 'html-language-features' service for HTML files, and not its JS or TS language services - subsequently a jsconfig.json configuration is not going to affect HTML files. There isn't a way around this unless you recompile the service yourself with amendments or request they implement the feature.

You can see how this works in action by trying to use JSDoc annotations that allow you specify types within JS files. If you implement the code below you'll see the types pass through successfully into the 'main.js' file, however if you copy the code specified in 'main.js' and paste it within script tags in an HTML file the types do not pass through.

Code from the official Typescript docs: 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'
}

Incidentally you can use the JSDoc annotations to specify types manually, that does work. However as you can see below there is no linting occurring, so it's not of much use anyway.