前端工程化 词条目录
前端Wiki/词条/ESLint 代码规范

ESLint 代码规范

定义可插拔的 JS/TS 代码检查工具:静态扫描出语法错误、风格问题与坏味道

ESLint 把「团队规范」变成机器可执行的规则:分号、缩进、禁止 var、禁止未使用变量、组件文件命名……每条规则可配置(off/warn/error)。扩展(extends)继承业界集合(eslint:recommended、airbnb、standard),再在 rules 里微调。编辑器集成后保存即自动修复(--fix 命令能修 60% 以上的问题)。

它只做「静态分析」——不运行代码,所以能查的是语法与结构层面问题;逻辑错误与类型问题是它的盲区(类型要交给 TS)。与 Prettier 的分工:Prettier 只管格式化(美不美),ESLint 管「对不对」;一起用时要 eslint-config-prettier 关闭冲突的格式规则。

JavaScript
// .eslintrc.cjs
module.exports = {
  root: true,
  env: { browser: true, es2022: true, node: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',  // TS 规则
    'plugin:vue/vue3-recommended',            // Vue 规则
    'prettier',                               // ★ 关闭与 Prettier 冲突的格式规则
  ],
  rules: {
    'no-console': 'warn',                     // console 警告
    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    '@typescript-eslint/no-explicit-any': 'error',  // 禁 any
  },
};

// package.json
// "lint":    "eslint src --ext .js,.ts,.vue"
// "lint:fix":"eslint src --ext .js,.ts,.vue --fix"   // 自动修复
⚠ 常见误区
🔗 相关词条Git Hooks提交信息规范Babel
← 返回来源章节代码审查与 Git Hooks