格式规范工具ESlint

时间 2019-11-08

标签格式规范工具 eslint 繁體版

原文原文链接

前言

编写代码的时候必要的编写规范还有格式，对代码的阅读还有避错都是有良好的帮助的。咱们就来看一看帮助咱们达到一些编码规范的工具ESlint吧。前端

正文

概要

ESlint是Espree来解析js的，经过抽象语法树（AST）来估算代码模板。它是一个彻底插件话的，每个单一的规定都是一个插件。node

使用方式

咱们能够很方便的经过npm来导入eslint来使用，当咱们使用ESLint的时候咱们每每会在根目录下面看到一个配置文件内容（.eslintrc）。这个文件是用来配置咱们的eslint的。git

咱们配饰ESlint的时候主要经过两种方式。es6

注释配置： 咱们能够在js文件之中使用特定的注释的形式来提示eslint此处的文件的格式配置
配置文件：咱们能够经过js, json, yaml文件来进行内容的设置或者咱们也能够在package.json文件之中经过eslintconfig来进行内容的配置。最后还有一种方式是经过命令行的形式来进行内容的配置的，固然这种状况会相对少一点，eslint对于多重配置会自动的读取和设置，可是要提一句的就是，只有当找不到其余相关的内容，eslint最终才会使用根目录下的配置文件信息。

配置

咱们如今来具体的说一说如何使用吧：github

parserOptions：这是一个参数对象内容，主要用来设置相关的语法环境内容，或者能够选择使用jsx语法，咱们能够经过这个对象之中以下属性来设置。typescript
- ecmaVersion来设置咱们要是用的js的语法规范版本。
- sourceType参数能够设置是使用script或者module来控制语法形式。
- ecmaFeatures这个参数实际上也是一个对象，他能够设置当前语法的一些表现形式，是否能够在全局环境下返回啊，是否能够使用严格模式，或者语法使用jsx的形式。
parser：咱们能够设置咱们本身的语法解释器内容，默认的解释器是espree，咱们经常会在项目之中设置称为babel-eslint来进行解析。同时咱们也可能会用到@typescript-eslint/parser能够用来解析typescript。也有一些注意事项express
- 若是咱们设置了解释器的话，可能咱们以前设置的解析选项将会不起做用。这一点要十分的注意。
- 第二点是咱们须要配饰parser的话，咱们须要注意咱们的解释器要单独的下载下来。
- 最后一点是咱们下载的解释器要符合解释器接口模式（parser Interface）
processor：插件可能会提供相关的处理机，帮助咱们截取文件之中的js内容，或者预处理相关的信息文件内容。咱们能够在plugin引入以后，经过overrides来设置相关信息的读取和处理形式，其中处理机的设置就是经过processor来设置的。files来设置当前处理机须要处理的文件有哪些，咱们简单的来看一个示例吧。npm

{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            "processor": "a-plugin/markdown"
        },
        {
            "files": ["**/*.md/*.js"],
            "rules": {
                "strict": "off"
            }
        }
    ]
}
复制代码

env：咱们接下来主要须要看的是环境的设置状况。eslint提供了不少的全局环境内容的引入，broswer,jest,node等等，经过设置这些参数来限制引入相关的全局参数内容。若是咱们想要针对特定的plugins使用相关的全局变量的状况，能够经过plugins名称/全局环境名称的形式在env之中设置。json
globals：这个参数能够设置全局环境下的某一个参数读写操做的权限，例如当咱们使用ES6的环境，可是promise不能够使用的状况，咱们能够经过以下设置来达到。前端工程化

{
    "env": {
        "es6": true
    },
    "globals": {
        "Promise": "off" 
        //此处使用off表示全局环境之中不可见。
        //还有false/readonly表示当前内容可读。
        //true/writable表示当前参数可写,可读。
    }
}
复制代码

plugins：表示的是咱们须要引入的插件内容。
rules：最终要的一个配置内容来了，其中是键值对的形式，key是rule的id而后value的值有三种。
- off关闭当前的规则。
- warn开启规则可是不强调，只是给与警告，而且不影响已存在的代码。
- error打开规则，而且在触发规则的时候推出代码执行并报错。
- 咱们引入了插件以后对于特定插件采用特定规则的时候咱们能够经过plugin名称/rule信息：rule状态的形式进行设置。
- 当咱们但愿某些规则针对某些文件不生效的时候咱们能够在overrides之中进行内容的设置。上一段代码：
```
{
  "rules": {...},
  "overrides": [
    {
      "files": ["*-test.js","*.spec.js"],
      "rules": {
        "no-unused-expressions": "off"
      }
    }
  ]
}
复制代码
```
comments：咱们以前说过能够经过配置的形式来配置eslint的设置，形如以下：

/* eslint eqeqeq: "off", curly: "error" */
复制代码

固然咱们也能够使用注释来取消某些行之中eslint的检查。咱们能够经过以下代码设置：

/* eslint-disable no-alert, no-console */ //主要是eslint-disable

/* eslint-enable no-alert, no-console */ //恢复eslint职能
复制代码

咱们也能够值屏蔽单行的状况。

alert('foo'); // eslint-disable-line
复制代码

settings：这个参数内容设置的是自定义参数内容，参数会传递给每个规则。
配置优先级说明：
- 若是同层级之中有package.json和.eslintrc文件的话，eslint将会使用.eslintrc文件之中的配置。
- 若是当前文件夹的上层是有eslint的配置的状况，上层的配置状况将会自动的传递到当前路径下，而且结合当前文件夹之中所配置的eslint内容，而且优先使用当层配置状况。
- 当咱们使用本身的配置文件的时候要十分注意由于eslint在没有配置相关生效文件信息的时候将会运用到所有的文件之中，包括第三方文件，这是咱们须要注意的。
- 又与ESlint会向上查询全部的父路径信息，因此咱们能够经过在文件之中配置root：true的形式来阻止eslint向上查找。
extends：继承已有的相关属性配置内容，eslint有一系列的现有规则的预设，咱们能够使用extends来对当前的eslint内容进行规整。因此咱们能够看到extends和plugins的不一样在于，extends其实是eslint自己预设的一些列已有规则的配置，plugins其实是引入新的配置方式。
最后咱们来尝试变来写一段简单的自定义eslint配置吧：

module.exports = {
  root: true,
  
  env: {
    browser: true,
    es6: true,
    node: true,
  },

  extends: ['eslint:recommended'],

  rules: {
    "no-console": [1, { allow: ['error'] }],
    "curly": [1, 'multi-line']
  }
}
复制代码

常见规则

上面是eslint的大部分规则配置内容，咱们能够看到eslint是十分容易进行配置的形式，咱们的咱们能够定制化的对规则进行配置，固然了解上面的这些事不够的，咱们还须要对一些经常使用的规则进行一些了解，这里我就直接贴上官方的规则列表内容，想要了解的朋友请点击这里

结束

工程化的开发是很重要的，针对于大型的项目的开发，一套说定的方案是远远不够的，还须要的强制化的进行一些约束条件，才能更好的规定当前的内容状况。随着以后的开发系统的大型，衔接的多元化，工程化将会愈来愈重要，eslint仅仅只是一个前端工程化的开始。然咱们共同窗习共同进步吧，拜拜。

参考

ESlint官网 .eslint篇日志说明