红宝书第三十五讲：新手也能懂的静态代码分析指南：ESLint vs JSHint

---

红宝书第三十五讲：新手也能懂的静态代码分析指南：ESLint vs JSHint

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

一、静态代码分析是什么？

不运行代码 就能检测潜在错误和代码风格问题，像“语法校对器”¹。核心功能：

1. 语法检查：比如漏写分号、变量未声明
2. 代码风格统一：缩进空格、命名规范
3. 潜在错误预警：使用未定义变量、无效循环

flowchart LR
    代码文件 --> 静态分析工具 --> 生成报告
    报告 --> 错误/警告列表 --> 修正代码

---

二、ESLint：高度可定制的现代工具 ¹

由JS专家Nicholas Zakas开发，支持插件扩展（如React/Vue规则）。

典型配置（.eslintrc.js）：

module.exports = {
  extends: "eslint:recommended",  // 继承官方推荐规则
  rules: {
    "no-unused-vars": "warn",    // 未用变量报警告
    "semi": ["error", "always"]  // 强制分号结尾
  }
};

常用rules

以下是 ESLint 最常用的规则列表，以表格形式呈现：

规则名称	描述
eqeqeq	要求使用 === 和 !==，避免使用 == 和 !=
no-unused-vars	禁止声明了但未使用的变量
no-console	禁止使用 console
no-debugger	禁止使用 debugger
no-undef	禁止使用未定义的变量
no-extra-semi	禁止不必要的分号
no-unused-expressions	禁止未使用的表达式
semi	要求或禁止使用分号
quotes	强制使用一致的反勾号、双引号或单引号
camelcase	强制使用驼峰命名法
indent	强制使用一致的缩进
no-trailing-spaces	禁用行尾空格
no-multiple-empty-lines	不允许多个空行
no-mixed-spaces-and-tabs	不允许空格和 tab 混合缩进
no-unexpected-multiline	禁止意外的多行
no-unreachable	禁止在返回语句或抛出语句后有不可达代码
no-constant-condition	禁止在条件语句中使用常量表达式
no-empty	禁止空的代码块
no-self-compare	禁止比较时使用自身
no-extra-boolean-cast	禁止不必要的布尔类型转换
no-extra-parens	禁止不必要的括号
no-fallthrough	禁止 switch 语句的 case 块直接穿透
no-redeclare	禁止重复声明变量
no-shadow	禁止变量声明遮蔽外层作用域的变量
no-var	要求使用 let 或 const 替代 var
prefer-const	推荐使用 const 声明常量
prefer-arrow-callback	推荐使用箭头函数作为回调
object-shorthand	要求对象字面量使用简写语法
dot-notation	强制使用点号表示法
space-infix-ops	要求操作符周围有空格
space-before-function-paren	要求函数括号前有空格
keyword-spacing	强制在关键字前后使用一致的空格
comma-dangle	要求或禁止尾随逗号
comma-spacing	强制在逗号前后使用一致的空格
comma-style	强制使用一致的逗号风格
eol-last	要求文件末尾有换行符
func-call-spacing	要求函数调用时在函数名和括号之间有空格
func-names	要求或禁止使用命名函数表达式
func-style	强制使用一致的函数风格
max-len	强制最大行长度
max-depth	强制最大嵌套块深度
max-params	强制最大参数数量
max-statements	强制最大语句数量
no-array-constructor	禁止使用 Array 构造函数
no-new-object	禁止使用 Object 构造函数
no-new-func	禁止使用 new Function
no-new-wrappers	禁止使用 String、Number 和 Boolean 构造函数
no-unused-labels	禁止未使用的标签
no-useless-call	禁止不必要的 .call() 和 .apply()
no-useless-concat	禁止不必要的字符串连接
no-useless-escape	禁止不必要的转义字符
no-useless-return	禁止冗余的返回语句
no-void	禁止使用 void
no-with	禁止使用 with
no-implicit-coercion	禁止使用短路类型转换
no-implicit-globals	禁止在全局作用域中声明变量
no-implied-eval	禁止使用类似 eval() 的方法
no-invalid-this	禁止在类或类对象之外使用 this
no-restricted-properties	禁止使用某些属性
no-return-assign	禁止在返回语句中使用赋值
no-script-url	禁止使用 javascript: URL
no-self-assign	禁止将变量赋值给自身
no-self-compare	禁止比较时使用自身
no-sequences	禁止使用逗号操作符
no-throw-literal	禁止抛出字面量
no-unmodified-loop-condition	禁止未修改的循环条件
no-unused-expressions	禁止未使用的表达式
no-unused-labels	禁止未使用的标签
no-useless-call	禁止不必要的 .call() 和 .apply()
no-useless-concat	禁止不必要的字符串连接
no-useless-escape	禁止不必要的转义字符
no-useless-return	禁止冗余的返回语句
no-void	禁止使用 void
no-with	禁止使用 with
no-implicit-coercion	禁止使用短路类型转换
no-implicit-globals	禁止在全局作用域中声明变量
no-implied-eval	禁止使用类似 eval() 的方法
no-invalid-this	禁止在类或类对象之外使用 this
no-restricted-properties	禁止使用某些属性
no-return-assign	禁止在返回语句中使用赋值
no-script-url	禁止使用 javascript: URL
no-self-assign	禁止将变量赋值给自身
no-self-compare	禁止比较时使用自身
no-sequences	禁止使用逗号操作符
no-throw-literal	禁止抛出字面量
no-unmodified-loop-condition	禁止未修改的循环条件
no-unused-expressions	禁止

使用步骤：

1. 安装：

npm install eslint --save-dev
npx eslint --init  # 初始化配置向导

1. 运行检测：

npx eslint yourfile.js  # 检测指定文件

→ 控制台输出错误位置及规则编号，如：

error: Missing semicolon (semi) at line 2:10

---

三、JSHint：简单易用的经典工具 ²³

JSLint的分支，适合快速检查基础问题，配置更灵活。

对比ESLint：

• 优点：配置简单，适合小项目
• 缺点：规则扩展性较弱

快速使用：

1. 安装：

npm install jshint --save-dev

1. 创建配置文件（.jshintrc）：

{
  "undef": true,    // 禁止未声明变量
  "esversion": 6    // 允许ES6语法
}

1. 运行检测：

npx jshint yourfile.js

→ 输出类似结果：

yourfile.js: line 3, col 5, 'sum' is not defined.

---

四、横向对比：如何选择？

工具	优点	不足
ESLint	✔️支持自定义插件和规则 ✔️社区活跃	❌配置略复杂
JSHint	✔️开箱即用 ✔️轻量快速	❌扩展性有限

适用场景：

• ESLint：团队协作项目、需要特定风格（如Airbnb规范）
• JSHint：快速检查遗留项目、个人小脚本

---

五、实战演示：自动修复问题

ESLint支持自动修复部分问题（如分号缺失）：

npx eslint --fix yourfile.js  # 自动修正可修复的代码

修正后代码：

// 修正前
const message = 'Hello'

// 修正后
const message = 'Hello';

---

目录：总目录
上篇文章：红宝书第三十四讲：零基础学会单元测试框架：Jest、Mocha、QUnit

---

脚注

---

1. 《JavaScript高级程序设计（第5版）》说明ESLint采用可插拔的规则配置机制 ↩
2. 《JavaScript高级程序设计（第5版）》指出JSHint是JSLint的分支，支持更多自定义规则 ↩
3. 《JavaScript高级程序设计（第5版）》提到JSLint验证语法的基本规则 ↩