关于ESLint的学习使用

一、安装使用ESLint
二、ESLint配置文件解析
- 关于env配置
- 关于extends属性
- 关于parserOptions配置
- 关于rules配置
- 关于globals配置
三、ESLint配置注释

一、安装使用ESLint

初始化package.json

yarn init --yes

安装ESLint

yarn add eslint --dev

我们先写一些有问题的代码

// 01-error.js
const foo = 123
function fn () {console.log('hello')console.log('world')
}fn(
syy()

安装ESLint后会给我们提供一个eslint的cli程序，我们可以通过yarn或者npx直接调用，后面需要指定检测的文件地址，也可以使用通配符的形式批量检测。

yarn eslint ./01-error.js // yarn eslint ./**.js

报出错误信息，提示我们执行eslint --init创建eslint的配置文件

yarn eslint --init

创建eslint配置文件需要回答一些问题，以下我省略了部分简单的问题。

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 // 检测语法错误、发现问题代码、校验代码风格What type of modules does your project use? ... // 使用哪种modules
> JavaScript modules (import/export) // ES ModuleCommonJS (require/exports)  None of these   // 测试代码中没用到modules，选这个Which framework does your project use? ...  // 使用哪种框架
> ReactVue.jsNone of theseHow 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 // 谷歌的代码风格What format do you want your config file to be in? ... // 你的配置文件想要以何种形式存放，这里我选javaScript
> JavaScriptYAMLJSONWould you like to install them now with npm? » No / Yes // 因为刚才我们选择的Standard风格需要用到一些npm插件，这里询问是否安装，选择yes

之后项目根目录下就会多出一个.eslintrc.js文件，也就是eslint的配置文件。

重新执行yarn eslint .\01-error.js

指出了我们有一处问题代码，但并不能直接指出问题出在哪里，将问题代码中的括号补上，再次执行eslint。

发现了四个错误，并提示有两个错误可以通过加上–fix参数解决，执行yarn eslint ./01-error.js --fix

代码风格的问题自动帮我们解决了，只剩一个从未使用的变量问题和一个未定义的函数，将它们删除后，代码中就没问题了。

以上就是对eslint的简单使用。

二、ESLint配置文件解析

前面我们通过eslint --init创建了eslint的配置文件，正常情况下，我们是不会手动去修改这个文件，但是如果我们需要开启或者关闭某些校验规则的时候，这个配置文件就会非常重要。

配置文件内容如下：

// 这里是以CommonJS的形式导出了一个对象
module.exports = {// JavaScript在不同的运行环境下是有不同的api可以调用，这些api很多时候都是以全局成员的方式去提供出来
// 例如浏览器环境中我们可以直接去使用window和document对象，而在nodeJS环境中，却不存在这些对象
// 这个env属性的作用就是标记当前代码最终的运行环境，ESLint会根据环境信息来判断某一个全局成员是否是可用的
// 从而避免代码中使用到不存在的成员env: {// 一旦开启了某环境，那么这个环境中的所有全局成员，都允许被使用browser: true, es2021: true},extends: ['standard'],parserOptions: {ecmaVersion: 12},rules: {}
}

关于env配置

我们尝试修改env中的browser为false，然后写一段使用了document对象的代码，例如document.getELementById("#abc")，按理来说就会提示相应的错误信息。

执行eslint后，提示error Strings must use singlequote quotes，并没有报出document未定义的错误。

这是因为我们在生成ESLint配置的时候，我们选择的是standard风格，最终我们的配置也就继承了standard风格中的配置，而在standard风格中额外做了一些配置，所以这个时候document、window在任何环境都是可以使用的。

我们可以找到standard的配置，路径为：node_modules/eslint-config-standard/eslintrc.json

在其中通过globals选项，将三个对象设置为了全局只读成员，而我们当前项目的配置又继承了这里，所以修改browser：false就没办法影响到document成员的使用。

那我们就可以换一个browser环境下的全局成员去使用，例如alert。

// 02-config.js
alert("111")

执行yarn eslint ./02-config.js

提示错误信息error 'alert' is not defined no-undef 'alert’未定义，这就证明env属性的作用就是根据环境来判断全局成员是否可用。

env可以设置的环境大概有以下这些，需要注意的是，这些环境并不是互斥的，也就是说我们可以同时开启多个不同的环境。

关于extends属性

extends属性就是用来继承一些配置，例如我们这里使用的standard，这也是社区中非常常用的共享配置，很多时候如果我们需要在多个项目中共享一个ESLint配置，我们可以去定义一个公共的配置文件，然后在这里继承就可以了。

这个属性值是一个数组，也就是说我们可以继承多个共享配置。

关于parserOptions配置

这个属性的作用是用来设置我们语法解析器的相关配置。

我们都知道ESMA近几年发布了很多新的语法，例如let、const这些关键字，这个配置的主要作用就是控制是否允许某一个ES版本的语法。

我们尝试修改其为如下：

parserOptions: {ecmaVersion: 5
}

这样我们应该就没有办法去使用ES6中的新特性了。

// 02-config.js
// 通过const定义一个变量
const foo = 123

执行yarn eslint ./02-config.js，报出错误信息如下：

error  Parsing error: sourceType 'module' is not supported when ecmaVersion < 2015. Consider adding `{ ecmaVersion: 2015 }` to the parser options

这说的是在ECMAScript版本低于2015的情况下，sourceType不能是“module”，因为ES Module是ES2015的新特性。

出现这个错误的原因同样是因为在standard的配置中将sourceType设置为了“module”，我们将standard配置中的sourceType的值改为“script”。

然后再次运行eslint，提示Parsing error: The keyword 'const' is reserved

这就是parserOptions属性的作用，注意，parserOptions影响的只是语法的检测，不代表某个成员是否可用，如果是ES2015提供的全局成员例如Promise还是需要env中的ES6进行控制。

我们将eslint配置进行如下修改：

env: {es6: false
},
parserOptions: {ecmaVersion: 2015
}

此时es6的全局成员应该就无法使用了，而对es6新特性的语法检测是不会有问题的。

关于rules配置

rules配置就是配置eslint中每个校验规则开启或关闭，示例：

rules:{// 属性名都是内置的规则名称，属性值有三种，分别是off、warn、error// off代表关闭规则，warn表示发出警告，error表示报出错误"no-alert": "error"
}

使用eslint执行此代码alert("111")，此时就会报出错误。

在eslint官网上给出了所有的内置的可用的校验规则列表，可以在需要使用的时候进行查看，而我们目前使用的standard风格当中已经开启了很多规则，基本也满足了所有需求，所以如果有需求的情况下，可以根据自己的需求来进行配置。

关于globals配置

这个配置就是用来额外声明我们可以在代码中使用的全局成员，上面我们看到standard风格中的配置就是通过globals声明了三个全局成员。

例如我们有一段代码jQuery("#abc")，然后运行eslint。会提示'jQuery' is not defined

配置globals

globals:{"jQuery":"readonly"}

再次执行eslint，就不会有报错了。

三、ESLint配置注释

配置注释就是将配置通过注释的方式直接写在js文件中，然后再去执行代码的校验。

http://eslint.cn/docs/user-guide/configuring#configuring-rules

例如我们有一段代码需要写成这样：const str = '${name} is a boy'，而standard风格是不允许这样使用字面量占用符的，执行eslint，报出错误Unexpected template string expression no-template-curly-in-string

我们就可以使用eslint提供的// eslint-disable-line禁用这一行代码中所有的规则

const str = '${name} is a boy' // eslint-disable-line

再次执行eslint，运行正常，没有报错。但是使用“eslint-disable-line”虽然可以使eslint忽略这一行代码的检测，但是如果这一行代码有多个问题存在，所有的问题代码都不会被检测了。

所以更好的办法是指定忽略这一行的特定规则

const str = '${name} is a boy' // eslint-disable-line no-template-curly-in-string

这样就只会忽略这一行代码中的no-template-curly-in-string规则，对其他的规则正常检测。

有需要的读者可以点击这里查询更多配置注释信息。

关于ESLint的学习使用相关推荐

vuejs项目开发环境搭建（ESlint安装）
vuejs项目开发环境搭建(ESlint安装) vuejs项目开发环境搭建,有时候需要安装ESlint! eslint对ES6语法支持更好,可以通过eslint在团队开发中快速统一ES6的语法,精简代 ...
我的2017年前端之路总结
原文首发于我的博客年末了,赶着刚考完两门考试,在最后4门考试来临之前抽空写一下今年的小结. 今年格外忙.忙完本科毕设,又马上投入了研究生实验室的搬砖生涯.跟去年一样,列个今年的学习成果清单: 过去的 ...
node基础学习--eslint配置与规则说明
1.概念 JSlint 一直是前端\nodejs代码检测工具 2.实践 {"extends": "standard","rules": {/ ...
eslint 学习笔记
本文同步自我的博客 https://joeray61.com 安装局部: npm install eslint --save-dev 全局: npm install eslint -g 初始化 es ...
学习ESLint的规则配置，ESLint语法检测配置说明
ESLint的默认规则有些比较反人类: 通过vue-cli的代码末尾不能加分号 ; 编辑代码中不能存在多行空行大括号,中括号,左右的空格限制 var的空声明等忽略一项使用/* eslin -di ...
基于 TS 的 React 模板项目，集成 eslint sass，采用 StandardJS 代码风格，包含自动注册组件等各项功能，新建项目或 React 学习必备
react-typescript-sass-standard-template 项目简介由于 Create React App 脚手架创建的项目过于简陋,没有集成诸如 eslint 等工具,致使每次 ...
深入浅出eslint——关于我学习eslint的心得
很多人在引入eslint后,发现项目中出现了很多错误提示,看着让人的强迫症都犯了,于是就放弃了使用.可小编在这却还是要说在项目中要用到eslint,尤其是在项目一开始构建搭建的时候,就约定好,就不会再 ...
Vue学习笔记7 - 在Vscode中配置Vetur，ESlint，Prettier
俗话说得好,工欲善其事必先利其器,想要熟练开发Vue项目,一个好的开发环境就是必不可少了,这里我就选用了vscode作为开发工具,毕竟vscode免费,还跨平台,应用范围也广,著名的vue开源项目:后 ...
前端学习（2163）：安装clint错误和ESlint规范

关于ESLint的学习使用

关于ESLint的学习使用

一、安装使用ESLint

二、ESLint配置文件解析

关于env配置

关于extends属性

关于parserOptions配置

关于rules配置

关于globals配置

三、ESLint配置注释

关于ESLint的学习使用相关推荐

最新文章

热门文章