eslint 配置文件淺析

強(qiáng)調(diào):這是一篇關(guān)于vue-adimn-template項(xiàng)目中.eslintrc.js文件的映射解析狞悲,不是eslint教程,本人也是第一次使用eslint做代碼開發(fā)規(guī)范妇斤,只是解析該文件摇锋,快速入手讀懂規(guī)則丹拯。
基礎(chǔ)配置
默認(rèn)情況下,eslint會(huì)在所有父級(jí)目錄里尋找配置文件荸恕,直到根目錄或直到發(fā)現(xiàn)一個(gè)有root:true的配置

解析器配置

    parserOptions: {
    parser: 'babel-eslint',//一個(gè)對(duì)babel解析器的包裝乖酬,使其能夠與eslint兼容
    sourceType: 'module'//表示代碼是ECMAScript模塊
  }


環(huán)境參數(shù)配置

    env: {
    browser: true,//瀏覽器環(huán)境中的全局變量
    node: true,//node.js全局變量和node.js作用域
    es6: true,//啟用除了moudules以外的所有ECMAScript 6特性(該選項(xiàng)會(huì)自動(dòng)設(shè)置ecmaVersion解析器選項(xiàng)為6
  }


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

    extends: ['plugin:vue/recommended', 'eslint:recommended']

    //'eslint:recommended'啟動(dòng)了一系列核心規(guī)則
    //'plugin:vue/recommended'啟動(dòng)了一個(gè)vue的eslint插件


rules屬性可以做下面的任何事情,以擴(kuò)展或覆蓋規(guī)則
  • 啟用額外的規(guī)則
  • 改變繼承的規(guī)則級(jí)別而不改變它的選項(xiàng)
    • 基礎(chǔ)配置:"eqeqeq":["error","allow-null"]
    • 派生配置:"eqeqeq":"warn"
    • 最后生成的配置:"eqeqeq":["warn","allow-null"]
  • 覆蓋基礎(chǔ)配置中的規(guī)則的選項(xiàng)
    • 基礎(chǔ)配置:"quotes":["error","single","avoid-escape"]
    • 派生配置:"quotes":["error","single"]
    • 最后生成的配置:"quotes":["error","single"]
下面規(guī)則都放在rules里面融求,也是主要會(huì)影響到代碼編寫規(guī)則的咬像,只對(duì)我們項(xiàng)目中的配置做解析,詳細(xì)說(shuō)明看官方文檔生宛。
ESlint附帶有大量的規(guī)則县昂,設(shè)置規(guī)則必須為下列值之一
  • off/0:關(guān)閉規(guī)則
  • warn/1:開啟規(guī)則,使用警告級(jí)別的錯(cuò)誤
  • error/2:開啟規(guī)則陷舅,使用錯(cuò)誤級(jí)別的錯(cuò)誤

下面每一個(gè)都是一條規(guī)則:

與vue有關(guān)的規(guī)則

vue:強(qiáng)制每行的最多屬性數(shù)量

    "vue/max-attributes-per-line": [2, {
    "singleline": 10,//當(dāng)開始標(biāo)記在一行中時(shí)每行的最大屬性數(shù)倒彰,這里設(shè)置為10
    "multiline": {
      "max": 1,//當(dāng)開始標(biāo)記位于多行時(shí)每行的最大屬性數(shù),這里設(shè)置為1
      "allowFirstLine": false//多行時(shí)禁止與標(biāo)記名稱在同一行寫屬性
    }
  }]

