VS Code启用自动类型获取后无法找到.vue及package.json模块如何解决？

我之前也碰到过一模一样的情况——启用自动类型获取后，VS Code的TypeScript语言服务会更严格地检查模块导入逻辑，这两个问题都可以通过配置类型声明和项目配置来解决，具体方案如下：

一、.js文件导入.vue文件时报错 #

VS Code的TypeScript服务默认不识别.vue后缀的模块，我们需要手动添加类型声明并配置项目规则：

• 在项目根目录创建vue-shim.d.ts文件（哪怕是纯JS项目，VS Code也会读取这个类型声明文件），写入以下内容：

  declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
  }
  

• 同时创建或修改根目录的jsconfig.json，让TypeScript服务识别.vue后缀的文件：

  {
    "compilerOptions": {
      "target": "ESNext",
      "module": "ESNext",
      "moduleResolution": "Node",
      "resolveExtensions": [".js", ".vue"],
      "types": ["vue"]
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
  }
  

• 保存文件后，按Ctrl+Shift+P打开命令面板，输入TypeScript: Restart TS Server重启服务，这个报错就会消失了。

二、webpack.config.js导入package.json时报错 #

这个问题是因为默认配置下，TypeScript服务没有开启JSON模块解析支持，解决步骤如下：

• 在jsconfig.json的compilerOptions里添加resolveJsonModule: true，同时把webpack.config.js加入到include列表中，修改后的配置示例：

  {
    "compilerOptions": {
      "target": "ESNext",
      "module": "ESNext",
      "moduleResolution": "Node",
      "resolveExtensions": [".js", ".vue"],
      "types": ["vue"],
      "resolveJsonModule": true
    },
    "include": ["src/**/*", "webpack.config.js"],
    "exclude": ["node_modules"]
  }
  

• 如果想要获得webpack配置的智能提示，还可以安装webpack的类型包：

  npm install @types/webpack --save-dev
  

• 最后同样重启TypeScript服务，导入package.json的报错就会被解决。

内容的提问来源于stack exchange，提问作者François Romain