eslint知识分享

1.认识ESLint

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：

ESLint 使用 Espree 解析 JavaScript。
ESLint 使用 AST 去分析代码中的模式
ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

2.为什么要使用ESLint

下面一起来思考一个问题：Lint 工具对工程师来说到底是代码质量的保证还是一种束缚？

然后，我们再看看 ESLint 官网的简介：

代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中

我的理解是JS作为一门动态语言，因为缺少编译过程，有些本可以在编译过程中发现的错误，只能等到运行才发现，这给我们调试工作增加了一些负担，而 Lint 工具相当于为语言增加了编译过程，在代码运行前进行静态分析找到出错的地方。

代码千万行，安全第一行；前端不规范，同事两行泪

避免低级bug，找出可能发生的语法错误。使用未声明变量、修改 const 变量……
提示删除多余的代码。声明而未使用的变量、重复的 case ……
确保代码遵循最佳实践。可参考 airbnb style、javascript standard
统一团队的代码风格。

3 ESLint安装及使用

简单安装配置即使用

1、先初始化项目：npm init -y //初始化 package.json,若已有则不需要执行
2、npm i -D eslint    //项目安装eslint包
3、npx eslint --init //进行eslint的代码检查规范配置，即生成配置文件
4、npx eslint ./需要检查语法的文件路径    //对应文件代码规范检查,命令行输出对应不规范内容
5、npx eslint ./需要检查语法的文件路径 --fix  //对应文件代码修复,命令行输出不能自动修复的不规范内容

3.1 ESLint安装

安装eslint包以npm为例,推荐项目安装方式

npm i eslint -D (推荐)

npm i eslint -g

当然你也可以在创建vue脚手架时选中有eslint的选项进行安装
注意安装结果：node_moduels 中下载了很多包
- .bin/eslint.cmd 脚本文件，内部通过 nodejs 执行 eslint运行包 的代码，即方便使用命令行进行eslint检查和修复
- @eslint包 用来规范 eslint配置文件
- eslint开头的包 是 eslint运行包，包含eslint代码

3.2 生成ESLint配置文件

ESLint 可以创建独立的配置文件 .eslintrc.js，也可以直接在 package.json 中配置

执行 node_modules/.bin 文件夹里的 eslint脚本 来创建配置文件
- 包含完整脚本路径的命令：./node_modules/.bin/eslint --init
- 也可以用 npx 来执行 (推荐)：npx eslint --init
  
  （npx是随node一起安装的，能去 .bin 目录 里找目标脚本文件，简化执行脚本的语法）
- eslint全局安装则直接可以用该命令：eslint --init
创建配置文件过程中，需要选择配置：

执行结果：

创建了配置文件 .eslintrc.js

3.3 ESLint的执行

eslint检测：

命令：npx eslint ./需要检查语法的文件路径 （全局安装eslint则可以直接使用eslint ./需要检查语法的文件路径）
如果违法规范，会将错误或者警告提示到终端，说明 eslint 工作正常

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nBVF1iqw-1647849438495)(./image/3.3-1.png)]

eslint修复：

命令：npx eslint ./需要检查语法的文件路径 --fix （全局安装eslint则可以直接使用eslint ./需要检查语法的文件路径 --fix）

复尽可能多的问题。修复只针对实际文件本身，而且剩下的未修复的问题才会输出。不是所有的问题都能使用这个选项进行修复

4.ESLint配置文件入门

【官网】eslint.bootcss.com/docs/user-g…

4.1 配置文件格式

我们通过 npx eslint --init 创建配置文件时，有提供配置文件的格式给我们选择：
- .js / .yaml / .json

eslint 加载的优先级是： js > yaml > json，所以我们最好选择 js格式

4.2 JS格式使用模式

我们注意到配置文件内部使用的 module.exports 导出配置数据
这是因为我们在前面添加配置文件时，选择了 CommonJS

