ESLint 入门：JavaScript 代码检查工具

ESLint 是现在 JavaScript 最流行的代码检查工具，GitHub 星标超过 2 万，帮你检查代码语法错误，编码规范问题，写代码的时候就能发现问题，减少bug。

我用 ESLint 好多年了，项目都配，确实能帮你提早发现错误，聊聊它好用在哪，值得学吗。

ESLint 解决了什么问题

以前写 JavaScript，语法错了运行才发现，console 打半天找错，ESLint 在你写代码的时候就能告诉你哪里错了，变量没定义，类型不对，都能提前发现，省好多调试时间。

团队统一编码规范，比如不能用 var，必须用 const/let，每行结尾分号要不要，缩进对不对，ESLint 帮你检查，不符合规范提示你，保证所有人代码符合规范，读起来舒服。

很多最佳实践，比如不要用 == 要用 ===，不要定义没用变量，这些 ESLint 都能提醒你，帮你写更好的代码，减少低级错误。

基础例子看一下

安装：

npm install --save-dev eslint

初始化配置：

npx eslint --init

它会问你问题，帮你生成配置文件 .eslintrc.js，搞定就能用了。

检查文件：

npx eslint src/**/*.js

它会输出哪里错了，行号列号，为什么错，你照着改就好了。

自动修复能修复的错误：

npx eslint src/**/*.js --fix

很多格式问题、简单错误自动帮你修好，不用你一个个改，省好多事。

配置例子：

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    'no-console': 'warn',
    'prefer-const': 'error',
  },
}

配合编辑器，VS Code 装 ESLint 插件，你写代码的时候红线提示错，保存还能自动fix，太方便了。

核心好用的特性

提早发现错误

变量没定义，你写错了单词，运行前就能发现，不用跑代码才找错，省调试时间，特别是大项目，省好多事。

统一编码规范

团队规范定好，配置进去，所有人代码都要过，过不了不能提交，保证代码风格一致，谁写的都一样好读，维护方便。

可配置可扩展

规则你可以开可以关，严一点松一点你自己定，想要什么规则开什么，灵活。还能加插件，React、Vue、TypeScript 都有插件，支持各种技术栈。

生态完善

现在所有框架都有 ESLint 配置，Airbnb 这些热门规范直接用，extends 就行，不用自己配规则，拿来就用，方便。

编辑器集成好

所有主流编辑器都有插件，写代码实时提示，自动fix，开发的时候就能改，不用等命令行跑，体验好。

哪些场景用 ESLint

所有 JavaScript TypeScript 项目都能用，不管大小，配了 ESLint 提早发现问题，减少bug，肯定有用。团队开发，一定要配，统一规范，减少争论，代码质量更高。

ESLint 有哪些优缺点

优点，确实能提早发现错误，减少低级bug，统一编码规范，大家都按规范写，好维护。配置灵活，你想要什么样就什么样，各种框架都支持，生态好，什么都有。

缺点，配置一开始有点复杂，新手不知道怎么配，不过现在 eslint --init 自动帮你配，好了很多。项目大了检查慢点，不过现在有缓存，也还好，lint-staged 只检查改了的，快很多。

现在 ESLint 发展得怎么样

出来快十年了，一直是 JavaScript 代码检查的标准，用户最多，一直维护，更新稳定，现在很多新功能，性能也越来越好。

现在前端项目标配，基本上新项目初始化都带 ESLint，所以肯定得会，找工作也要求会配。

现在学 ESLint 值得吗

肯定值得，做 JavaScript 开发，必须会，你写项目总得配吧，配好了帮你省好多调试时间，减少低级错误，为什么不学呢。配置现在也简单，--init 一分钟配好，常用规则记住几个，够用了，不难学。

就算你有 Prettier，ESLint 检查代码错误，Prettier 管格式，分工合作，都得要，所以肯定得学。代码质量提高了，少出bug，大家都开心。

项目地址：https://github.com/eslint/eslint