格式检查工具eslint

eslint是什么？

eslint是一个用于报告语法格式是否符合规范的工具，目的是为了提高代码的可读性和可维护性，它的原理是用AST去评估代码格式。特性是具有高可扩展性(可以自行添加规则)、完全可插入性(关于eslint的规则可以应用在多个地方)。

例如执行npm install eslint命令安装后，package.json下的devDependencies下会有eslint
在vscode中的扩展商店里会有eslint插件
对于gitlab的远端格式校验，则是运用gitlab ci runner里的eslint校验

那么package.json下的eslint、vscode里的eslint和ci runner里的eslint有什么区别？

首先，package.json里面的eslint仅适用于该package.json所属项目，这种方式应用于只是想局部引用eslint校验的情况(即仅仅是想在单个项目中引用格式校验)。

其次来看vscode里的eslint和ci runner里的eslint！

项目的代码规范校验通常由两部分构成：

基于git 钩子的校验
webpack中的eslint-loader校验器

用户安装了对应依赖，启动项目会触发webpack中的校验器，提交代码会触发git 钩子中设置的校验器，在此时，提交至远端的代码格式一般是安全的。代码格式能够满足校验规则的条件是安装了相应依赖后启动项目或执行提交操作，因此也会有无法触发校验器的盲区。具体分为以下两种情况：

不安装包（不下载node_modules）的情况
这种情况下webpack和eslint依赖不存在，对应的两个校验器本身也就不存在。从而使得推向远端的代码可能存在代码格式错误问题，为了防止这样的问题，需要gitlab中ci runner里的eslint开启远端的eslint校验。
安装了包，但是不启动不提交的情况
这种情况下eslint和webpack依赖安装了，项目没有启动，因此eslint-loader不触发校验。没有进行提交，因此不触发git钩子，没有触发eslint校验器。为了在本地也能够知道代码是否符合eslint规范，需要使用vscode里的eslint plugin，这个插件基于AST提供了本地校验的方法，安装完这个插件以后，会自动检测项目中js和jsx文件是否有不符合eslint规范的代码。
这时可以执行一些命令，例如按照.eslintrc.js(这个文件是在安装完插件后自动生成的，默认有一套规则，后续可以在这基础上添加自己的规则)配置规则自动改正demo.js中出现的不符合eslint规范的代码：eslint demo.js --fix

在vscode想要更方便的、不使用命令就能做到自动修复以及对多种文件的检测，需要在vscode首选项中的设置进行配置，每次保存文件的时候就可以根据.eslintrc.js配置规则来对多种类型的文件进行格式校验以及做一些简单的修复。

vscode里eslint plugin的自动化检测和简单的修复该怎么配置?

打开vscode里的设置
点开json形式下的设置
以下是eslint一些配置方式(在原有配置后面添加)：

(1) 一组语言标识符，指定要对其进行验证的文件，默认只有"javascript", "javascriptreact"两项，即仅对js与jsx文件进行eslint校验，如果想要对更多的文件进行eslint校验，需要手动配置，我的项目运用到了ts，tsx和vue类型文件，以下是我的配置，后面追加了ts，tsx和vue文件：
```
"eslint.validate": ["javascript", "javascriptreact","typescript","typescriptreact","vue",
],
```
(2) 下面的设置为包括 ESLint 在内的所有提供程序打开自动修复：
```
 "editor.codeActionsOnSave": {"source.fixAll.eslint": true},
```
(3) 更多配置点这里

格式检查工具eslint相关推荐

vue语法检查工具eslint报错小记（error Unexpected trailing comma、Extra semicolon、error ‘loadingInstance‘ is nev）
vue语法检查工具eslint报错小记 vue项目开发中开启语法检查工具eslint,尤其是接手别人的代码继续开发时,如果不注意语法习惯,项目运行时会出现一堆warning.error,乍一看就头大, ...
JS代码检查工具ESLint
前面的话 ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格.ESLint不但提供一 ...
YAML实践指南：3:YAML格式检查与转换
在上篇文章中以实际的例子介绍了YAML文件的格式和使用方法,但是由于都是文本编辑的方式,是否符合YAML的语法规范缺乏工具的检查,这篇文章介绍一下常见的方式. 方式1: IDE支持很多插件支持YAM ...
eslint代码检查工具
what?什么是eslint? Eslint是一个 ECMAScript/JavaScript代码检查工具,使用node.js编写.可以使用eslint默认规则,也可以创建自己的检测规则. why?为 ...
React Native工程中TSLint静态检查工具的探索之路
背景建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查 ...
前端代码检查工具之stylelint使用指南
作为前端开发leader你必须要对组员开发的代码制定适合项目的开发规范,并且要做到跟踪检查,传统的做法是制定军规,比如命名方式,代码结构,注释模版,缩紧换行等等,然后通过代码review检查,但这样耗 ...
华为CodeCraft2017算法结果检查工具（包含测试用例展示）
这个是华为CodeCraft2017算法结果检查工具(包含测试用例展示),初衷是为本人所在参赛组写一个算法结果检查和寻找问题的工具.在此跟大家分享:网站地址先贴两张效果图: 上图:展示测试用例上图 ...
Flow - JS静态类型检查工具
本章的目标是提供一些Flow工具的介绍与使用建议.Flow本质上也只是个检查工具,它并不会自动修正代码中的错误,也不会强制说你没按照它的警告消息修正,就不会让你运行程序.当然,并没有要求什么时候一定要 ...
玩转Eclipse — 自动代码规范检查工具Checkstyle
大项目都需要小组中的多人共同完成,但是每个人都有自己的编码习惯,甚至很多都是不正确的.那么如何使小组所有开发人员都遵循某些编码规范,以保证项目代码风格的一致性呢?如果硬性地要求每个开发人员在提交代码之 ...

格式检查工具eslint

eslint是什么？

那么package.json下的eslint、vscode里的eslint和ci runner里的eslint有什么区别？

vscode里eslint plugin的自动化检测和简单的修复该怎么配置?

格式检查工具eslint相关推荐

最新文章

热门文章