如果选择了 JavaScript modules，那么就会是使用 export 导出配置数据
推荐：CommonJS
- 由于我们开发时，一般使用的是 vue脚手架，内部webpack打包默认用的是CommonJS
- 所以 ESLlint配置文件应尽可能与它保持一致

4.3重点配置项

4.3.1 root

我们有如下目录结构，此时在根目录运行 ESLint，那么我们将得到两个配置文件 .eslintrc.js（项目级配置）和 src/.eslintrc.js（目录级配置），这两个配置文件会进行合并，但是 src/.eslintrc.js 具有更高的优先级。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-90XdmgXX-1647849438497)(./image/4.3.1-1.png)]

"root": true

默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果发现配置文件中有 “root”: true，它就会停止在父级目录中寻找。

4.3.2 parse配置

解析器选项可以在 parserOptions 属性设置。设置解析器选项能帮助 ESLint 确定什么是解析错误，所有语言选项默认都是 false。如下：

{// 解析器类型// espima(默认), babel-eslint, @typescript-eslint/parse,vue-eslint-parser"parse": "esprima",// 解析器配置参数"parseOptions": {// 代码类型：script(默认), module"sourceType": "script",// es 版本号，默认为 5，也可以是用年份，比如 2015 (同 6)"ecamVersion": 6,// es 特性配置"ecmaFeatures": {"globalReturn": true, // 允许在全局作用域下使用 return 语句"impliedStrict": true, // 启用全局 strict mode"jsx": true // 启用 JSX},}}

ESLint 解析器解析代码时，可以指定用哪个 js 的版本
注意：这里是指定检查时按照哪个js版本语法检查，但这里不包含全局变量
全局变量需要通过前面的 env 节点配置

4.3.3 globals节点

当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。

赋值为true表示可以读取，可以修改

赋值为false表示可以读取，不能修改

 "globals": {"_": true  // 可以读取，可以修改"$": false // 可以读取，不能修改}

也可以使用 globals 节点来手动配置全局成员
注意：这个节点需要手动添加，默认是没有的
但是globals 中一个个的进行声明未免有点繁琐，这个时候就需要使用到 env

4.3.4 env节点

"env": {browser: true,commonjs: true,es2021: true,es6: true, // 启用 ES6 语法支持以及新的 ES6 全局变量或类型node: true, // Node.js 全局变量和 Node.js 作用域jquery: true // jQuery 全局变量
}

由于 ESLint 的各种规范中，一般都不允许使用未在页面内声明的成员
而开发中经常会用到一些运行环境自带的 api，如：
- 浏览器中的 window/document 等
- jquery中的$等
- nodejs中的**__dirname** 等
- es2021中的 WeakRef 等
所以要告诉eslint，当前代码是运行在哪些环境中，这样检查时就不会报错了

查看源码可以发现，其预设变量都引用自 globals 包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dl7QR4XO-1647849438498)(./image/4.3.4-1.png)]

4.3.5 rules 节点

"rules": {'indent': [2, 4], // 强制使用一致的缩进'eqeqeq': [2, 'always'], // 要求使用 === 和 !=='semi': [2, 'never'], // 要求或禁止使用分号代替 ASI 'quotes': [2, 'single']  // 强制使用一致的反勾号、双引号或单引号
}

ESLint 附带有大量的规则。你可以在rules选项中设置，设置的规则将覆盖上面继承的默认规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：

“off” 或 0 - 关闭规则
“warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
“error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

规则的本质

就是**【函数】**
我们可以通过看 ESLint 源码查看：
- eslint 内置285个规则，每条规则都是一个 create函数
- 在进行语法检查时，会将代码转成另一种

4.3.6 extends 节点

扩展就是直接使用别人已经写好的 lint 规则，方便快捷。扩展一般支持三种类型：

