ESLint 你可能不知道的知识点

作者: 前端大课堂 | 来源:发表于2019-05-20 14:33 被阅读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,还是有局限性。

    相关文章

      网友评论

        本文标题:ESLint 你可能不知道的知识点

        本文链接:https://www.haomeiwen.com/subject/nunuaqtx.html