代码风格统一：从ESLint到Prettier的自动化规范

代码风格统一的重要性统一的代码风格能提升团队协作效率减少因格式差异导致的代码冲突。ESLint和Prettier是前端领域常用的工具前者专注于代码质量检查后者专注于代码格式化。结合两者可实现自动化规范。配置ESLint安装ESLint及相关插件npm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev创建配置文件.eslintrc.js示例配置module.exports { extends: [eslint:recommended, plugin:prettier/recommended], rules: { no-console: warn, }, };eslint-config-prettier用于关闭与Prettier冲突的规则eslint-plugin-prettier将Prettier作为ESLint规则运行。配置Prettier安装Prettiernpm install prettier --save-dev创建配置文件.prettierrc示例配置{ semi: true, singleQuote: false, tabWidth: 2 }集成到开发流程编辑器集成安装VSCode插件ESLint和Prettier配置自动格式化editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscodeGit钩子自动化使用husky和lint-staged在提交前自动格式化npm install husky lint-staged --save-dev在package.json中添加配置husky: { hooks: { pre-commit: lint-staged } }, lint-staged: { *.{js,jsx}: [eslint --fix, prettier --write] }解决冲突与自定义规则若团队有特殊风格需求可通过修改.eslintrc.js和.prettierrc调整规则。例如禁用分号{ semi: false }ESLint的规则优先级高于Prettier需确保两者配置一致。持续集成CI检查在CI流程中添加ESLint检查确保代码符合规范# GitHub Actions示例 - name: Lint code run: npm run lint通过以上步骤团队可快速实现代码风格的自动化统一减少人工干预成本。gitHUB.COM/somahode/ljl/issues/82