{"extends": ["eslint:recommended","plugin:es5/no-es2015","eslint-config-standard", // 可以简写成standard]
}

eslint: 开头的是 ESLint 官方的扩展，一共有两个：eslint:recommended 、eslint:all。
plugin: 开头的是扩展是插件类型，也可以直接在 plugins 属性中进行设置，。
最后一种扩展来自 npm 包，官方规定 npm 包的扩展必须以 eslint-config- 开头，使用时可以省略这个头，上面案例中 eslint-config-standard 可以直接简写成 standard。

4.3.7 plugins 节点

虽然官方提供了上百种的规则可供选择，但是这还不够，因为官方的规则只能检查标准的 JavaScript 语法，如果你写的是 JSX 或者 Vue 单文件组件也或者是html文件，ESLint 的规则就开始束手无策了。

这个时候就需要安装 ESLint 的插件，来定制一些特定的规则进行检查。ESLint 的插件与扩展一样有固定的命名格式，以 eslint-plugin- 开头，使用的时候也可以省略这个头。

"plugins": ["vue"  //    eslint-plugin-vue 此插件用来识别.vue文件中的js代码"html" //     eslint-plugin-html此插件用来识别.html文件中的js代码"es5"  //      eslint-plugin-es5此插件用来识别js代码中的es6以上代码
]

前面在extends 中说了extend中也可以添加插件，如下格式

{"extends": ["plugin:es5/no-es2015"]
}

"plugin:${pluginName}/${configName}"

对照上面的案例，插件名(pluginName) 为 es5，也就是之前安装 eslint-plugin-es5 包，配置名(configName)为 no-es2015，

看插件源码就会发现配置名就是插件中config配置项中的对象名，配置对象中就包含了使用对应插件并增加了该插件的规则扩展

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mILsgGkH-1647849438500)(./image/4.3.7-1.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zokOQfRA-1647849438500)(./image/4.3.7-2.png)]

配置名是插件配置的 configs 属性定义的，这里的配置其实就是 ESLint 的扩展，通过这种方式即可以加载插件，又可以加载扩展

注意：并不是每个插件都可以这样配置

5.eslintignore 文件

1、定义和作用

在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。

2、忽略规则

.eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。如：
```
/*.js      //忽略js结尾的文件检测
```

被忽略的文件被检测则会返回如下警告，并不进行检测

6.Eslint编辑器插件的使用

1、安装ESLint编辑器插件（Prettier插件、Prettier Eslint插件也都可以实现）

2、配置settings.json

1）点击文件 -->首选项 -->设置

2）进去后点击右上角，打开settings.json

3）将下面代码复制进去并保存退出

  "eslint.enable": true, // 根据eslint规则进行检查// 保存自动修复"editor.codeActionsOnSave": {"source.fixAll.eslint": true},// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,// eslint检测添加项，eslint默认只检测js文件"eslint.validate": ["javascript","javascriptreact","html","vue"],

7.结合 Git Hooks，阻止不规范的代码提交

1、使用Git Hooks在 git commit 前执行 eslint 检查 js 文件，检查通过才可继续

npm i -D husky  // 安装 husky
npm i -D lint-staged // lint-staged

2、然后再package.json文件中加入如下配置：

package.json:

{"scripts": {"precommit": "lint-staged"},"husky": {"hooks": {"pre-commit": "npm run precommit"}},"lint-staged": {"*.js": ["eslint","git add"]}
}

3、此时尝试 git commit 代码，如果 eslint 检查未执行，则还需在项目根目录下的 .git / hooks 中添加文件 pre-commit：

#!/bin/sh
npm run precommit

npm run precommit
并执行如下命令，赋予 pre-commit 文件执行权限：

chomd +x pre-commit

这时候，再尝试 git commit 代码，就能正常执行 eslint 检查了，且检查通过之后会执行 git add；检查不通过则停止动作。
这就阻止了不规范代码的提交。

8.使用eslint会出现的问题

1、自动修复会导致代码最后修改人发生变化

解决方案：腾讯前端http://www.alloyteam.com/2020/03/14286/#prettyPhoto

代码，如果 eslint 检查未执行，则还需在项目根目录下的 .git / hooks 中添加文件 pre-commit：**

#!/bin/sh
npm run precommit

