js代碼規(guī)范之Eslint安裝與配置詳解

更新時(shí)間：2018年09月08日 11:42:16 作者：SuRuiGit

這篇文章主要介紹了js代碼規(guī)范之Eslint安裝與配置詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

什么是 ESLint

ESLint（中文站點(diǎn)）是一個(gè)開源的 JavaScript 代碼檢查工具，使用 Node.js 編寫，由 Nicholas C. Zakas 于 2013 年 6 月創(chuàng)建。ESLint 的初衷是為了讓程序員可以創(chuàng)建自己的檢測(cè)規(guī)則，使其可以在編碼的過程中發(fā)現(xiàn)問題而不是在執(zhí)行的過程中。ESLint 的所有規(guī)則都被設(shè)計(jì)成可插入的，為了方便使用，ESLint 內(nèi)置了一些規(guī)則，在這基礎(chǔ)上也可以增加自定義規(guī)則。

一、Eslint安裝

1.全局安裝

如果你想使 ESLint 適用于你所有的項(xiàng)目，建議全局安裝 ESLint

$ npm install -g eslint

初始化配置文件

$ eslint --init

2.局部安裝

$ npm install eslint --save-dev

初始化配置文件

$ ./node_modules/.bin/eslint --init

3.webpack中配置eslint

需要安裝eslint-loader解析.eslint文件

{
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
     {
      options: {
       formatter: eslintFormatter,
       eslintPath: require.resolve('eslint'),
       
      },
      loader: require.resolve('eslint-loader'),
     },
    ],
    include: paths.appSrc, //也可以用exclude排除不需要檢查的目錄或者用.eslintignore
},

二、ESlint配置

1.配置文件類型與優(yōu)先級(jí)順序

.eslintrc.js - 使用 .eslintrc.js 然后輸出一個(gè)配置對(duì)象
.eslintrc.yaml - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定義配置的結(jié)構(gòu)。
.eslintrc.yml
.eslintrc.json - 使用 .eslintrc.json 去定義配置的結(jié)構(gòu)，ESLint 的 JSON 文件允許 JavaScript 風(fēng)格的注釋
.eslintrc（已棄用）
package.json - 在 package.json 里創(chuàng)建一個(gè) eslintConfig屬性，在那里定義你的配置

2.plugin屬性

ESLint 支持使用第三方插件（以eslint-plugin-開頭的npm包），在使用插件之前，必須使用 npm 安裝。如eslint-plugin-react、eslint-plugin-vue等

module.exports = {
  "plugins": [
    "react"
  ],
  "extends": [
    "eslint:recommended"
  ],
  "rules": {
    "no-set-state": "off"
  }
}

3.extends屬性

一個(gè)配置文件可以被基礎(chǔ)配置中的已啟用的規(guī)則繼承。可以使用以下規(guī)則繼承：

（1）"eslint:recommended"

繼承Eslint中推薦的（打鉤的）規(guī)則項(xiàng)

module.exports = {
  "extends": "eslint:recommended",
  "rules": {
    
  }
}

（2）使用別人寫好的規(guī)則包（以eslint-config-開頭的npm包），如eslint-config-standard

module.exports = {
  "extends": "standard",
  "rules": {
    
  }
}

（3）使用Eslint插件中命名的配置

