javascript代码风格如何规范_如何使用ESLint进行检查【教程】

ESLint本身不定义代码风格,需手动配置规则;推荐新项目从eslint:recommended起步,已有项目用eslint --init推导配置;禁用规则应优先使用行级注释而非全局关闭;VS Code无提示多因配置路径错误或插件未加载。

ESLint 不是“开箱即用就能规范代码风格”的工具,它本身不定义风格,只执行你明确配置的规则。想靠它统一团队风格,关键在配置——不是装了插件就完事,而是得选对规则集、关掉冲突项、适配项目实际需求。

怎么选基础配置:airbnb / standard / eslint:recommended?

直接用 eslint:recommended 最稳妥,它只启用 ESLint 官方标记为“fixable”且争议小的核心规则(比如 no-consoleno-unused-vars),不碰缩进、分号、引号这类主观风格项。

airbnb 和 standard 是流行扩展,但它们自带强约束:airbnb 要求分号、单引号、无空格箭头函数;standard 禁用分号、强制单引号、要求空格。团队没共识前硬套,第一天就会因 semiquotes 报错几十次。

实操建议:

  • 新项目起步,先从 eslint:recommended 开始,手动加几条高频痛点规则(如 eqeqeqno-var
  • 已有项目接入,用 eslint --init 选 “Answer questions” 模式,让 CLI 根据你代码自动推导初始配置,比盲选 preset 更少踩坑
  • 如果必须用 airbnb,务必加 "extends": ["eslint:recommended", "airbnb-base"],并删掉 airbnb 里和你团队习惯冲突的规则(比如把 "semi": ["error", "always"] 改成 "never"

如何禁用某条规则或某行检查?

禁用规则不是偷懒,而是处理真实例外场景:比如某处必须用 eval(插件沙箱)、某行正则字面量含大量反斜杠(/a\\b\\c/)导致 no-useless-escape 误报。

优先级从高到低:文件顶部注释 > 行内注释 > 配置文件全局关闭。别一上来就改 .eslintrc.js 关全局规则,会掩盖真问题。

常用方式:

  • 禁用当前行:// eslint-disable-next-line no-alert(写在出问题那行上方)
  • 禁用下一行:// eslint-disable-line no-console(写在出问题那行末尾)
  • 禁用整个文件:/* eslint-disable no-alert, no-console */(放文件顶部)
  • 临时关闭某规则(仅当前文件):/* eslint no-unused-vars: "off" */

注意:// eslint-disable 不带具体规则名,会关闭所有规则,容易埋雷,尽量避免。

VS Code 里 ESLint 不提示?常见断点在哪

装了插件却没红色波浪线,90% 是环境链路断了:VS Code 的 ESLint 插件默认只认工作区根目录下的配置,如果项目是多包结构(如 packages/foo/),而 .eslintrc.jspackages/ 上层,插件根本读不到。

排查步骤:

  • 终端进项目根目录,运行 npx eslint src/index.js,看是否报错——排除配置本身问题
  • VS Code 底部状态栏点击 ESLint 图标,确认显示 “ESLint server is running”,否则重启插件或 VS Code
  • 打开命令面板(Ctrl+Shift+P),搜 “ESLint: Show Output Channel”,看日志里是否有 Failed to load configCannot find module 'eslint-plugin-react'
  • 多包项目,在子包的 package.json 里加 "eslint.workingDirectories": ["./packages/*"](VS Code 设置)

真正难的不是配 ESLint,而是让规则既足够严格防止低级错误,又不因过度限制阻碍开发节奏。比如 max-len 设 80 字符在现代宽屏上反而降低可读性,no-pa

ram-reassign 在 Vue 响应式赋值时就得关——这些取舍,没法靠教程解决,得靠团队在 PR 评审中反复校准。