前端大讲堂让前端飞Web前端之路

ESLint 你可能不知道的知识点

2019-05-20  本文已影响5人  前端大课堂

本文主要介绍所有 ESLint 比较偏的知识点,一些重要配置的含义,如何在 VS Code 中使用 ESLint 插件,以及 ESLint 的常用的标准 recommanded, standard 和 airbnb 的区别。 最重要的是,如何在大团队中统一一套 ESLint 配置。 

常用 ESLint 插件的区别等等,代码格式化到底用 prettier 还是 eslint 插件还是 standard 插件?请看本文介绍。  

1. sourceType 是什么意思? 

sourceType 有两个值,script 和 module。 对于 ES6+ 的语法和用 import / export 的语法必须用 module. 

2. eslint --init 只有在选择 "To check syntax, find problems, and enforce code style" 才可以选择 airbnb, standard, recommended 标准。 

3. 有时候在前端项目中存在前端和 node 的代码共存的情况,只要在 env 中配置好 browser: true, node: true 就可以把兼容不同环境的全局变量兼容进来,例如 nodejs 中的 global, process 等等。 

4. 规则强度是 airbnb > standard > recommended. 看下图,

recommended 和 standard 大概有 88 出不同,主要是 recommended 很多都是 off, standard 是 error, 同时 standard 还有很多特有的规则。 

左边是 recommended, 右边是 standard  standard 特有的规则 

5. 关于自动修复

现在代码都比较严格,可能包含缩进是 2 个空格,是否在语句最后加逗号的情况。不可能自己手动去一个个修正。 

eslint ./src --fix 

加上 --fix 可以自动修正一些明显的问题。 

配置 VS Code 自动修复,安装 ESLint VS Code 插件。 View -> Command Palette -> install extension. 

首选项 -> 设置 -> 搜索 "autofix". Auto Fix On Save。 就可以在保存的时候自动修正了。 

比较推荐还是 ESLint 的插件。 因为 ESLint 毕竟是所有配置的入口和出口,方便配置和禁用配置。有些同学喜欢用 Standard 和 Prettier,还是有局限性。

上一篇下一篇

猜你喜欢

热点阅读