vue:強(qiáng)制name屬性為Pascal大小寫:"vue/name-property-casing": ["error", "PascalCase"

    // 正確示例
    name:'MyComponent'

規(guī)則文件中關(guān)于eslint-plugin-vue插件的配置不多莱睁,但是extends: ['plugin:vue/recommended', 'eslint:recommended']決定項(xiàng)目中會(huì)用到很多推薦配置:
vue/attributes-order規(guī)定vue屬性需按照一定的規(guī)則排列書寫待讳,詳情見(jiàn)官網(wǎng)風(fēng)格指南
vue/no-v-html規(guī)定不允許使用v-html指令

    <!-- 錯(cuò)誤示例 -->
    <div v-html="someHTML"></div>
    <!-- 正確示例 -->
    <div>{{ someHTML }}</div>

vue/order-in-components規(guī)則要求組件中的性質(zhì)(props,data等)要按一定順序書寫,詳情見(jiàn)vue官網(wǎng)風(fēng)格指南
vue/this-in-template規(guī)則不允許在template里面使用this仰剿。

    <!-- 錯(cuò)誤示例 -->
    <a :href="this.url">
        {{ this.text }}
    </a>
    <!-- 正確示例 -->
    <a :href="url">
        {{ text }}
    </a>

注:關(guān)于eslint-plugin-vue相關(guān)的可以參考文檔:https://eslint.vuejs.org/rules/

與js有關(guān)的規(guī)則

強(qiáng)制getter/setter成對(duì)出現(xiàn)的對(duì)象中:'accessor-pairs': 2
要求箭頭函數(shù)之前和之后都有空格:

    'arrow-spacing': [2, {
      'before': true,
      'after': true
    }]

強(qiáng)制在左花括號(hào)和同一行的下一個(gè)token之間有一致的空格创淡,同樣強(qiáng)制右花括號(hào)和在同一行的前一個(gè)token之間有一只的空格:'block-spacing': [2, 'always']

    // 錯(cuò)誤示例
    function foo() {return true;}
    // 正確示例
    function foo() { return true; }

大括號(hào)風(fēng)格要求,將大括號(hào)放在控制語(yǔ)句或聲明語(yǔ)句同一行的位置南吮,并允許塊的開括號(hào)和閉括號(hào)在同一行辩昆。

    // 規(guī)則代碼,1tbs表示強(qiáng)制大括號(hào)放在控制語(yǔ)句或聲明語(yǔ)句同一行的位置
    'brace-style': [2, '1tbs', {
    'allowSingleLine': true//允許塊的開括號(hào)和閉括號(hào)在同一行
  }]

  // 錯(cuò)誤示例:
  if (foo) 
  {
    bar();
  }
  else 
  {
    baz();
  }

  //正確示例:
  if (foo){
    bar();
  } else {
    baz();
  }

  if (foo) bar();
  else if (baz) boom();

  try { somethingRisky(); } catch(e) { handleError(); }

不強(qiáng)制要求使用駝峰拼寫法

    'camelcase': [0, {//0,表示關(guān)閉
      'properties': 'always'
    }]

禁用拖尾逗號(hào):'comma-dangle': [2, 'never']

    // 錯(cuò)誤示例
    let foo = {
        bar:'baz',
        qux:'quux',
    }
    let arr = [1,2,];

    // 正確示例
    let foo = {
        bar:'baz',
        qux:'quux'
    }
    let arr = [1,2];

禁止在逗號(hào)前使用空格旨袒,要求在逗號(hào)后使用一個(gè)或多個(gè)空格

    'comma-spacing': [2, {
    'before': false,
    'after': true
  }]

  // 錯(cuò)誤示例
  let foo = 1 ,bar=2;
  let arr = [1 , 2];
  // 正確示例
  let foo = 1, bar=2;
  let arr = [1, 2];

要求逗號(hào)放在數(shù)組元素汁针、對(duì)象屬性或變量聲明之后,且在同一行:'comma-style': [2, 'last']

    // 錯(cuò)誤示例
    let foo = 1
    ,
    bar = 2;
    let foo = ['apples'
                            , 'oranges'];
    // 正確示例
    let foo = 1,
            bar = 2;
    let foo = ['apples', 'oranges'];

派生類中的構(gòu)造函數(shù)必須調(diào)用super()砚尽。非派生類的構(gòu)造函數(shù)不能調(diào)用super():'constructor-super': 2
    // 錯(cuò)誤示例
    class A {
        constructor() {
            super();
        }
    }
    class A extends B {
        constructor() { }
    }
    // 正確示例
    class A {
        constructor() { };
    }
    class A extends B {
        constructor() {
            super();
        }
    }
允許在單行中省略大括號(hào)施无,而if/else if/else/for/while和do,在其他情況使用中依然強(qiáng)制使用大括號(hào):'curly': [2, 'multi-line']

    // 錯(cuò)誤示例
    if (foo)
        doSomething();
    else 
        doSomethingElse();

    if (foo) foo(
        bar,
        baz);

    // 正確示例
    if (foo) foo++; else doSomething();

    if (foo) foo++;
    else if (bar) baz()
    else doSomething();

    while (true) {
        doSomething();
        doSomethingElse();
    }

要求表達(dá)式中的點(diǎn)號(hào)操作符應(yīng)該和屬性在同一行:'dot-location': [2, 'property']

    // 錯(cuò)誤示例
    let foo = Object.
    property;
    // 正確示例
    let foo = Object
    .property;
    let bar = object.property;

要求在非空文件末尾至少存在一行空行:'eol-last': 2

    // 錯(cuò)誤示例
    function doSmth() {
        let foo = 2;
    }

    // 正確示例
    function doSmth() {
        let foo = 2;
    }\n

強(qiáng)制在任何情況下都使用===!==

    'eqeqeq': [2,  "always", {
    "null": "ignore"http://總是使用===或!==必孤,即使是對(duì)null
  }]

強(qiáng)制generator函數(shù)中*前后都有空格

    'generator-star-spacing': [2, {
    'before': true,
    'after': true
  }]

強(qiáng)制回調(diào)進(jìn)行錯(cuò)誤處理猾骡,該期望當(dāng)在node.js中使用回調(diào)模式時(shí),處理錯(cuò)誤:'handle-callback-err': [2, '^(err|error)$']

    // 錯(cuò)誤示例
    function loadData (err, data) {
        doSomething();
    }

    // 正確示例
    function loadData (err, data) {
        if(err){
            console.log(err.statck);
        }
        doSomething();
    }

強(qiáng)制縮進(jìn)兩個(gè)空格

    'indent': [2, 2, {
    'SwitchCase': 1//設(shè)置case子句相對(duì)于switch語(yǔ)句縮進(jìn)2個(gè)空格
  }]

強(qiáng)制所有不包含單引號(hào)的jsx屬性值使用單引號(hào)敷搪,如果想在jsx的屬性中使用單引號(hào)兴想,必須使用雙引號(hào)作為字符串分隔符:'jsx-quotes': [2, 'prefer-single']
禁止在對(duì)象字面量的鍵和冒號(hào)之間存在空格,要求在對(duì)象字面量的冒號(hào)和值之間存在至少有一個(gè)空格赡勘。

    'key-spacing': [2, {
    'beforeColon': false,
    'afterColon': true
  }]

  // 錯(cuò)誤示例
  let obj = { foo :42 };
  let obj = { foo : 42 };

  // 正確示例
  let obj = { foo: 42 };

要求在關(guān)鍵字之前和之后至少都有一個(gè)空格嫂便。
該規(guī)則強(qiáng)制關(guān)鍵字和類似關(guān)鍵字的符號(hào)周圍空格的一致性:as、async闸与、await毙替、break岸售、case、catch厂画、class凸丸、const、continue袱院、debugger屎慢、default、delete忽洛、do抛人、else、export脐瑰、extends、finally廷臼、for苍在、from、function荠商、get寂恬、if、import莱没、in初肉、instanceof、let饰躲、new牙咏、of、return嘹裂、set妄壶、static、super寄狼、switch丁寄、this、throw泊愧、try伊磺、typeof、var删咱、void屑埋、while、with 痰滋、yield

    'keyword-spacing': [2, {
    'before': true,
    'after': true
  }]

  // 錯(cuò)誤示例
  if(foo) {
    //...
  }else if (bar) {
    //...
  }else {
    //...
  }
  // 正確示例
  if (foo) {
    //...
  } else if (bar) {
    //...
  } else {

  }

要求調(diào)用new操作符時(shí)有首字母大寫的函數(shù)雀彼,允許調(diào)用首字母大寫的函數(shù)時(shí)沒(méi)有new操作符壤蚜。

    'new-cap': [2, {
    'newIsCap': true,
    'capIsNew': false
  }]

  // 錯(cuò)誤示例
  let friend = new person();
  // 正確示例
  let friend = new Person();
  let person = Person();

要求調(diào)用無(wú)參構(gòu)造函數(shù)時(shí)帶括號(hào):'new-parens': 2

    // 錯(cuò)誤示例
    let person = new Person;
    let person = new (Person);

    // 正確示例
    let person = new Person();
    let person = new (Person)();

禁用Array構(gòu)造函數(shù),由于單參數(shù)的陷阱徊哑,和全局范圍的 Array 可能被重定義袜刷,通常不允許使用 Array的構(gòu)造函數(shù)來(lái)創(chuàng)建數(shù)組,唯一的例外是通過(guò)給構(gòu)造函數(shù)傳入指定的一個(gè)數(shù)值來(lái)創(chuàng)建稀疏數(shù)組:'no-array-constructor': 2

    // 錯(cuò)誤示例
    Array(0, 1, 2);
    new Array(0, 1, 2);
    // 正確示例
    Array(500);
    new Array(someOtherArray.length)

禁用arguments.callerarguments.callee'no-caller': 2
允許使用console:no-console': 'off'
禁止修改類聲明的變量:'no-class-assign': 2

    // 錯(cuò)誤示例
    class A { };
    A = 0;

    // 正確示例
    let A = class A { }
    A = 0;

禁止在條件表達(dá)式中出現(xiàn)賦值操作符莺丑,在條件語(yǔ)句中很容易將一個(gè)比較運(yùn)算符==/===錯(cuò)寫成=著蟹,所以引用該規(guī)則,即禁止在 if梢莽、for萧豆、while 和 do...while 語(yǔ)句中出現(xiàn)模棱兩可的賦值操作符:'no-cond-assign': 2

    // 錯(cuò)誤示例
    let x;
    if(x = 0) {
        let b = 1;
    }
    // 正確示例
    if(x === 0){
        let b = 1;
    }
禁止修改const關(guān)鍵字聲明的變量:'no-const-assign': 2
禁止在正則表達(dá)式中使用控制字符,在 ASCII 中昏名,0-31 范圍內(nèi)的控制字符是特殊的涮雷、不可見(jiàn)的字符。這些字符很少被用在 JavaScript 字符串中轻局,所以一個(gè)正則表達(dá)式如果包含這些字符的洪鸭,很有可能一個(gè)錯(cuò)誤:'no-control-regex': 2

    // 錯(cuò)誤示例
    let pattern1 = /\x1f/;
    let pattern2 = new RegExp("\x1f");
    // 正確示例
    let pattern1 = /\x20/;
    let pattern2 = new RegExp("\x20");
禁止使用delete刪除變量,delete 的目的是刪除對(duì)象的屬性仑扑。使用 delete 操作刪除一個(gè)變量可能會(huì)導(dǎo)致意外情況發(fā)生:'no-delete-var': 2
禁止在function定義中出現(xiàn)重復(fù)的參數(shù)览爵,該規(guī)則并不適用于箭頭函數(shù)或類方法:'no-dupe-args': 2
禁止類成員中出現(xiàn)重復(fù)的名稱,如果類成員中有同名的聲明镇饮,最后一個(gè)聲明將會(huì)默默地覆蓋其它聲明蜓竹。 它可能導(dǎo)致意外的行為:'no-dupe-class-members': 2
禁止對(duì)象字面量中出現(xiàn)重復(fù)的鍵:'no-dupe-keys': 2
禁止出現(xiàn)重復(fù)的case標(biāo)簽:'no-duplicate-case': 2
禁止在正則表達(dá)式中出現(xiàn)空字符集,在正則表達(dá)式中空字符集不能匹配任何字符储藐,它們可能是打字錯(cuò)誤:'no-empty-pattern': 2
禁用eval()俱济,JavaScript 中的 eval() 函數(shù)是有潛在危險(xiǎn)的,而且經(jīng)常被誤用钙勃。在不可信的代碼里使用 eval() 有可能使程序受到不同的注入攻擊姨蝴。eval() 在大多數(shù)情況下可以被更好的解決問(wèn)題的方法代替:'no-eval': 2
禁止對(duì)catch子句中的異常重新賦值,在 try 語(yǔ)句中的 catch 子句中肺缕,如果意外地(或故意地)給異常參數(shù)賦值左医,是不可能引用那個(gè)位置的錯(cuò)誤的。由于沒(méi)有 arguments 對(duì)象提供額外的方式訪問(wèn)這個(gè)異常同木,對(duì)它進(jìn)行賦值絕對(duì)是毀滅性的:'no-ex-assign': 2
禁止擴(kuò)展原生對(duì)象,在 JavaScript 中浮梢,你可以擴(kuò)展任何對(duì)象,包括內(nèi)置或者”原生”對(duì)象彤路。有時(shí)人們改變這些原生對(duì)象的行為秕硝,會(huì)影響到代碼中的其它部分。例如我們重寫了一個(gè)內(nèi)建的方法洲尊,將會(huì)影響到所有對(duì)象远豺,甚至是其它內(nèi)建對(duì)象:'no-extend-native': 2

    // 錯(cuò)誤示例
    Object.prototype.a = 'a';

避免不必要的 bind() 使用奈偏,不會(huì)標(biāo)記有函數(shù)參數(shù)綁定的bind() 的使用情況,把所有使用bind() 的箭頭函數(shù)標(biāo)記為是有問(wèn)題的:'no-extra-bind': 2

    // 錯(cuò)誤示例
    let x = function () {
        foo();
    }.bind(bar);
    // 正確示例
    let x = function () {
        this.foo();
    }.bind(bar);

禁止不必要的布爾類型轉(zhuǎn)換:'no-extra-boolean-cast': 2

    // 錯(cuò)誤示例
    !!!bar;
    !!foo ? baz : bat;
    Boolean(!!bar);
    if(Boolean(foo)){ };

    // 正確示例
    let foo = !!bar;//這里兩個(gè)感嘆號(hào)是有意義的躯护,第一個(gè)取反惊来,第二個(gè)把bar轉(zhuǎn)換成布爾類型

在函數(shù)表達(dá)式周圍禁止不必要的圓括號(hào):'no-extra-parens': [2, 'functions']

    // 錯(cuò)誤示例
    ((function foo() {}))();
    let y = (function () {return 1;});

禁止case落空,即從上一個(gè)case落入下一個(gè)case執(zhí)行棺滞,旨在消除非故意case落空行為:'no-fallthrough': 2

    // 錯(cuò)誤示例
    switch(foo) {
        case 1:
            doSomething();
        case 2:
            doSomethingElse();

    }
    // 正確示例
    switch(foo) {
        case 1:
            doSomething();
            //falls through裁蚁,標(biāo)記此處希望執(zhí)行落空操作
        case 2:
            doSomethingElse();
    }

禁止不規(guī)范的浮點(diǎn)小數(shù):'no-floating-decimal': 2

    // 錯(cuò)誤示例
    let num = .5;
    let num = 2.;
    let num = -.8;
    // 正確示例
    let num = 0.5;
    let num = 2.0;
    let num = -0.8;

禁止對(duì)function聲明重新賦值:'no-func-assign': 2

    // 錯(cuò)誤示例
    function foo() { }
    foo = bar;
    // 正確示例
    let foo = function() { };
    foo=bar;

禁止隱式的eval(),消除使用 setTimeout()继准、setInterval() 或 execScript() 時(shí)隱式的 eval():'no-implied-eval': 2

    // 錯(cuò)誤示例
    setTimeout("alert('hi');",100);
    setInterval("alert('hi');",100);
    // 正確示例
    setTimeout(function(){
        alert('hi');
    },100);

禁止function聲明出現(xiàn)在嵌套的語(yǔ)句塊中:'no-inner-declarations': [2, 'functions']

    // 錯(cuò)誤示例
    if (test) {
        function doSomething() { };
    }
    // 正確示例
    if (test) {
        let fn = function fnExpression() {}
    }

禁止在RegExp構(gòu)造函數(shù)中出現(xiàn)無(wú)效的正則表達(dá)式枉证,在正則表達(dá)式字面量中無(wú)效的模式在代碼解析時(shí)會(huì)引起 SyntaxError,但是 RegExp 的構(gòu)造函數(shù)中無(wú)效的字符串只在代碼執(zhí)行時(shí)才會(huì)拋出 SyntaxError移必,所以啟用該規(guī)則:'no-invalid-regexp': 2

    // 錯(cuò)誤示例
    RegExp('[');
    RegExp('.','z');
    new RegExp('\\');
    // 正確示例
    RegExp('.');

禁止不規(guī)則的空白室谚,無(wú)效的或不規(guī)則的空白會(huì)導(dǎo)致 ECMAScript 5 解析問(wèn)題,也會(huì)使代碼難以調(diào)試:'no-irregular-whitespace': 2
禁用__iterator__屬性:'no-iterator': 2
禁用與變量同名的標(biāo)簽:'no-label-var': 2
禁用標(biāo)簽語(yǔ)句

    'no-labels': [2, {
    'allowLoop': false,
    'allowSwitch': false
  }]

  // 錯(cuò)誤示例
  label:
    while (true) {
        break label;
    }
  // 正確示例
  while (true) {
    break;
  }

禁止不必要的嵌套塊:'no-lone-blocks': 2

    // 錯(cuò)誤示例
    if (foo) {
        bar();
        {
            baz();
        }
    }
    // 正確示例
    if (foo) {
        if (bar) {
            baz();
        }
    }

禁止使用空格和tab混合縮進(jìn):'no-mixed-spaces-and-tabs': 2
禁止出現(xiàn)多個(gè)空格崔泵,在某行中秒赤,出現(xiàn)多個(gè)空格而且不是用來(lái)作縮進(jìn)的,通常是個(gè)錯(cuò)誤:'no-multi-spaces': 2

    // 錯(cuò)誤示例
    let a =  1;
    if (foo  === 'bar') { }
    // 正確示例
    let a = 1;
    if (foo === 'bar') { }

禁止使用多行字符串管削, JavaScript 中,可以在新行之前使用斜線創(chuàng)建多行字符串撑螺,這不是一個(gè)好的做法含思,因?yàn)樗?JavaScript 中的一個(gè)非正式的特性:'no-multi-str': 2

    // 錯(cuò)誤示例
    let x = 'line 1 \
                     line 2';
    // 正確示例
    let x = 'line 1\n' + 
                    'line 2'; 
    
