VSCode IntelliSense对ES6 import不生效？求解决方案

我完全懂这种被智能提示坑到的烦躁，咱们一步步来解决你遇到的两个问题：

一、修复VSCode对ES模块的智能提示失效问题 #

你之前加了jsconfig.json但没生效，大概率是配置项不全，试试下面这个完整的配置：

{
  "compilerOptions": {
    "module": "ES6",
    "target": "ES6",
    "moduleResolution": "node",
    "baseUrl": "./",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

关键配置的作用：

• moduleResolution": "node"：让VSCode按照Node.js的模块解析规则来找文件，这样导入时才能正确识别./abc.js这类路径
• allowSyntheticDefaultImports": true：允许ES模块语法导入CommonJS的默认导出，打通两种模块规范的识别
• include指定你的源码目录，确保VSCode能扫描到所有需要提示的文件

配置完之后，记得按Ctrl+Shift+P输入"Reload Window"重载VSCode窗口，缓存有时候会拖后腿。

另外可以检查一下VSCode的内置设置：搜索「JavaScript Implicit Project Config」，确认module选项设为ES6，不过有了jsconfig.json之后这个会被覆盖，但保险起见还是确认下。

二、让传统CommonJS导出（module.exports）正常工作 #

你遇到module.exports = User不生效的问题，本质是ES模块导入和CommonJS导出的兼容问题。可以用下面两种方法解决：

方法1：同时兼容两种导出语法 #

在你的abc.js里同时写ES模块和CommonJS的导出，这样不管用import还是require都能正常识别：

// abc.js
class User {
  // 你的类方法
}

// 同时支持CommonJS和ES模块
module.exports = User;
export default User;

方法2：用Babel插件自动转换兼容（React Native项目适用） #

如果是React Native项目，可以在babel.config.js里添加插件，让Babel自动处理两种模块规范的兼容：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    '@babel/plugin-transform-modules-commonjs'
  ]
};

这个插件会把ES模块语法转成CommonJS，同时保留对ES模块导入的支持，VSCode的智能提示也能正常识别。

做完这些操作后，你再试试用import abc from './abc'导入，应该就能看到文件和方法的提示了，module.exports的导出也能正常被访问到。

内容的提问来源于stack exchange，提问作者TomSawyer