babel负责语法转译，eslint负责静态检查，二者无内置联动；需通过@babel/eslint-parser解析babel语法、eslint-webpack-plugin嵌入构建、npm script串联（如"build": "npm run lint && babel src"）、husky+lint-staged提交拦截等方式实现“先检查后转译”。
Babel 和 ESLint 在代码流程中分工明确：Babel 负责语法转译（比如把可选链、顶层 await 编译成兼容旧环境的代码），ESLint 负责静态规范检查（比如缩进、未使用变量、命名约定）。它们不自动联动，但可以通过配置让 ESLint 先“把关”，再由 Babel 处理——关键在于让 ESLint 能正确解析 Babel 支持的语法。
用 @babel/eslint-parser 替换默认解析器
ESLint 默认解析器不识别 JSX、可选链、装饰器等 Babel 扩展语法。必须显式指定 Babel 解析器：
- 安装：
npm install --save-dev @babel/eslint-parser @babel/core - 在
.eslintrc.js中配置：parser: "@babel/eslint-parser",<br>parserOptions: {<br> requireConfigFile: false,<br> ecmaVersion: "latest"<br>}
注意：不要写sourceType: "module"，Babel 解析器会自动推断，手动指定反而导致部分规则失效
在 Webpack 构建中嵌入 ESLint 检查
借助 eslint-webpack-plugin，让 lint 在开发启动、热更新和打包时自动运行：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 安装插件：
npm install --save-dev eslint-webpack-plugin - 在
webpack.config.js的plugins数组中添加：new ESLintPlugin({<br> extensions: ["js", "jsx", "ts"],<br> context: "./src",<br> exclude: /node_modules/<br>}) - 开发时启用浏览器错误浮层：
devServer: { overlay: true }，错误直接显示在页面上
通过 npm script 实现“先检查后转译”
用 shell 逻辑控制执行顺序，确保 ESLint 通过才运行 Babel：
- 在
package.json中定义脚本："lint": "eslint src --ext .js,.jsx",<br>"build": "npm run lint && babel src --out-dir lib"
- 运行
npm run build时，若 ESLint 报错（退出码非 0），&&会中断后续 Babel 命令 - CI 环境建议加
--max-warnings 0，把警告也视为失败，避免漏检
提交前拦截：husky + lint-staged
把检查提前到 git commit 阶段，比等到构建时更早发现问题：
- 安装：
npm install --save-dev husky lint-staged - 初始化 husky：
npx husky install，并设置 pre-commit 钩子 - 在
lint-staged配置中指定："*.js": ["eslint --fix", "git add"]
若修复后仍有错误，或无法自动修复，commit 将被拒绝
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