不允許多個(gè)空行,最大連續(xù)空行數(shù)為1

    'no-multiple-empty-lines': [2, {
    'max': 1
  }]

  // 錯(cuò)誤示例
  let foo = 5;


  let bar = 3;
  // 正確示例
  let foo = 5;

  let bar = 3;

禁止對(duì)原生對(duì)象或只讀的全局對(duì)象進(jìn)行賦值:'no-global-assign': 2
禁止對(duì)關(guān)系運(yùn)算符的左操作數(shù)使用否定操作符甘晤,關(guān)系運(yùn)算符有in含潘、instanceof'no-unsafe-negation': 2

    // 錯(cuò)誤示例
    if (!key in object) {

    }
    // 正確示例
    if (!(key in object)) {

    }

禁止使用Object構(gòu)造函數(shù):'no-new-object': 2

    // 錯(cuò)誤示例
    let myObject = new Object();
    // 正確示例
    let myObject = {};

不允許new require形式的表達(dá)式:'no-new-require': 2

    // 錯(cuò)誤示例
    let appHeader = new require('app-header');
    // 正確示例
    let ArrHeader = require('app-header');
    let appHeader = new AppHeader();

禁止Symbol操作符和new一起使用:'no-new-symbol': 2
禁止使用原始String/Number/Boolean包裝實(shí)例:'no-new-wrappers': 2
禁止將Math/JSON/Reflect對(duì)象當(dāng)做函數(shù)進(jìn)行調(diào)用:'no-obj-calls': 2
禁止八進(jìn)制字面量:'no-octal': 2
禁止在字符串中使用八進(jìn)制轉(zhuǎn)義序列:'no-octal-escape': 2
當(dāng)使用_dirname和_filename時(shí)不允許字符串拼接,在 Node.js 中,全局變量 _dirname 和 _filename 分別代表當(dāng)前執(zhí)行腳本的目錄路徑以及文件路徑线婚,阻止在 Node.js 中使用字符串拼接路徑:'no-path-concat': 2

    // 錯(cuò)誤示例
    let fullPath = __dirname + '/foo.js';
    let fullPath = __filename + '/foo.js';

    // 正確示例
    let fullPath = dirname + '/foo.js';
    let fullPath = path.join(__dirname,'foo.js');

