原来 eslint 如此好用

myboy
1,202 阅读12分钟

eslint 官网：eslint.org/

学习过 javascript 的人都知道，JavaScript 是一种很随便的语言，比如字符串既可以用单引号，又可以用双引号；一句代码结尾既可以加分号，又可以不加分号。JavaScript 语言的这些特性导致了不同的人写的 js 代码风格不同。如果是多人共同开发的项目，会导致整个项目中代码风格不统一，很乱，虽然它不影响代码的执行。

为了既能让项目中 js 代码风格统一，又不改变程序员写代码的习惯，eslint 就诞生了，eslint 可以为 JavaScript 代码制定规则，并且会自动为我们格式化代码。有了 eslint，程序员可以不用改变自己写代码的风格，在代码保存或 git 提交的时候，使用 eslint 就能自动为代码格式化，使整个项目的代码风格统一。

如果 eslint 仅仅只能为 js 制定规则，格式化 js 代码，那就太 low 了。eslint 还能管理 vue，angualr 等主流的前端框架代码，因此学习使用 eslint 使很有必要的。

接下来，让我带大家一步一步走进 eslint

环境准备

1、初始化 npm 项目

# 进入到新建的目录中，执行下面的命令来初始化一个 npm 项目
npm init

这一步会在目录下新建一个 package.json 文件

2、安装 eslint 的 npm 包

npm instll eslint --save-dev

这里的 --save-dev 意思是这个 eslint 是一个在开发时会用到的包，在发布后时不需要的，发布时不会将这个依赖打包

eslint 配置

生成配置文件命令

使用 eslint，需要有 eslint 配置文件，并配置自己需要的代码风格，使用命令的方式可以快速生成相应的配置文件

npx eslint --init

具体的配置过程

image-20210116133655087

image-20210116133836523

image-20210116133932688

image-20210116134023706

image-20210116134253417

image-20210116134452888

image-20210116134608253

image-20210116134709425

image-20210116134746635

image-20210116135109617

image-20210116135159961

生成的配置文件

现在已经自动生成了 eslint 配置文件 .eslintrc.json，里面有我们上面配置的规则，如下

