白话 Linters (EsLint)

为啥会出现ESLint TSLint stylelint 之类的 Linters 工具
当你的业务代码里出现了越来越多的if elseif elseif elseif，多到条件都是ctrl+c ctrl+v为起手技，因为历史原因又不方便重构；无意之间你的代码变成了如下形式：

1  if(a==b||a==c){
2  }else if(a==c&&c!=''){
3  }else if(c==e||c=b){
4  }else if(c==e&&c!=b){
5  }else if(...){
   }

在这简化的代码逻辑中，你可能一眼就看出了问题；也可能睁大眼睛1分钟了，长叹没毛病啊~
答案当然是有问题，在第3行的逻辑判断

//就是这里的 c=b，你的历史记忆中此处应该是c==b的判断，而不是c=b的赋值
}else if(c==e||c=b){

不知道你有没有类似的遭遇，我反正是遇到过几次，揪出问题前，怎么都想不通，直到发现问题，哎呀我去~
并且解决此类问题并没有成就感，还惹得一身不够细心
此时如果恰好有 ESLint 之类的语法校验工具，并且合理的配置了。在控制台中，将会输出问题，告知你要小心了，这里有坑啊

eslint 提示错误

但是很多初入Linters的伙伴满心欢喜的安装，上手不一会后，就放弃了。为啥~

A：啊呀，怎么报错了，满屏都是红的
B：我这也是，刚刚还好好的，现在就加了个 console.log就红了
A：算了算了，还是格式化下就好了，这个太麻烦了

这段OS(Overlapping Sound)，曾出现我内心，也出现在我同事之间。
要解决这个问题，重点在于要合理的配置所用 Linters 的规则，因为很多默认的 Linters 规则，阻碍了你已养成的编码习惯，让你很不舒服；索性你就不用了。
好嘞~ 故事讲完，如果你想让 Linters 发现你或伙伴无意间留下的坑，又不想让 Linters 阻碍你编码的惯性，那么接下来再走一遍实际操作，也许会让你重拾 Linters
那么以在vscode 启用 ESLint 为例

前置环境条件

安装vscode
安装 ESLint
vscode 安装 ESLint 插件

ESLint 可以全局安装，也可以在你项目的目录单独安装；vscode里eslint插件是先在项目的目录里找eslint包，如果未找到，则在全局环境里查找eslint包

vscode中配置eslint插件参数

"eslint.run": "onSave",//eslint在保存时执行
"eslint.alwaysShowStatus": true,//在状态栏显示 eslint状态
"editor.codeActionsOnSave": {
  "eslint.run": "onSave",//在保存时自动运行eslint，检查代码；也可以选择 onType 一旦内容有变化就会运行eslint
   "source.fixAll.eslint": true// eslint 自动修复可修复的规则
},

在现有的项目，或新建项目中配置 eslint配置文件，例如我这里是用js形式配置的eslint配置文件 .eslintrc.js

//样例配置
module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 11
    },
    "rules": {
    }
};

至此，eslint就算用起来了，让我们来看一看效果

eslint 简单应用效果

接下来，就是配置，之所以用的不习惯就是没配置到位，在配置前，你需要整明白能配置什么。
其实官方文档里写的很详细，但没有中文文档，只关注效率的我们往往沉不下心，若不能在较短的时间内解决，便半途而废了。

以 .eslintrc.js 配置举例