禁用__proto__屬性:'no-proto': 2
禁止重復(fù)聲明變量:'no-redeclare': 2
禁止正則表達(dá)式字面量中出現(xiàn)多個(gè)空格:'no-regex-spaces': 2
禁止在返回語(yǔ)句中賦值遏弱,除非使用括號(hào)把它們括起來(lái):'no-return-assign': [2, 'except-parens']
禁止自我賦值:'no-self-assign': 2
禁止自身比較:'no-self-compare': 2
不允許使用逗號(hào)操作符,除了在初始化或者更新部分for語(yǔ)句時(shí)或者表達(dá)式序列被明確包裹在括號(hào)中:'no-sequences': 2

    // 逗號(hào)操作符包含多個(gè)表達(dá)式塞弊,其中只有一個(gè)是可使用的漱逸。它從左到右計(jì)算每一個(gè)操作數(shù)并且返回最后一個(gè)操作數(shù)的值。然而游沿,這往往掩蓋了它的副作用饰抒,它的使用經(jīng)常會(huì)發(fā)生事故,如下:
    let a = (3, 5);//a = 5

    a = b += 5, a+b;//設(shè)b=1;此時(shí)該語(yǔ)句返回12,打印后a=6,b=6;

    // 錯(cuò)誤示例
    foo = doSomething(),val;
    // 正確示例
    foo = (doSomething(),val);

