ESlint——可组装的JavaScript和JSX检查工具

vlambda
2020-09-16

ESlint——可组装的JavaScript和JSX检查工具

写在前面

强烈推荐项目配置ESLint代码检查工具，进行代码检查是种很好的开发习惯，也有很多著名的项目都在使用，如FaceBook、Vue@cli、mongo DB 都在使用。

初次使用，会遇到配置及使用的题，为此，小编在文章末尾推荐了《ESLint的配置文章》以及vscode编辑器的eslint格式化代码。白嫖的同学，请直接下滑到文章底部

👇👇👇👇👇👇

<<<正文开始>>>

JavaScript的创作时间只有两周的时间，就连JavaScript之父 ‘Brendan Eich’也承认JavaScript本身设计上存在许多缺陷。因此，代码不严谨也可能就会触发神奇的错误。

例如: ==（带有隐式转换）和 ===（绝对等于）的混用、动态类型的转换（既是js最有魅力的地方，同时也造成了类型转换不可控，成为js被认为是不严谨的编程语言的众多理由中的一项，所以，TypeScript成为JavaScript的强化版本出现），可能会产生Bug，刚入行前端的初学者可能不易察觉，并导致程序最终运行出错。

所以，在项目开发中，选用一套代码检查工具显得非常必要。下面我们来简要了解一下JavaScript代码检查工具的演变历程。

JSLint 和 JSHint

JSLint ：作者Douglas Crockford 。帮助许多开发者节省了排查代码错误的时间。但是 JSLint 的问题是几乎不可配置，代码风格和规则都是内置好的；

JSHint：作者 Anton Kovalyov 在 2011 年 Fork 原项目开发了 JSHint。 J SHint 的特点就是可配置，同时文档也相对完善，而且对开发者友好。

ESLint 的诞生

Nicholas C. Zakas 2013 年的 6 月份，发布了——ESLint

ESLint使用 AST（Abstract Syntax Tree 抽象语法树）处理规则，用 Esprima 解析代码，执行速度要比只需要一步搞定的 JSHint 慢很多，让 ESLint 逆袭的是 ECMAScript 6 的出现；ES2015 规范正式发布后，市面上浏览器对最新标准的支持情况极其有限。如果想要提前体验最新标准的语法，就得靠 Babel 之类的工具将代码编译成 ES5 甚至更低的版本，同时一些实验性的特性也能靠 Babel 转换。

ESLint 可扩展的优势一下就体现出来了，不仅可以扩展规则，甚至连解析器也能替换。Babel 团队就为 ESLint 开发了 babel-eslint[9] 替换默认解析器，让 ESLint 率先支持 ES2015 语法。ESLint 本身也不支持 JSX 语法。还是因为可扩展性，eslint-plugin-react[10] 的出现让 ESLint 也能支持当时 React 特有的规则。

2016 年，JSCS（与eslint同时期出现的代码检查工具）开发团队认为 ESLint 和 JSCS 实现原理太过相似，而且需要解决的问题也都一致，最终选择合并到 ESLint

至此，ESLint 成为前端主流工具

ESLint官方介绍

ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

ESLint配置

推荐配置ESLint配置 https://segmentfault.com/a/1190000012634130

以下推荐一套Vscode的ESLint格式化代码

{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候自动格式化  "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复 //autoFixedOnSave 设置已废弃，采用如下新的设置 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.format.enable": true, //autoFix默认开启，只需输入字符串数组即可 "eslint.validate": [ "javascript", "vue", "html" ], // #去掉代码结尾的分号  "prettier.semi": true, // #使用带引号替代双引号  "prettier.singleQuote": true, // #让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #这个按用户自身习惯选择  "vetur.format.defaultFormatter.html": "js-beautify-html", // // #让vue中的js按编辑器自带的ts格式进行格式化  // "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "auto" // #vue组件中html代码格式化样式 } }, // 格式化stylus, 需安装Manta's Stylus Supremacy插件  // 这里使用的是css预处理器，stylus，可根据自身需要，做出更改。 "stylusSupremacy.insertColons": false, // 是否插入冒号 "stylusSupremacy.insertSemicolons": false, // 是否插入分好 "stylusSupremacy.insertBraces": false, // 是否插入大括号 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行 "stylusSupremacy.insertNewLineAroundBlocks": false, "task.autoDetect": "off", "files.autoSave": "afterDelay", "window.zoomLevel": -1, "gitlens.gitCommands.closeOnFocusOut": true, "winopacity.opacity": 168, "workbench.startupEditor": "newUntitledFile" // 两个选择器中是否换行}

下次，我们来看一下AST（Abstract Syntax Tree 抽象语法树）这个强大的工具~

vlambda博客
学习文章列表