快速上手

检查步骤

1. 编写问题代码

// 01-prepare.js
// 该有空格的地方没有，不需要有空格的地方有空格
// foo变量没有意义
const foo=123

function fn(){
  // 代码缩进也不一致
  console.log("hello");

    console.log("eslint");


}
// 调用的时候刻意将fn括号少些一办
fn(
// 调用了一个不存在的函数syy
syy()

2. 执行npx eslint --init进行初始化，会有一些交互性的问题，最后在根目录下生成一个.eslintrc.js的文件

? How would you like to use ESLint? ... 
// 你想怎么使用ESLint
  To check syntax only（只检查语法性错误）
  To check syntax and find problems（检查语法性错误并且发现问题代码）
> To check syntax, find problems, and enforce code style（检查语法，找到问题代码，还要对代码风格进行校验）

? What type of modules does your project use? ... 
// 项目中的模块化采用哪种类型？
// 这个决定了项目中是否允许出现指定语法或者调用
  JavaScript modules (import/export)
  CommonJS (require/exports)
> None of these（没用用到模块化）

? Which framework does your project use? ...  
// 你用了哪款框架?
  React
  Vue.js
> None of these

? Does your project use TypeScript? » No
// 你项目中是否使用到了TypeScript

? Where does your code run? ...
(Press <space> to select, <a> to toggle all, <i> to invert selection)
// 你的代码最终会运行在哪里？根据环境判断是否可以使用对应环境的API
√ Browser
  Node

? How would you like to define a style for your project? ... 
// 你想怎样定义你项目项目中的代码风格
> Use a popular style guide（市面主流风格）
  Answer questions about your style（询问问题形成一个风格）
  Inspect your JavaScript file(s)（根据js代码文件推断风格）
  
? Which style guide do you want to follow? ...
// 想使用哪种风格？
  Airbnb: https://github.com/airbnb/javascript（Airbnb公司规范）
> Standard: https://github.com/standard/standard（开源社区规范，常用，最大特点是不用在最后的语句中添加分号）
  Google: https://github.com/google/eslint-config-google（Google公司规范）

? What format do you want your config file to be in? ... 
// 你的配置文件想用哪种格式
> JavaScript
  YAML
  JSON


Checking peerDependencies of eslint-config-standard@latest
The config that you've selected requires the following dependencies:
// 我们刚才选择的standard风格需要用到这几种插件需要安装

eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1
? Would you like to install them now with npm? » No / Yes

如果不使用初始化直接执行检测，就会发现eslint报错说找不到配置文件，建议初始化

3. 完成之后使用 npx eslint .\01-prepare.js

# 首先是fn的括号导致的错误
npx eslint .\01-prepare.js

E:\professer\lagou\ESLint\first\01-prepare.js
  18:1  error  Parsing error: Unexpected token

✖ 1 problem (1 error, 0 warnings)


# 修正之后继续执行
npx eslint .\01-prepare.js

E:\professer\lagou\ESLint\first\01-prepare.js
   3:7   error  'foo' is assigned a value but never used                   no-unused-vars
   3:10  error  Operator '=' must be spaced                                space-infix-ops
   5:12  error  Missing space before function parentheses                  space-before-function-paren
   5:14  error  Missing space before opening brace                         space-before-blocks
   7:15  error  Strings must use singlequote                               quotes
   7:23  error  Extra semicolon                                            semi
   9:1   error  Expected indentation of 2 spaces but found 4               indent
   9:17  error  Strings must use singlequote                               quotes
   9:26  error  Extra semicolon                                            semi
   9:27  error  Block must not be padded by blank lines                    padded-blocks
  11:1   error  More than 1 blank line not allowed                         no-multiple-empty-lines
  16:1   error  'syy' is not defined                                       no-undef
  17:1   error  Too many blank lines at the end of file. Max of 0 allowed  no-multiple-empty-lines

✖ 13 problems (13 errors, 0 warnings)
  11 errors and 0 warnings potentially fixable with the `--fix` option.
  
# 这个时候可以手动操作，也可以通过--fix进行修正。

npx eslint .\01-prepare.js --fix

E:\professer\lagou\ESLint\first\01-prepare.js
   3:7  error  'foo' is assigned a value but never used  no-unused-vars
  14:1  error  'syy' is not defined                      no-undef

✖ 2 problems (2 errors, 0 warnings)

# 剩下的foo变量没有使用，syy没有定义，需要手动去修正

注意的点

• 当代码中存在语法错误的时候，ESLint是没有办法检查问题代码和代码风格的
• 开始如果有不好的编码习惯的，最好是手动进行修正而不是使用--fix