關(guān)鍵字不能被遮蔽:'no-shadow-restricted-names': 2
全局對(duì)象的屬性值 (NaN诀黍、Infinity袋坑、undefined)和嚴(yán)格模式下被限定的標(biāo)識(shí)符 eval、arguments 也被認(rèn)為是關(guān)鍵字眯勾。重定義關(guān)鍵字會(huì)產(chǎn)生意想不到的后果且易迷惑其他讀者
禁止在函數(shù)標(biāo)識(shí)符和其調(diào)用之間有空格:'no-spaced-func': 2

    // 錯(cuò)誤示例
    fn ();
    fn
    ();
    // 正確示例
    fn();

禁用稀疏數(shù)組:'no-sparse-arrays': 2
禁止在構(gòu)造函數(shù)中枣宫,在調(diào)用 super() 之前使用 this 或 super:'no-this-before-super': 2
保持異常拋出的一致性婆誓,禁止拋出字面量和那些不可能是 Error 對(duì)象的表達(dá)式:'no-throw-literal': 2

    // 錯(cuò)誤示例
    throw 'error'
    // 正確示例
    throw new Error('error');

禁用行尾空格:'no-trailing-spaces': 2
有時(shí)在編輯文件的過(guò)程中,你可以在行的末尾以額外的空格作為結(jié)束也颤。這些空格差異可以被源碼控制系統(tǒng)識(shí)別出并被標(biāo)記為差異荣瑟,給開發(fā)人員帶來(lái)挫敗感滚局。雖然這種額外的空格并不會(huì)造成功能性的問(wèn)題,許多編碼規(guī)范要求在提交代碼之前刪除尾部空格。
禁用未聲明的變量柒竞,除非顯式地在/*global*/注釋中指定過(guò):'no-undef': 2
    // 錯(cuò)誤示例
    let a = someFunction();
    b = 10;
    // 正確示例
    /*global b*/
    b = 10;
