VS Code IntelliSense not working on .vue files after adding jsconfig.json¶

Problem description¶

In the project generated by vue, the @ alias is configured by default. The vite.config.js looks like:

export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

But VS Code still does not understand the @ alias. SO, many articles suggest that you should add a jsconfig.json which looks like:

{
    "compilerOptions": {
      "baseUrl": ".",
      "target": "es6",
      "paths": {
        "@/*": ["./src/*"],
      }
    }
  }

Now the @ alias works fine, but a new problem occurs. VS Code IntelliSense now is not working on .vue files!

Solution¶

Remove the line "target": "es6", in jsconfig.json, so that VS Code IntelliSense works on .vue files.

Now the new jsconfig.json which looks like:

{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["./src/*"],
      }
    }
  }

This article is originally created by tooli.top. Please indicate the source when reprinting : https://www.tooli.top/posts/vscode_vue_Intellisense