module.exports = {
    /**
     * 指定js(运行|版本)所处环境，以便提供所指定(环境|版本)默认的变量
     * 官网详细说明 https://eslint.org/docs/user-guide/configuring#specifying-environments
     */
    "env": {
        "browser": true,//如为 false 或不配置, 在js文件中出现 window, document 等 游览器API 全局变量时，会提示 'is not defined' 警告
        "node":true,//如为 false 或不配置, 在js文件中出现 require, exports等 NODE API 全局变量时，会提示 'is not defined' 警告
        "es6": false,//如为 false 或不配置, 在js文件中出现 Promise 等es6版本新增的对象或方法时，提示错误警告
    },
    /**
     * eslint 规则继承自何处
     * 即如果未配置rules(自定义)规则，也未指定 extends(继承)规则，eslint便没有规则进行校验
     * 相当于，你买了部手机，但手机没有电，啥事也干不了
     * 官网详细说明 https://eslint.org/docs/user-guide/configuring#extending-configuration-files
     */
    "extends": "eslint:recommended",
    /**
     * 设置自定义全局变量，避免自定义全局变量出现 no-undef 警告
     * 有时候我们引入了第三方包(插件)，或我们自己写的一个全局方法；其提供了一个全局变量供我们使用，例如 axios (一个请求类库)
     * eslint 会校验 变量必须声明才能使用，但是第三方库，或我们自己的全局方法，不会在每个js文件中声明引入，这个时候便会出现 no-undef 警告
     * 因此，将其在 globals中配置即可
     * 官网详细说明 https://eslint.org/docs/user-guide/configuring#specifying-globals
     * 注意：
     * false | "readable" 等同于 "readonly"  不能重新定义(赋值)
     * true | "writeable" 等同于 "writable" 可重新定义(赋值)
     */
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "requirejs":false,
        "Mock":false,
        "axios":false,
    },
    /**
     * 指定 js 语法版本，例如
     * "ecmaVersion": 5, 表明 启用es5语法进行校验，此时用 => 箭头函数会提示语法错误，因为箭头函数在es6中才能支持
     * 使用 3, 5 (默认), 6, 7, 8, 9, 10, 11 设置你预期的js语法版本
     * 也可以根据js版本的年份设置，例如
     * 2015(同 6)  2016(同 7)  2017(同 8)  2018(同 9)  2019(同 10)  2020(同 11) 
     * 官网详细说明 https://eslint.org/docs/user-guide/configuring#specifying-parser-options
     */  
    "parserOptions": {
        "ecmaVersion": 5
    },
    /**
     * 自定义 eslint 校验规则
     * off 或 0  关闭校验
     * warn 或 1 提示警告
     * error 或 2 提示错误
     * 官网详细说明 https://eslint.org/docs/user-guide/configuring#configuring-rules
     * 可配置校验规则 https://eslint.org/docs/rules/
     */
    "rules": {
        "quotes": [
            "error", //必须使用双引号
            "double"
        ],
        "semi": [
            "error",// 未分号结尾 提示错误
            "always"
        ],
        "no-console": 1, // console 提示 警告
    }
};

如上配置，eslint会在

出现箭头函数提示错误 因为 parserOptions 配置的 ecmaVersion 版本为 5
出现Promise 等es6新增内置对象提示错误 因为 env 配置的 es6 为false 或未配置
使用 console.log 提示警告 因为自定义规则里 no-console 配置为 1 即提示警告

根据上面的标注的规则，调整适合自身的规则即可。至此eslint已经协助我们完成语法校验规则了，并且 eslint 在一定程度上还能自动修复问题(主要是修复空格之类的 ^ _ ^)
例如在上面的 vscode 配置文件中，我们设置了自动修复，则在保存后，如果出现多余的空格等，会自动修复

"editor.codeActionsOnSave": {
  "eslint.run": "onSave",//在保存时自动运行eslint，检查代码；也可以选择 onType 一旦内容有变化就会运行eslint
   "source.fixAll.eslint": true// eslint 自动修复可修复的规则
},

好了~ 至此，便如用担心手抖造成的误伤了，接下来要做的就是格式化代码；回顾下前端可能会接触到的语言即框架

JavaScript
JSX
Angular
Vue
Flow
TypeScript
CSS, Less, and SCSS
HTML
JSON
GraphQL
Markdown, including GFM and MDX
YAML

稳住~ 虽然多，但是Prettier来了，通吃前端多语言的一种方案

白话 Linters (EsLint)

你可能感兴趣的:(白话 Linters (EsLint))