不允許初始化變量值為undefined:'no-undef-init': 2
禁止使用令人困惑的多行表達(dá)式,個(gè)人理解就是別漏分號(hào):'no-unexpected-multiline': 2

    // 在JavaScript中琢岩,一下情況不會(huì)自動(dòng)插入分號(hào)
        // 該語(yǔ)句有一個(gè)沒(méi)有閉合的括號(hào)座柱,數(shù)組字面量或?qū)ο笞置媪炕蚱渌撤N方式,不是有效結(jié)束一個(gè)語(yǔ)句的方式输吏。(比如权旷,以 . 或 , 結(jié)尾)
        // 該行是 -- 或 ++(在這種情況下它將減量/增量的下一個(gè)標(biāo)記)
        // 它是個(gè) for()、while()贯溅、do拄氯、if() 或 else,并且沒(méi)有 {
        // 下一行以 [它浅、(译柏、+、*姐霍、/鄙麦、-、,镊折、. 或一些其它在單個(gè)表達(dá)式中兩個(gè)標(biāo)記之間的二元操作符胯府。
    // 錯(cuò)誤示例
    let foo = bar
    (1 || 2).baz();
    // 正確示例
    let foo = bar;
    (1 || 2).baz();

禁用一成不變的循環(huán)條件,循環(huán)條件中的變量在循環(huán)中是要經(jīng)常改變的恨胚。如果不是這樣骂因,那么可能是個(gè)錯(cuò)誤:'no-unmodified-loop-condition': 2
禁止可以表達(dá)為更簡(jiǎn)單結(jié)構(gòu)的額三元操作符,禁止條件表達(dá)式作為默認(rèn)的賦值模式

    'no-unneeded-ternary': [2, {
    'defaultAssignment': false
  }]

  // 錯(cuò)誤示例
  let a = x === 2 ? true : false;
  let a = x ? x : 1;
  // 正確示例
    let a = x === 2;

禁止在return/throw/continue/break語(yǔ)句后出現(xiàn)不可達(dá)代碼:'no-unreachable': 2
禁止在finally語(yǔ)句塊中出現(xiàn)控制流語(yǔ)句:'no-unsafe-finally': 2
JavaScript 暫停 try 和 catch 語(yǔ)句塊中的控制流語(yǔ)句赃泡,直到 finally 語(yǔ)句塊執(zhí)行完畢寒波。所以,當(dāng) return升熊、throw影所、break 和 continue 出現(xiàn)在 finally 中時(shí), try 和 catch 語(yǔ)句塊中的控制流語(yǔ)句將被覆蓋僚碎,這被認(rèn)為是意外的行為猴娩。
禁止出現(xiàn)未使用過(guò)的變量,檢查所有變量包括全局環(huán)境中的變量,不檢查參數(shù)

    'no-unused-vars': [2, {
    'vars': 'all',
    'args': 'none'
  }]

禁用不必要的.call().apply()卷中,目的在于標(biāo)記出可以被正常函數(shù)調(diào)用所替代的 Function.prototype.call() 和 Function.prototype.apply() 的使用:'no-useless-call': 2
禁止在對(duì)象中使用不必要的計(jì)算屬性:'no-useless-computed-key': 2

    // 錯(cuò)誤示例
    let a = { ['0']: 0 };
    let a = { ['0+1,234']: 0 };
    // 正確示例
    let a = { 'a': 0 };
    let a = { '0+1,234': 0 };

禁止不必要的構(gòu)造函數(shù):'no-useless-constructor': 2
    // 錯(cuò)誤示例
    class A {
        construction () {

        }
    }
    // 正確示例
    class A {
        construction (){
            doSomething();
        }
    }
