ESLint与Prettier配置教程详解

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《JavaScript代码规范：ESLint与Prettier配置教程》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

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 配置为不加分号），需用插件桥接：

• 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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~