初识ESLint

CrayonPig
54 阅读6分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

前言

众所周知，JavaScript是一门动态语言，写起来随心所欲。一千个写JavaScript的coder就有一千种风格的写法。

但从团队的角度来讲，众多风格的写法就代表着接手别人代码的成本上升，而且杂乱无章的写法也会引起大量bug的出现，不利于code review。

基于这个情况，ESlint应运而生

什么是ESLint

ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。 它的目标是提供一个插件化的JavaScript代码检测工具。

从官网的描述中，我们可以看出ESLint是根据代码规范检测JavaScript是否正确的工具，那么我们为什么需要代码规范呢？

  • 统一编码规范，减少bug
  • 增强团队协作，减少不必要的沟通，提升效率
  • 增加代码可维护性和可接入性
  • 提高代码质量，探究团队内最佳实践的代码
  • ......

在网上看到一张图很有意思，分享给大家

用还是不用 ESLint ，这不是一个问题

  • 没有使用eslint时，代码需要靠人工检查，格式乱七八糟，运行起来有大量的bug，团队内部充满着不愉快
  • 使用eslint后，代码靠机器检查，格式统一，运行起来无明显的bug，团队内充满着快活的气息

开始

先决条件：Node.js (>=6.14), npm version 3+。

mkdir eslint-test // 创建eslint-test文件夹
cd eslint-test // 进入文件夹
npm init -y // 初始化项目
npm install eslint --save-dev // 安装eslint

初始化eslint

./node_modules/.bin/eslint --init

出现如下提示

You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y)

翻译如下

你也可以直接使用'npm init @eslint/config'来运行这个命令。 需要安装以下软件包: @eslint / create-config 可以继续了吗?(y)

回复y即可

How would you like to use ESLint? … 
  To check syntax only
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style

翻译如下

你想如何使用ESLint?

只检查语法

❯检查语法并发现问题

检查语法、发现问题和加强代码风格

我们选择第二个，检查语法并发现问题

 What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

翻译如下

你的项目使用什么类型的模块?.．.

❯JavaScript模块(import/export) // es6的import/exports

CommonJS(require/exports) // node使用的require/exports

这些都不是

我们使用es6相关的，JavaScript模块

Which framework does your project use? … 
❯ React
  Vue.js
  None of these

翻译如下

你的项目使用哪个框架?

react

Vue.js

❯这些都不是

本次我们只是测试，不涉及具体的框架。后续大家使用框架的时候可以根据自己需求选择

 Does your project use TypeScript? › No / Yes

翻译如下

你的项目使用TypeScript吗? 否 / 是

本次我们的研究不涉及到TypeScript，选否，后续我们会在TypeScirpt部分的讲解中探究eslint+TypeScirpt的集合

Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)

✔ Browser
✔ Node

翻译如下

你的代码在哪里运行?…(按<空格>选择，<a>切换全部，<i>反转选择)

✔ 浏览器

✔ Node

全选就行

 What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON

翻译如下

您希望您的配置文件采用什么格式?

❯JavaScript

YAML

JSON

用什么方式来做配置，个人喜好是JavaScript，毕竟是前端嘛，根据自己喜好来就行，都差不多

ESLint 支持几种格式的配置文件：

  • JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
  • YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
  • JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许JavaScript 风格的注释。
  • (弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
  • package.json - 在 package.json 里创建一个eslintConfig属性，在那里定义你的配置

如果同一目录下有多个配置文件，ESlint会根据优先级只加载一个配置，优先级如下：

.eslintrc.js

.eslintrc.yaml

.eslintrc.yml

.eslintrc.json

.eslintrc

package.json

流程走完后，就可以看到项目根目录下多出了一个.eslintrc.js文件。在此文件中新加两条规则

module.exports = {
    "env": {  // 指定运行环境
        "browser": true, 
        "es2021": true, 
        "node": true
    },
    "extends": "eslint:recommended", // 继承的已有配置文件
    "overrides": [ // 为特定类型的文件指定处理器
    ],
    "parserOptions": { // 解析选项
        "ecmaVersion": "latest", // ECMAScript 最新版
        "sourceType": "module" // 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
    },
    "rules": { // 制定具体规则
    +   "no-console": 'warn',  // console 报警
    +   "quotes": ['error', 'single'] // 引号必须单引号
    }
}

此时我们在项目根目录创建index.js，写入如下代码

const a = "123";
console.log(a);

const b = 'hello world';

然后执行命令

npx eslint index.js

输出如下

/Users/xx/eslint-test/index.js

1:11 error Strings must use singlequote quotes

2:1 warning Unexpected console statement no-console

4:7 error 'b' is assigned a value but never used no-unused-vars

✖ 3 problems (2 errors, 1 warning)

1 error and 0 warnings potentially fixable with the --fix option.

翻译如下

/User/xx/eslint-test/index.js

1:11 报错 字符串必须使用单引号 quotes

2:1 警告 异常控制台语句 no-console

4:7 报错 'b' 赋值但从未使用 no-unused-vars

✖ 3 问题 (2 报错, 1 警告)

1 报错 和 0 警告 可能通过 --fix 选项修复.

可以看到有三个问题，前两个问题对应我们在.eslintrc.js中刚加的规则。第三个却很奇怪，我们并没有加这个规则，这是为什么呢？

这时肯定有聪明的同学说，刚探究.eslintrc.js文件时，有一个extends字段，表示继承的

  'extends': 'eslint:recommended', // 继承的已有配置文件

没错，这里代表我们的继承eslint:recommended这个规则。这个规则的具体内容可以看官方文档 eslint:recommended

我们可以看到输出最后一句提示我们我们的错误可以通过--fix选项修复，what？还有这么好的事情么，那我代码是不是可以随便写了，反正都能帮我修复。实际并不是的，我们输入命令修复试试

npx eslint index.js --fix

输出如下

/Users/xx/eslint-test/index.js

2:1 warning Unexpected console statement no-console

4:7 error 'b' is assigned a value but never used no-unused-vars

✖ 2 problems (1 error, 1 warning)

翻译如下

/User/xx/eslint-test/index.js

2:1 警告 异常控制台语句 no-console

4:7 报错 'b' 赋值但从未使用 no-unused-vars

✖ 2 问题 (2 报错, 1 警告)

此时查看index.js，可以发现文件内容变成如下

const a = '123';
console.log(a);

const b = 'hello world';

可以发现，eslint的--fix选项只能修复格式问题，并不能帮我们更正逻辑问题。

avatar
文章
阅读
粉丝