禁止不必要的轉(zhuǎn)移:'no-useless-escape': 0
禁止屬性前有空白:'no-whitespace-before-property': 2

    // 錯(cuò)誤示例
    foo [bar]
    foo. bar
    // 正確示例
    foo[bar]
    foo.bar

禁用with語(yǔ)句:'no-with': 2
要求每個(gè)作用域的初始化的變量有多個(gè)變量聲明

    'one-var': [2, {
    'initialized': 'never'
  }]

  // 錯(cuò)誤示例
  function foo() {
    let bar,
            baz;
    const BAR = true,
                BAZ = false;
  }
  // 正確示例
  function foo() {
    let bar;
    let baz;
    const BAR = true;
    const BAZ = false;
  }
強(qiáng)制操作符使用一致的換行符風(fēng)格

    'operator-linebreak': [2, 'after', {//要求吧換行符放在操作符后面
    'overrides': {
      '?': 'before',//?放在前面
      ':': 'before'//:放在前面
    }
  }]

  // 錯(cuò)誤示例
  foo = 1
  +
  2;
  foo = 1
        + 2;

  // 正確示例
  foo = 1 + 2;
  foo = 1 +
            2;

禁止塊語(yǔ)句和類的開始或末尾有空行:'padded-blocks': [2, 'never']

    // 錯(cuò)誤示例
    if (a) {

        b();

    }
    // 正確示例
    if (a) {
        b();
    }
強(qiáng)制使用一致的反勾號(hào)矛双、雙引號(hào)或單引號(hào)

    'quotes': [2, 'single', {//要求盡可能地使用單引號(hào)
    'avoidEscape': true,// 允許字符串使用單引號(hào)或雙引號(hào),只要字符串中包含了一個(gè)其他引號(hào)蟆豫,否則需要轉(zhuǎn)義
    'allowTemplateLiterals': true//允許字符串使用反勾號(hào)`
  }]

  // 錯(cuò)誤示例
  let double = "double";
  let unescaped = "a string containning 'single' quotes";
  // 正確示例
  let single = 'single';
  let single = 'a string containing "double" quotes';
  let double = `double`;