npm run precommit
并执行如下命令，赋予 pre-commit 文件执行权限：

chomd +x pre-commit

这时候，再尝试 git commit 代码，就能正常执行 eslint 检查了，且检查通过之后会执行 git add；检查不通过则停止动作。
这就阻止了不规范代码的提交。

8.使用eslint会出现的问题

1、自动修复会导致代码最后修改人发生变化

解决方案：腾讯前端http://www.alloyteam.com/2020/03/14286/#prettyPhoto

eslint基本知识自我总结相关推荐

java基础知识自我笔记。
位运算符 <<左移就是乘以2的移动位数次幂 ">>右移就是除以2的移动位数次幂 ">>>最高位用0补 ">>最高位补 ...
lombok依赖_公司来了个新同事不会用 Lombok，还说我代码有问题
新来的同事不会用 Lombok,所以会引发本文! 背景最近公司新来一个搞 Java 的同事,搞了半天项目还没有跑起来,后来叫我过去帮他看一下,然后指着红色的编译错误和我说是不是代码有问题.. 我顿时 ...
前端html css3修炼之道,Web前端工程师修炼之道（原书第5版）
Web前端工程师修炼之道(原书第5版) 作者:(美)珍妮弗·尼德斯特·罗宾斯(Jennifer Niederst Robbins) 著出版日期:2020年10月文件大小:179.64M 支持设备: ...
介绍下我的Phx框架-A Tiny assembled RESTful PHP Frame...
为什么80%的码农都做不了架构师?>>> 地址: https://github.com/phoenixg/phx Phx - A Tiny assembled RESTful ...
【GPT4】GPT4 官方报告解读
欢迎关注[youcans的AGI学习笔记]原创作品 [GPT4]GPT-4 官方报告解读 1. GPT-4 官方介绍 2. GPT-4 的性能 2.1 GPT-4 在各种学术和专业考试中的性能 2.2 ...
渡阡科技Edu——梦开始的地方
教育一词在百度百科的解释是这样的--教育(Education)狭义上指专门组织的学校教育:广义上指影响人的身心发展的社会实践活动."教育"一词来源于孟子的"得天下英才而教 ...
软件工程一位大三学生成功上大学的案例
[来信] 贺老师: 您好!我是一名大三的学生,我一直关注您的博客!今夜想打扰一下您,想跟您交流. 我喜欢上CSDN,也喜欢看您的博客.不过,作为老师的您,我感到十分的震撼!像你这么敬业,一心一意为学生 ...
海投的简历暴露了你的什么问题？
一次在投来的简历中选择了一份看似还不错的只是年龄大了些的简历,在约来面谈时问其是出于怎样的考虑而选择将简历投到我们公司的,应聘者的回答让我一开始没反应过来"我是海投的!",这是我第 ...
姚能伟：以邻盛智能为例，如何在行业大脑进行创新实践
报告内容摘要随着技术发展,未来一定是智慧的时代.为此我们提除了感知世界,透视数据,洞察未知为理念的新型技术探索与实践.依托多年项目经验与行业专业积累,形成了一些行业深度的解决方案.在实践过程中形成了 ...

eslint基本知识自我总结

eslint知识分享

1.认识ESLint

2.为什么要使用ESLint

3 ESLint安装及使用

3.1 ESLint安装

3.2 生成ESLint配置文件

3.3 ESLint的执行

eslint检测：

eslint修复：

4.ESLint配置文件入门

4.1 配置文件格式

4.2 JS格式使用模式

4.3重点配置项

4.3.1 root

4.3.2 parse配置

4.3.3 globals节点

4.3.4 env节点

4.3.5 rules 节点

4.3.6 extends 节点

4.3.7 plugins 节点

5.eslintignore 文件

6.Eslint编辑器插件的使用

7.结合 Git Hooks，阻止不规范的代码提交

8.使用eslint会出现的问题

8.使用eslint会出现的问题

eslint基本知识自我总结相关推荐

最新文章

热门文章