如何配置VSCode的jsconfig.json以支持无后缀导入.vue文件？

问题场景 #

现有如下jsconfig.json配置：

{
  "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "baseUrl": "./",
      "paths": {
          "@/*": ["src/*"]
      }
  },
  "exclude": [
      "node_modules",
      "**/node_modules/*",
      ".nuxt", "dist"
  ]
}

以下带后缀的导入可正常工作：

import Config from '@/resources/config'
import Tests from '@/tests/suite.js'
import MyHeader from '@/components/MyHeader.vue'

但无.vue后缀的导入无法被VSCode正确解析：

import MyHeader from '@/components/MyHeader'  // 缺少.vue后缀，无法自动补全和解析

JS文件可自动补全后缀，但Vue文件不行，需配置VSCode实现Vue文件的无后缀导入自动补全。

解决方案 #

在jsconfig.json的compilerOptions中添加resolve.extensions字段，明确指定需要自动补全的文件后缀，包含.vue即可：

修改后的完整配置 #

{
  "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "baseUrl": "./",
      "paths": {
          "@/*": ["src/*"]
      },
      "resolve": {
          "extensions": [".js", ".vue", ".json"]
      }
  },
  "exclude": [
      "node_modules",
      "**/node_modules/*",
      ".nuxt", "dist"
  ]
}

说明 #

VSCode的JavaScript语言服务默认只会自动补全.js、.json等常见后缀，.vue不在默认列表中。通过手动添加resolve.extensions并包含.vue，可以让语言服务识别并自动补全Vue文件的无后缀导入，同时也能正确解析这类导入路径。

内容的提问来源于stack exchange，提问作者Cyril N.