禁止在語(yǔ)句末尾使用分號(hào)(除了消除以[议忽、(、/十减、+ 或 - 開始的語(yǔ)句的歧義):'semi': [2, 'never']
在很多情況下栈幸,JavaScript 引擎可以確定一個(gè)分號(hào)應(yīng)該在什么位置然后自動(dòng)添加它。此特征被稱為 自動(dòng)分號(hào)插入 (ASI)帮辟,被認(rèn)為是 JavaScript 中較為有爭(zhēng)議的特征速址。個(gè)人認(rèn)為分號(hào)還是有必要寫的,故關(guān)閉了這個(gè)選項(xiàng)由驹,寫不寫看個(gè)人了芍锚。
分號(hào)前禁止有空格,分號(hào)后強(qiáng)制有空格

    'semi-spacing': [2, {
    'before': false,
    'after': true
  }]

  // 錯(cuò)誤示例
  let foo ;
  let foo;let bar;
  // 正確示例
  let foo;
  let foo; let bar;
  

塊語(yǔ)句必須總是至少有一個(gè)前置空格:'space-before-blocks': [2, 'always']

    // 錯(cuò)誤示例
    if (a){
        b();
    }
    // 正確示例
    if (a) {
        b();
    }
禁止在參數(shù)的(前有空格:'space-before-function-paren': [2, 'never']

    // 錯(cuò)誤示例
    function foo () {

    }
    // 正確示例
    function foo() {

    }

強(qiáng)制圓括號(hào)內(nèi)沒(méi)有空格:'space-in-parens': [2, 'never']

    // 錯(cuò)誤示例
    foo( 'bar');
    // 正確示例
    foo('bar'); 

要求在綴操作符周圍有空格:'space-infix-ops': 2

    // 錯(cuò)誤示例
    a+b;
    // 正確示例
    a + b;

強(qiáng)制在單詞類一元操作符new/delete/typeof/void/yield后使用空格蔓榄,其他一元操作符-/+/--/++/!/!!要求不使用空格

    'space-unary-ops': [2, {
    'words': true,
    'nonwords': false
  }]

  // 錯(cuò)誤示例
  type!foo;
  -- foo;
    // 正確示例
    type !foo;
    --foo

要求注釋///*必須跟隨至少一個(gè)空白

    'spaced-comment': [2, 'always', {
    'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']//這些字符串也就是塊級(jí)注釋的標(biāo)記并炮,例如一個(gè)額外的 /,被用來(lái)表示是由 doxygen甥郑、vsdoc 等系統(tǒng)讀取的文檔逃魄,這些系統(tǒng)必須有額外的字符。 不管第一個(gè)參數(shù)是 "always" 還是 "never"澜搅、"markers"數(shù)組都會(huì)起作用
  }]

  // 錯(cuò)誤示例
  /*eslint spaced-comment: ["error", "always"]*/
    //This is a comment with no whitespace at the beginning
    
    // 正確示例
    /* eslint spaced-comment: ["error", "always"] */
    // This is a comment with a whitespace at the beginning
    /*global a,b */

禁止模板字符串的花括號(hào)中出現(xiàn)空格:'template-curly-spacing': [2, 'never']

    // 錯(cuò)誤示例
    `hello, ${ people.name}`;
    // 正確示例
    `hello, ${people.name}`;

要求調(diào)用isNaN()檢查NaN'use-isnan': 2

    // 因?yàn)樵?JavaScript 中 NaN 獨(dú)特之處在于它不等于任何值伍俘,包括它本身
    // 錯(cuò)誤示例
    if (foo == NaN){ };
    // 正確示例
    if (isNaN(foo)){ };

要求typeof表達(dá)式只與字符串字面量或其他typeof表達(dá)式進(jìn)行比較,禁止與其他值進(jìn)行比較:'valid-typeof': 2

    // 錯(cuò)誤示例
    typeof foo === 'strnig'
    // 正確示例
    typeof foo === 'string'
    typeof foo === baz

要求所有的立即執(zhí)行函數(shù)表達(dá)式使用括號(hào)包裹起來(lái)店展,但允許其他風(fēng)格:'wrap-iife': [2, 'any']

    // 錯(cuò)誤示例
    let x = function () { return { y: 1};}();
    // 正確示例
    let x = (function () { return { y: 1};})()
    let x = (function () { return { y: 1};}());

強(qiáng)制在yield*表達(dá)式中*前后使用空格:'yield-star-spacing': [2, 'both']
禁止Yoda條件:'yoda': [2, 'never']

    // 錯(cuò)誤示例
    if ('red' === color) { }
    if (true == flag) { }
    // 正確示例
    if (color === 'red') { }
    if (flag == true) { }

在初始化賦值后從未被修改過(guò)的變量养篓,要求使用const聲明:'prefer-const': 2
禁用debugger
    
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0;

要求花括號(hào)內(nèi)有空格秃流,除了{(lán)}赂蕴,禁止以對(duì)象元素開始或結(jié)尾的對(duì)象的花括號(hào)中有空格

    'object-curly-spacing': [2, 'always', {
    objectsInObjects: false
  }]

  // 錯(cuò)誤示例
  let obj = {'foo': 'bar'};
  // 正確示例
  let obj = {'foo': 'bar' };
  let obj = { "foo": { "baz": 1, "bar": 2 }};

禁止在數(shù)組括號(hào)內(nèi)出現(xiàn)空格:'array-bracket-spacing': [2, 'never']

    // 錯(cuò)誤示例
    let arr = [ 'foo', 'bar'];
    // 正確示例
    let arr = ['foo', 'bar'];

參考文檔:vue規(guī)范
參考文檔:JavaScript規(guī)范

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市舶胀,隨后出現(xiàn)的幾起案子概说,更是在濱河造成了極大的恐慌,老刑警劉巖嚣伐,帶你破解...
    沈念sama閱讀 206,126評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件糖赔,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡轩端,警方通過(guò)查閱死者的電腦和手機(jī)放典,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人奋构,你說(shuō)我怎么就攤上這事壳影。” “怎么了弥臼?”我有些...
    開封第一講書人閱讀 152,445評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵宴咧,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我径缅,道長(zhǎng)掺栅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,185評(píng)論 1 278
  • 正文 為了忘掉前任纳猪,我火速辦了婚禮氧卧,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘兆旬。我一直安慰自己假抄,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評(píng)論 5 371
  • 文/花漫 我一把揭開白布丽猬。 她就那樣靜靜地躺著宿饱,像睡著了一般。 火紅的嫁衣襯著肌膚如雪脚祟。 梳的紋絲不亂的頭發(fā)上谬以,一...
    開封第一講書人閱讀 48,970評(píng)論 1 284
  • 那天,我揣著相機(jī)與錄音由桌,去河邊找鬼为黎。 笑死,一個(gè)胖子當(dāng)著我的面吹牛行您,可吹牛的內(nèi)容都是我干的铭乾。 我是一名探鬼主播,決...
    沈念sama閱讀 38,276評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼娃循,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼炕檩!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起捌斧,我...
    開封第一講書人閱讀 36,927評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤笛质,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后捞蚂,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體妇押,經(jīng)...
    沈念sama閱讀 43,400評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評(píng)論 2 323
  • 正文 我和宋清朗相戀三年姓迅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了敲霍。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片俊马。...
    茶點(diǎn)故事閱讀 37,997評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖肩杈,靈堂內(nèi)的尸體忽然破棺而出潭袱,到底是詐尸還是另有隱情,我是刑警寧澤锋恬,帶...
    沈念sama閱讀 33,646評(píng)論 4 322
  • 正文 年R本政府宣布屯换,位于F島的核電站,受9級(jí)特大地震影響与学,放射性物質(zhì)發(fā)生泄漏彤悔。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評(píng)論 3 307
  • 文/蒙蒙 一索守、第九天 我趴在偏房一處隱蔽的房頂上張望晕窑。 院中可真熱鬧,春花似錦卵佛、人聲如沸杨赤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)疾牲。三九已至,卻和暖如春衙解,著一層夾襖步出監(jiān)牢的瞬間阳柔,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評(píng)論 1 260
  • 我被黑心中介騙來(lái)泰國(guó)打工蚓峦, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留舌剂,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,423評(píng)論 2 352
  • 正文 我出身青樓暑椰,卻偏偏與公主長(zhǎng)得像霍转,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子一汽,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容