{
    "env": {
        "browser": true,   // 允许运行在浏览器
        "es2021": true,    // 允许使用es2021新特性
        "node": true       // 允许在node上允许
    },
    "extends": "eslint:recommended",  // 推荐的代码风格
    "parserOptions": {                // eslint解析器
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {                         // 代码自定义风格
        "indent": ["error", 4],
        "linebreak-style": ["error", "windows"],
        "quotes": ["error", "single"],
        "semi": ["error", "never]
	}
}

"extends": "eslint:recommended" 意思是使用推荐的代码风格， rules page 页面中 ✓ 的配置将会被启动

rules 里是我们自己定义的代码风格，里面的 "quotes" 和 "semi" 是 eslint 规则的名字，它的第一个值是规则的报错等级，它可以是如下这些值

  • "off" 或 0 - 不使用这项规则
  • "warn" or 1 - 警告，不影响代码运行
  • "error" or 2 - 错误，阻止代码运行

这三个错误等级允许你细粒化的控制 eslint 的应用规则

关闭不需要的配置

在生成配置文件的过程中，有一步是让你选择你使用的是什么类型的换行符，在多人协作的项目中，选择什么都是不合适的，因为项目中可能有人用 windows 有人用 mac，而这两种类型的操作系统使用的换行符是不一样的，windows 使用的是 CRLF，mac 使用的是 LF，因此需要把这项检查关掉，否则必定有一类人换行出是报错的

根据上一节中报错等级的说明，只需把相应规则的第一个参数改成 "off" 或 "0" 即可，配置如下

"rules": {                         // 代码自定义风格
    // ...
    "linebreak-style": ["off", "windows"],
    // ...
}

eslint 代码检查和修复

1、首先，在项目根目录下新建一个 index.js 文件，并写上如下代码

let aaa = "hello eslint";

function sayHello(){
    		console.log("hello eslint");
}

写完或修改完记得保存，否则 eslint 会检查未保存之前的代码

2、运行 eslint 来检查 index.js 中的代码

npx eslint .\index.js

image-20210116142258782

除了我们自己配置的 quotes 和 semi 报错，还有 no-unused-vars 和 no-mixed-spaces-and-tabs 报错，这是因为我们使用了推荐的代码风格引起的，即配置文件中的 "extends": "eslint:recommended" 这段代码

3、使用 eslint 修复代码

npx eslint .\index --fix

image-20210116142537132

image-20210116142650069

这里注意一下，因为之前配置文件中有配置缩进用四个空格，所有如果缩进不是四个空格，那使用 --fix 是可以进行修复的

而这里情况有点特殊，这里是因为缩进即使用了空格，又使用了 tab，所以 --fix 修复不了

5、手动修复

image-20210116151415212

再次执行 eslint 代码修复命令

npx eslint ./index.js --fix
image-20210116151440093

image-20210116151509388

代码成功修复，没有报任何错误

vscode 使用 eslint 插件

学习了上面几节内容，相信大家一定对 eslint 有了大致的了解，它可以使用命令的方式来检查找出不符合我们规定风格的代码，并进行修复。现在，我介绍一种比用命令行方式来检查修复代码更加简单好用的方法，那就是 vscode 的 eslint 插件。

利用 eslint 插件，可以在我们开发的过程中就及时提示不规范的代码，并且可以使用插件的快速修复功能，十分的方便

这里要注意一点，有很多小伙伴会使用 prettier 插件来进行格式化代码，这里我建议把它关掉或卸载掉，因为既然要使用 eslint 格式化代码，那使用 eslint 插件即可，不需要其他插件，避免出现不可知的问题

安装配置插件

1、安装 eslint 插件

image-20210116140828115

2、配置 vscode 保存时自动修复代码

打开 vscode 设置，选择工作空间，然后打开配置文件

image-20210116161245609

在配置文件中填入如下配置

{
    "editor.codeActionsOnSave": { // 保存文件时做些事情
        "source.fixAll.eslint": true // 使用 eslint 来修复代码
    }
}

这个配置代码可以在 eslint 插件的介绍里面也可以找到

说明

这里推荐使用 workspace 的方式来配置 vscode，这样每个项目下都会自动生成一个 .vscode 目录，里面是一个 setting.json 文件，存放的是当前项目的 vscode 相关配置，这样做有两个优点：

  • 实现配置隔离，不同项目的配置不相同，互不冲突
  • 多人协作时可以将这个配置上传到 git 中，所有人都使用同一份配置，更有利于开发

测试

还是用前面用到的 index.js 中的代码

image-20210116162726401

可以看到有问题的代码直接会用红色波浪线画出来，鼠标放在红色波浪线上，可以直接看到报错的原因

image-20210116163022064

由于前面配置过保存时修复，因此直接快捷键 ctrl + s 保存代码，eslint 插件自动帮我们修复了代码

image-20210116163308321

但是和命令行方式修复一样，有些问题是修复不了的

因为这里缩进中既有空格，又有tab，所以缩进问题需要手动进行修复，如果只有 tab 或 只有空格，eslint 插件也会自动帮我们修复

no-unused-vars 报错问题

方法一：

现在还有两处报错，错误原因是 aaa 变量和 sayHello 函数定义了，但没有用到，也就是多余的

image-20210116163636686

对与这种问题，我们可以把多余的代码注释掉，或者在需要的地方使用它们，这类问题也就没有了

方法二：

如果对 promise 有所了解，那肯定知道 promise 有两个参数，一个是 resolve，一个是 reject，但是有些时候会用不到这个 reject 参数，如下图所示

image-20210116171639683

因为没有用到 reject 参数，但是如果去掉这个 reject 参数这个 promise 又感觉缺了点什么，因此可以去掉这一项代码检查

根据 eslint 的提示，可以知道这种规则的 name 是 no-unused-vars，在配置文件中的"extends": "eslint:recommended"属性开启了 no-unused-vars 规则 ，于是在配置文件中可以将他关闭

"rules": {
    // ......
    "no-unused-vars":[
        "error",{"vars": "all","args": "none"}  // 对变量进行检查，不对参数进行检查
    ]
}

查看官方文档，可以知道 "no-unused-vars" 的第二个参数可以是个字符串，也可以是个对象。

"vars" 默认值是 "all"，"args" 默认值是 "after-used"

vars（变量）

vars 这个选项有两种设置

  • "all"：表示对所有变量进行检查，包括本地变量，全局变量和 function
  • "local"：表示只对本地变量进行检查

args（参数）

args 这个选项有三种设置

  • "after-used"：只对最后一个用到过的参数之后的参数进行检查
  • "all"：对所有参数进行检查
  • "none"：不对参数进行检查

eslint 检查 vue 代码

eslint 不仅仅可以检查格式化 js 代码，还可以检查 vue 代码，只需要少量的配置就可以使用它

这里需要用到 vscode 的 eslint 插件，更方便进行代码检查，这个插件在上一节有介绍

环境搭建

创建一个 vue 项目

vue create vue-eslint-example

选择第一个就好，vue 会自动为我们安装 eslint

image-20210117150229884

查看 package.json

vue 自动为我们安装了 eslint 相关的依赖，继续往下看

image-20210117150525011

并且在 package.json 中就可以配置 eslint

image-20210117150606894

当然我们可以在这里面进行配置我们需要的风格，但是为了项目的结构更加清晰，我还是喜欢把 eslint 单独配置在一个配置文件中

生成配置文件

在 vue 项目创建的时候，如果有选择安装 eslint，vue-cli 会自动为我们安装 eslint 相关的依赖，并且可以直接在 package.json 中配置 eslint，但是为了使项目更加清晰，我还是选择使用 eslint 命令单独生成一个配置文件，在这个里面配置 eslint。当然我们也可以直接在 package.json 中配置，看个人习惯了

当然，我们不必担心这两个配置会冲突，因为 eslint 读取配置文件时有优先级的：

.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json

package.json 的优先级时最低的，放心大胆创建其他类型的配置文件，但是最好把 package.json 中的配置去掉，因为它是多余的，尽管不会影响到我们

然后使用命令生成 eslint 配置文件

npx eslint --init

命令的各种选项还是和前面 [eslint配置](##eslint 配置) 这一节大体一样，除了一小部分需要修改，如下：

这里因为用到了 vue 框架，咱们就选 Vue.js

image-20210117151625273

这里我们就选用比较流行的风格吧，前面只是新手演示，开发中一般都会选择这个

image-20210117151746606

这里比较流行的风格有三种，我们可以点进对应的链接中查看它们的风格

image-20210117152220022

根据官方文档，这里简单的罗列一下这三种风格的不同

  • Airbnb：字符串默认使用单引号，结尾要加分号
  • Standard：字符串默认使用单引号，结尾不加分号
  • Google：字符串使用单引号，结尾要加分号

因为我的习惯使结尾不加分号，字符串使用单引号，因此我会选择 Standard 这种风格

最后就生成了我们所需要的配置文件 eslintrc.json

修改配置文件

在生成的配置文件中，有如下配置

"extends": [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    "plugin:vue/essential",
    "standard"
    // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
]

首先这个 "extends" 配置的是一些通用的规则集

  • "plugin:vue/essential"：vue 官方制定的一些规则，类似的还有 "plugin:vue/recommended"，每种配置对代码的要求不同，更多的 vue plugin 可以看官方文档 eslint-plugin-vue
  • "standard"：流行的 js 代码规范，这个是我们前面手动选择的

这里的 plugin 建议使用 recommended，他对 vue 代码的要求更高，例如它规定了 html 标签中 v-if 在其他属性的前面，每个属性独占一行，<sctipt> 中 methods 和 data 的位置关系等要求，因此这里把 essential 改成 recommended 会更好。

"extends": [
    "plugin:vue/recommended",
    "standard"
]

vscode 配置

在 vscode 中，如果我们要使用 eslint 插件，我们还需要对 vscode 进行配置，还是推荐使用 workspace 的配置模式，让 eslint 在保存文件时自动为我们 fix 代码

我们看一下 eslint-plugin-vue 官方文档是怎么说的

Visual Studio Code

Use the dbaeumer.vscode-eslint (opens new window)extension that Microsoft provides officially.

You have to configure the eslint.validate option of the extension to check .vue files, because the extension targets only *.js or *.jsx files by default.

Example .vscode/settings.json:

{
"eslint.validate": [
 "javascript",
 "javascriptreact",
 "vue"
]
}

If you use the Vetur plugin, set "vetur.validation.template": false to avoid default Vetur template validation. Check out vetur documentation (opens new window)for more info.

意思是说，eslint 默认只对 *.js 或 *.jsx 文件有效，如果要格式化 vue，需要配置 eslint.validate

并且，如果 vscode 有装 Vetur 插件，还应该配置 "vetur.validation.template": false，以避免两者冲突，因为 Vetur 是vscode 中 vue 开发必备的插件（具体代码高亮等特性），所以这段配置是一定要写的

因此，最后的配置如下

{
    // 保存时使用 eslint fix 代码
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

    // 让 eslint 检查格式化 vue 代码，默认只检查 js 代码
    "eslint.validate": [
        "javascript",
        "vue"
    ],

    // 关闭 Vetur 插件的 lint 功能，使用 eslint 进行 lint，避免冲突
    "vetur.validation.template": false
}

这项都配置好，打开 .vue 文件，写不规范的代码，eslint 直接就能识别到

image-20210117171937370

我们保存文件，eslint 会自动格式化代码

image-20210117172101459

小结

关于 eslint 的使用方法，这里就介绍这么多，还有很多的用法在这里没有讲到，就要靠大家自己摸索。我认为学习最好的方法就是阅读官方文档，培养阅读和理解的能力，再结合自己的动手能力，那学习效率就会很高

avatar
文章
阅读
粉丝