JavaScript代码规范需ESLint与Prettier协同：ESLint校验逻辑（如未声明变量），Prettier统一风格（缩进、引号等）；通过eslint-config-prettier桥接冲突，配合Husky、lint-staged和编辑器插件实现自动化检查与格式化。
JavaScript代码规范的核心是统一团队协作标准，ESLint负责代码质量检查（比如未声明变量、重复定义），Prettier专注格式化（缩进、换行、引号等）。两者配合使用效果最佳：ESLint做逻辑校验，Prettier做风格统一分工明确。
安装和基础配置 ESLint
在项目根目录运行以下命令安装 ESLint 及推荐插件：
- npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin（支持 TypeScript）
- npx eslint --init 启动交互式配置向导，选择环境（如 Browser/Node）、是否使用 TypeScript、框架（React/Vue）、模块系统（ESM/CommonJS）、代码规范（如 Airbnb 或 Standard）
- 生成 .eslintrc.js 或 .eslintrc.json，可手动补充规则，例如禁止 var 声明：
rules: { 'no-var': 'error' }
安装和配置 Prettier
Prettier 默认不依赖配置文件，但建议显式创建 .prettierrc 便于团队同步风格：
- npm install --save-dev prettier
- 新建 .prettierrc 文件，内容示例：
{ "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5" } - 添加 .prettierignore 忽略不需要格式化的文件（如
dist/、node_modules/）
让 ESLint 和 Prettier 协同工作
默认情况下 ESLint 和 Prettier 规则可能冲突（比如 ESLint 要求分号，Prettier 配置为不加分号），需用插件桥接：
立即学习“Java免费学习笔记（深入）”；
- npm install --save-dev eslint-config-prettier eslint-plugin-prettier
- 在 .eslintrc.js 的
extends中末尾加入：'plugin:prettier/recommended'（关闭 ESLint 中与 Prettier 冲突的规则） - 确保
plugins: ['prettier']和rules: { 'prettier/prettier': 'error' }已启用，使 Prettier 检查也作为 ESLint 错误提示
集成到开发流程
提升落地效果的关键是自动化：
- 在 package.json 中添加脚本：
"lint": "eslint src/", "format": "prettier --write src/" - 配合 Git Hook：用 Husky + lint-staged 实现提交前自动检查并修复：
安装后配置 lint-staged 对暂存区 JS/TS 文件执行eslint --fix && prettier --write - 编辑器中安装 ESLint 和 Prettier 插件（如 VS Code 的 ESLint 和 Prettier 扩展），开启
formatOnSave并设置默认格式化工具为 Prettier
