React项目中VS Code自动用require而非ES Module导入的问题

问题概述 #

用create-react-app、Prettier、ESLint和Husky搭建React项目后，遇到两个核心问题：

• 新建JS文件时，编辑器默认按CommonJS模块处理，导入依赖自动生成require语法，而非ES标准的import
• ESLint抛出no-undef错误：require和process被提示“未定义”

已尝试但无效的操作：

• 在package.json中添加"type": "module"
• 在jsconfig.json中设置"module": "es6"

一、修复ESLint的no-undef错误 #

1. 补充环境配置 #

修改eslint.json的env字段，加入node: true——因为require和process属于Node.js全局变量，同时保留browser: true适配浏览器环境：

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true // 新增此行
  },
  // 其余配置保持不变
}

2. 显式声明process全局变量（可选） #

create-react-app会自动将process.env注入浏览器环境，但ESLint可能仍未识别，可在globals中声明：

{
  "globals": {
    "React": "readonly",
    "process": "readonly" // 新增此行
  },
  // 其余配置保持不变
}

二、让编辑器默认使用ES Module的import语法 #

1. 完善jsconfig.json配置 #

更新jsconfig.json，明确指定模块系统为ESNext，同时排除无关目录：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@public/*": ["public/*"],
      "@src/*": ["src/*"],
      "@assets/*": ["src/assets/*"],
      "@components/*": ["src/components/*"],
      "@pages/*": ["src/pages/*"],
      "@store/*": ["src/store/*"],
      "@utils/*": ["src/utils/*"]
    },
    "module": "ESNext",
    "target": "ESNext",
    "moduleResolution": "NodeNext"
  },
  "exclude": ["node_modules", "build"]
}

2. 调整编辑器配置（以VS Code为例） #

在项目根目录新建.vscode/settings.json，强制JS文件按React模块处理，默认生成import语法：

{
  "javascript.preferences.importModuleSpecifier": "non-relative",
  "files.associations": {
    "*.js": "javascriptreact"
  }
}

3. 移除package.json中的"type": "module" #

create-react-app基于Webpack构建，直接设置"type": "module"会和Webpack的模块处理逻辑冲突，务必删除这一行配置。

三、处理commitlint.config.js的ESLint错误 #

commitlint配置文件本身是Node.js环境的CommonJS模块，module.exports是正确写法，可通过以下方式规避ESLint报错：

方法1：添加忽略规则 #

在项目根目录新建.eslintignore文件，写入：

commitlint.config.js

方法2：单独配置ESLint规则 #

在eslint.json中添加overrides字段，针对该文件开启Node环境：

{
  "overrides": [
    {
      "files": ["commitlint.config.js"],
      "env": {
        "node": true
      }
    }
  ]
}

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