module.exports = {
  "plugins": [
    "react"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "rules": {
    "no-set-state": "off"
  }
}

（4）使用"eslint:all"，繼承Eslint中所有的核心規(guī)則項(xiàng)

module.exports = {
  "extends": "eslint:all",
  "rules": {
    // override default options
    "comma-dangle": ["error", "always"],
    "indent": ["error", 2],
    "no-cond-assign": ["error", "always"],

    // disable now, but enable in the future
    "one-var": "off", // ["error", "never"]

    // disable
    "init-declarations": "off",
    "no-console": "off",
    "no-inline-comments": "off",
  }
}

4.rules屬性(根據(jù)自己的需要進(jìn)行配置)

（1）Eslint部分核心規(guī)則

"rules": {
    /**
    **這些規(guī)則與 JavaScript 代碼中可能的錯(cuò)誤或邏輯錯(cuò)誤有關(guān)
    **/
    "for-direction":"error",//強(qiáng)制 “for” 循環(huán)中更新子句的計(jì)數(shù)器朝著正確的方向移動(dòng)
    "getter-return":"error",//強(qiáng)制在 getter 屬性中出現(xiàn)一個(gè) return 語(yǔ)句
    "no-await-in-loop":"error",//禁止在循環(huán)中 出現(xiàn) await
    "no-compare-neg-zer":"error",//禁止與 -0 進(jìn)行比較
    "no-cond-assign":[//禁止在條件語(yǔ)句中出現(xiàn)賦值操作符
      "error",
      "always"
    ],
    "no-console":[//禁用 console
      "error"
//      { "allow": ["warn", "error"] }
    ],
    "no-constant-condition":"error",//禁止在條件中使用常量表達(dá)式
    "no-control-regex":"error",//禁止在正則表達(dá)式中使用控制字符
    "no-debugger":"error",//禁用 debugger
    "no-dupe-args":"error",//禁止在 function 定義中出現(xiàn)重復(fù)的參數(shù)
    "no-dupe-keys":"error",//禁止在對(duì)象字面量中出現(xiàn)重復(fù)的鍵
    "no-duplicate-case":"error",//禁止重復(fù) case 標(biāo)簽
    "no-empty":"error",//禁止空塊語(yǔ)句
    "no-empty-character-class":"error",//禁止在正則表達(dá)式中出現(xiàn)空字符集
    "no-ex-assign":"error",//禁止對(duì) catch 子句中的異常重新賦值
    "no-extra-boolean-cast":"error",//禁止不必要的布爾類型轉(zhuǎn)換
    "no-extra-parens":"error",//禁止冗余的括號(hào)
    "no-extra-semi":"error",//禁用不必要的分號(hào)
    "no-func-assign":"error",//禁止對(duì) function 聲明重新賦值
    "no-inner-declarations":"error",//禁止在嵌套的語(yǔ)句塊中出現(xiàn)變量或 function 聲明
    "no-invalid-regexp":"error",//禁止在 RegExp 構(gòu)造函數(shù)中出現(xiàn)無(wú)效的正則表達(dá)式
    "no-irregular-whitespace":"error",//禁止不規(guī)則的空白
    "no-obj-calls":"error",//禁止將全局對(duì)象當(dāng)作函數(shù)進(jìn)行調(diào)用
    "no-prototype-builtins":"error",//禁止直接使用 Object.prototypes 的內(nèi)置屬性
    "no-regex-spaces":"error",//禁止正則表達(dá)式字面量中出現(xiàn)多個(gè)空格
    "no-sparse-arrays": "error",//禁用稀疏數(shù)組
    "no-template-curly-in-string":"error",//禁止在常規(guī)字符串中出現(xiàn)模板字面量占位符語(yǔ)法
    "no-unexpected-multiline":"error",//禁止使用令人困惑的多行表達(dá)式
    "no-unreachable":"error",//禁止在 return、throw、continue 和 break 語(yǔ)句后出現(xiàn)不可達(dá)代碼
    "no-unsafe-finally":"error",//禁止在 finally 語(yǔ)句塊中出現(xiàn)控制流語(yǔ)句
    "no-unsafe-negation":"error",//禁止對(duì)關(guān)系運(yùn)算符的左操作數(shù)使用否定操作符
    "use-isnan":"error",//要求調(diào)用 isNaN()檢查 NaN
    "valid-jsdoc":"error",//強(qiáng)制使用有效的 JSDoc 注釋
    "valid-typeof":"error",//強(qiáng)制 typeof 表達(dá)式與有效的字符串進(jìn)行比較
    /**
    **最佳實(shí)踐
    **/
    "accessor-pairs":"error",//強(qiáng)制getter/setter成對(duì)出現(xiàn)在對(duì)象中
    "array-callback-return":"error",//強(qiáng)制數(shù)組方法的回調(diào)函數(shù)中有 return 語(yǔ)句
    "block-scoped-var":"error",//把 var 語(yǔ)句看作是在塊級(jí)作用域范圍之內(nèi)
    "class-methods-use-this":"error",//強(qiáng)制類方法使用 this
    "complexity":"error"http://限制圈復(fù)雜度
    .....
  }

（2）eslint-plugin-vue中的規(guī)則

'rules': {

    /* for vue */

    // 禁止重復(fù)的二級(jí)鍵名

    // @off 沒必要限制

    'vue/no-dupe-keys': 'off',

    // 禁止出現(xiàn)語(yǔ)法錯(cuò)誤

    'vue/no-parsing-error': 'error',

    // 禁止覆蓋保留字

    'vue/no-reservered-keys': 'error',

    // 組件的 data 屬性的值必須是一個(gè)函數(shù)

    // @off 沒必要限制

    'vue/no-shared-component-data': 'off',

    // 禁止 <template> 使用 key 屬性

    // @off 太嚴(yán)格了

    'vue/no-template-key': 'off',

    // render 函數(shù)必須有返回值

    'vue/require-render-return': 'error',

    // prop 的默認(rèn)值必須匹配它的類型

    // @off 太嚴(yán)格了

    'vue/require-valid-default-prop': 'off',

    // 計(jì)算屬性必須有返回值

    'vue/return-in-computed-property': 'error',

    // template 的根節(jié)點(diǎn)必須合法

    'vue/valid-template-root': 'error',

    // v-bind 指令必須合法

    'vue/valid-v-bind': 'error',

    // v-cloak 指令必須合法

    'vue/valid-v-cloak': 'error',

    // v-else-if 指令必須合法

    'vue/valid-v-else-if': 'error',

    // v-else 指令必須合法

    'vue/valid-v-else': 'error',

    // v-for 指令必須合法

    'vue/valid-v-for': 'error',

    // v-html 指令必須合法

    'vue/valid-v-html': 'error',

    // v-if 指令必須合法

    'vue/valid-v-if': 'error',

    // v-model 指令必須合法

    'vue/valid-v-model': 'error',

    // v-on 指令必須合法

    'vue/valid-v-on': 'error',

    // v-once 指令必須合法

    'vue/valid-v-once': 'error',

    // v-pre 指令必須合法

    'vue/valid-v-pre': 'error',

    // v-show 指令必須合法

    'vue/valid-v-show': 'error',

    // v-text 指令必須合法

    'vue/valid-v-text': 'error',
    
    //
    // 最佳實(shí)踐
    //
    // @fixable html 的結(jié)束標(biāo)簽必須符合規(guī)定
    // @off 有的標(biāo)簽不必嚴(yán)格符合規(guī)定，如 <br> 或 <br/> 都應(yīng)該是合法的

    'vue/html-end-tags': 'off',

    // 計(jì)算屬性禁止包含異步方法

    'vue/no-async-in-computed-properties': 'error',

    // 禁止出現(xiàn)難以理解的 v-if 和 v-for

    'vue/no-confusing-v-for-v-if': 'error',

    // 禁止出現(xiàn)重復(fù)的屬性

    'vue/no-duplicate-attributes': 'error',

    // 禁止在計(jì)算屬性中對(duì)屬性修改

    // @off 太嚴(yán)格了

    'vue/no-side-effects-in-computed-properties': 'off',

    // 禁止在 <textarea> 中出現(xiàn) {{message}}

    'vue/no-textarea-mustache': 'error',

    // 組件的屬性必須為一定的順序

    'vue/order-in-components': 'error',

    // <component> 必須有 v-bind:is

    'vue/require-component-is': 'error',

    // prop 必須有類型限制

    // @off 沒必要限制

    'vue/require-prop-types': 'off',

    // v-for 指令的元素必須有 v-bind:key

    'vue/require-v-for-key': 'error',
    
    //
    // 風(fēng)格問題
    //
    // @fixable 限制自定義組件的屬性風(fēng)格
    // @off 沒必要限制

    'vue/attribute-hyphenation': 'off',

    // html 屬性值必須用雙引號(hào)括起來(lái)

    'vue/html-quotes': 'error',

    // @fixable 沒有內(nèi)容時(shí)，組件必須自閉和

    // @off 沒必要限制

    'vue/html-self-closing': 'off',

    // 限制每行允許的最多屬性數(shù)量

    // @off 沒必要限制

    'vue/max-attributes-per-line': 'off',

    // @fixable 限制組件的 name 屬性的值的風(fēng)格

    // @off 沒必要限制

    'vue/name-property-casing': 'off',

    // @fixable 禁止出現(xiàn)連續(xù)空格

    // TODO: 李德廣  觸發(fā) 新版本 typeerror：get 'range' of undefined

    // 'vue/no-multi-spaces': 'error',

    // @fixable 限制 v-bind 的風(fēng)格

    // @off 沒必要限制

    'vue/v-bind-style': 'off',

    // @fixable 限制 v-on 的風(fēng)格

    // @off 沒必要限制

    'vue/v-on-style': 'off',

    // 定義了的 jsx element 必須使用

    'vue/jsx-uses-vars': 'error'

  }

（3）eslint-plugin-react中的規(guī)則

/**
    **react規(guī)則
    **/
    "react/boolean-prop-naming": ["error", { "rule": "^is[A-Z]([A-Za-z0-9]?)+" }],//bool類型的props強(qiáng)制固定命名
    "react/button-has-type": ["error", {"reset": false}],//強(qiáng)制按鈕的type屬性必須是"button","submit","reset"三者之一
    "react/default-props-match-prop-types": [2, { "allowRequiredDefaults": false }],//強(qiáng)制所有defaultProps有對(duì)應(yīng)的non-required PropType
    "react/destructuring-assignment": [1, "always"],//強(qiáng)制將props,state,context解構(gòu)賦值
    "react/display-name": [1, { "ignoreTranspilerName": false }],//react組件中強(qiáng)制定義displayName
    "react/forbid-component-props": [1],//禁止在自定義組件中使用(className, style)屬性
    "react/forbid-dom-props": [1, { "forbid": ["style"] }],//禁止在dom元素上使用禁止的屬性
    "react/forbid-elements": [1, { "forbid": ["button"] }],//禁止某些元素用于其他元素
    "react/forbid-prop-types": [1],//禁止某些propTypes屬性類型
    "react/no-access-state-in-setstate":"error",//禁止在setState中使用this.state
    "react/no-children-prop":[1],//不要把Children當(dāng)做屬性
    "react/no-string-refs":[1],//不要使用string類型的ref
    "react/no-unused-state":[1],//不要在state中定義未使用的變量
    //.....
    "react/jsx-no-undef": [1, { "allowGlobals": false }],//不允許使用未聲明的變量
    "react/jsx-key":[1]//遍歷使用key

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: