TypeScript React项目ESLint与Prettier集成异常问题咨询

问题根源 #

默认情况下，Create React App（CRA）的开发服务器启动时不会主动扫描所有文件做ESLint校验，仅在文件被修改保存时才触发当前文件的校验逻辑，导致启动阶段看不到全局的ESLint/Prettier错误或警告。

解决方案 #

方案1：修改启动脚本，前置全量校验 #

直接在npm start命令前添加ESLint（及Prettier）的全量校验步骤，确保启动前先检查所有文件：

1. 打开项目根目录的package.json，修改scripts中的start命令：

   "scripts": {
     "start": "eslint . --ext .ts,.tsx && react-scripts start",
     "lint": "eslint . --ext .ts,.tsx",
     // 其他脚本...
   }
   

2. 若需要同时检查Prettier格式，可扩展命令：

   "start": "prettier --check . && eslint . --ext .ts,.tsx && react-scripts start"
   

3. 可选参数调整：
   • 添加--quiet可只显示错误（忽略警告）：eslint . --ext .ts,.tsx --quiet
   • 添加--max-warnings 0可让警告也阻断启动：eslint . --ext .ts,.tsx --max-warnings 0

方案2：修改Webpack配置，让开发服务器启动时自动校验所有文件 #

如果需要保留CRA的热更新特性，同时在启动时自动校验所有文件，可通过craco或react-app-rewired修改默认Webpack配置：

以craco为例：

1. 安装依赖：

   npm install @craco/craco eslint-webpack-plugin --save-dev
   

2. 在项目根目录创建craco.config.js，添加如下配置：

   const ESLintPlugin = require('eslint-webpack-plugin');
   
   module.exports = {
     webpack: {
       plugins: {
         add: [
           new ESLintPlugin({
             extensions: ['ts', 'tsx'],
             emitWarning: true, // 在控制台输出警告
             failOnError: true, // 遇到错误时阻断启动
             failOnWarning: false, // 遇到警告时不阻断启动（可根据需求修改）
             lintDirtyModulesOnly: false, // 关闭仅校验修改过的文件，启动时扫描所有文件
           }),
         ],
       },
     },
   };
   

3. 修改package.json中的启动脚本：

   "scripts": {
     "start": "craco start",
     // 其他脚本...
   }
   

针对Prettier的补充说明 #

确保已通过eslint-plugin-prettier和eslint-config-prettier将Prettier规则集成到ESLint中，这样格式问题会被转化为ESLint的警告/错误，上述方案即可覆盖Prettier的校验需求。若未集成，可单独在启动脚本中添加prettier --check .命令（如方案1所示）。

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