格式規範工具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']
  }
}
複製代碼