简介

安装

# 推荐项目本地安装, 而不是全局安装
$ npm install eslint --save-dev

# 列出所有可用命令
$ ls -la node_modules/.bin
# 结果
...
eslint -> ../eslint/bin/eslint.js
...

使用

初始化配置文件

$ ./node_modules/.bin/eslint --init
  • 有三种方式初始化:
    • Answer questions about your style
      • 通过几个简单的问题生成配置文件, 主要问题有关 tab/spaces, 是否使用 ES6, 是否使用 React, 是否在浏览器中运行等
      • 生成配置文件较基础,较简单
    • Use a popular style guide
    • Inspect your JavaScript file(s)
      • 直接从已有项目代码中检测合适配置
  • 个人推荐可以直接使用 Airbnb style guide
  • 初始化完成后, 会在项目根目录生成配置文件 .eslintrc.*, 可选文件类型 JavaScript/JSON/YAML
  • 或者可以在 package.json 中添加 eslintConfig 来配置
  • 另外, 可以创建 .eslintignore 文件配置需要忽略的文件, 例如:
# /node_modules/* and /bower_components/* ignored by default

# Ignore built files except build/index.js
build/*
!build/index.js

针对某个文件 file.js 进行检查

$ ./node_modules/.bin/eslint file.js

-> 直接在命令行打印出相关 error/warning

$ ./node_modules/.bin/eslint file.js --fix

-> 使用 --fix 选项可以直接自动修正, 主要修正 whitespaces 问题, 其他可修正的问题可参考官方文档中列出的 rules 中带🔧项

$ ./node_modules/.bin/eslint file.js -o lintResult.html -f html

-> 上面命令将检查报告输出为 lintResult.html 静态页面, 并将在浏览器中打开此页面, 易于阅读, 其他报告模式可参考官方文档 - formatter

对某些需要特殊处理的部分, 可在代码中使用注释更改 eslint 规则, 例如:

/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */

针对 React 项目

  • 由于一般项目初始化使用 create-react-app 作为脚手架, 实际上, 其中已包含 eslint 配置
  • 仍然可以在根项目初始化配置文件, 并进行代码检查, 但此处的检查并不影响浏览器 console 中打印的 log