強(qiáng)調(diào):這是一篇關(guān)于vue-adimn-template項目中.eslintrc.js文件的映射解析,不是eslint教程,本人也是第一次使用eslint做代碼開發(fā)規(guī)范,只是解析該文件,快速入手讀懂規(guī)則。
基礎(chǔ)配置
默認(rèn)情況下,eslint會在所有父級目錄里尋找配置文件,直到根目錄或直到發(fā)現(xiàn)一個有root:true的配置
解析器配置
parserOptions: {
parser: 'babel-eslint',//一個對babel解析器的包裝,使其能夠與eslint兼容
sourceType: 'module'//表示代碼是ECMAScript模塊
}
環(huán)境參數(shù)配置
env: {
browser: true,//瀏覽器環(huán)境中的全局變量
node: true,//node.js全局變量和node.js作用域
es6: true,//啟用除了moudules以外的所有ECMAScript 6特性(該選項會自動設(shè)置ecmaVersion解析器選項為6
}
一個配置文件可以從基礎(chǔ)配置中繼承已啟用的規(guī)則
extends: ['plugin:vue/recommended', 'eslint:recommended']
//'eslint:recommended'啟動了一系列核心規(guī)則
//'plugin:vue/recommended'啟動了一個vue的eslint插件
rules屬性可以做下面的任何事情,以擴(kuò)展或覆蓋規(guī)則
- 啟用額外的規(guī)則
- 改變繼承的規(guī)則級別而不改變它的選項
- 基礎(chǔ)配置:
"eqeqeq":["error","allow-null"] - 派生配置:
"eqeqeq":"warn" - 最后生成的配置:
"eqeqeq":["warn","allow-null"]
- 基礎(chǔ)配置:
- 覆蓋基礎(chǔ)配置中的規(guī)則的選項
- 基礎(chǔ)配置:
"quotes":["error","single","avoid-escape"] - 派生配置:
"quotes":["error","single"] - 最后生成的配置:
"quotes":["error","single"]
- 基礎(chǔ)配置:
下面規(guī)則都放在rules里面,也是主要會影響到代碼編寫規(guī)則的,只對我們項目中的配置做解析,詳細(xì)說明看官方文檔。
ESlint附帶有大量的規(guī)則,設(shè)置規(guī)則必須為下列值之一
-
off/0:關(guān)閉規(guī)則 -
warn/1:開啟規(guī)則,使用警告級別的錯誤 -
error/2:開啟規(guī)則,使用錯誤級別的錯誤
下面每一個都是一條規(guī)則:
與vue有關(guān)的規(guī)則
vue:強(qiáng)制每行的最多屬性數(shù)量
"vue/max-attributes-per-line": [2, {
"singleline": 10,//當(dāng)開始標(biāo)記在一行中時每行的最大屬性數(shù),這里設(shè)置為10
"multiline": {
"max": 1,//當(dāng)開始標(biāo)記位于多行時每行的最大屬性數(shù),這里設(shè)置為1
"allowFirstLine": false//多行時禁止與標(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']決定項目中會用到很多推薦配置:
vue/attributes-order規(guī)定vue屬性需按照一定的規(guī)則排列書寫,詳情見官網(wǎng)風(fēng)格指南
vue/no-v-html規(guī)定不允許使用v-html指令
<!-- 錯誤示例 -->
<div v-html="someHTML"></div>
<!-- 正確示例 -->
<div>{{ someHTML }}</div>
vue/order-in-components規(guī)則要求組件中的性質(zhì)(props,data等)要按一定順序書寫,詳情見vue官網(wǎng)風(fēng)格指南
vue/this-in-template規(guī)則不允許在template里面使用this。
<!-- 錯誤示例 -->
<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成對出現(xiàn)的對象中:'accessor-pairs': 2
要求箭頭函數(shù)之前和之后都有空格:
'arrow-spacing': [2, {
'before': true,
'after': true
}]
強(qiáng)制在左花括號和同一行的下一個token之間有一致的空格,同樣強(qiáng)制右花括號和在同一行的前一個token之間有一只的空格:'block-spacing': [2, 'always']
// 錯誤示例
function foo() {return true;}
// 正確示例
function foo() { return true; }
大括號風(fēng)格要求,將大括號放在控制語句或聲明語句同一行的位置,并允許塊的開括號和閉括號在同一行。
// 規(guī)則代碼,1tbs表示強(qiáng)制大括號放在控制語句或聲明語句同一行的位置
'brace-style': [2, '1tbs', {
'allowSingleLine': true//允許塊的開括號和閉括號在同一行
}]
// 錯誤示例:
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'
}]
禁用拖尾逗號:'comma-dangle': [2, 'never']
// 錯誤示例
let foo = {
bar:'baz',
qux:'quux',
}
let arr = [1,2,];
// 正確示例
let foo = {
bar:'baz',
qux:'quux'
}
let arr = [1,2];
禁止在逗號前使用空格,要求在逗號后使用一個或多個空格
'comma-spacing': [2, {
'before': false,
'after': true
}]
// 錯誤示例
let foo = 1 ,bar=2;
let arr = [1 , 2];
// 正確示例
let foo = 1, bar=2;
let arr = [1, 2];
要求逗號放在數(shù)組元素、對象屬性或變量聲明之后,且在同一行:'comma-style': [2, 'last']
// 錯誤示例
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
// 錯誤示例
class A {
constructor() {
super();
}
}
class A extends B {
constructor() { }
}
// 正確示例
class A {
constructor() { };
}
class A extends B {
constructor() {
super();
}
}
允許在單行中省略大括號,而if/else if/else/for/while和do,在其他情況使用中依然強(qiáng)制使用大括號:'curly': [2, 'multi-line']
// 錯誤示例
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á)式中的點號操作符應(yīng)該和屬性在同一行:'dot-location': [2, 'property']
// 錯誤示例
let foo = Object.
property;
// 正確示例
let foo = Object
.property;
let bar = object.property;
要求在非空文件末尾至少存在一行空行:'eol-last': 2
// 錯誤示例
function doSmth() {
let foo = 2;
}
// 正確示例
function doSmth() {
let foo = 2;
}\n
強(qiáng)制在任何情況下都使用===和!==
'eqeqeq': [2, "always", {
"null": "ignore"http://總是使用===或!==,即使是對null
}]
強(qiáng)制generator函數(shù)中*前后都有空格
'generator-star-spacing': [2, {
'before': true,
'after': true
}]
強(qiáng)制回調(diào)進(jìn)行錯誤處理,該期望當(dāng)在node.js中使用回調(diào)模式時,處理錯誤:'handle-callback-err': [2, '^(err|error)$']
// 錯誤示例
function loadData (err, data) {
doSomething();
}
// 正確示例
function loadData (err, data) {
if(err){
console.log(err.statck);
}
doSomething();
}
強(qiáng)制縮進(jìn)兩個空格
'indent': [2, 2, {
'SwitchCase': 1//設(shè)置case子句相對于switch語句縮進(jìn)2個空格
}]
強(qiáng)制所有不包含單引號的jsx屬性值使用單引號,如果想在jsx的屬性中使用單引號,必須使用雙引號作為字符串分隔符:'jsx-quotes': [2, 'prefer-single']
禁止在對象字面量的鍵和冒號之間存在空格,要求在對象字面量的冒號和值之間存在至少有一個空格。
'key-spacing': [2, {
'beforeColon': false,
'afterColon': true
}]
// 錯誤示例
let obj = { foo :42 };
let obj = { foo : 42 };
// 正確示例
let obj = { foo: 42 };
要求在關(guān)鍵字之前和之后至少都有一個空格。
該規(guī)則強(qiáng)制關(guān)鍵字和類似關(guān)鍵字的符號周圍空格的一致性: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
}]
// 錯誤示例
if(foo) {
//...
}else if (bar) {
//...
}else {
//...
}
// 正確示例
if (foo) {
//...
} else if (bar) {
//...
} else {
}
要求調(diào)用new操作符時有首字母大寫的函數(shù),允許調(diào)用首字母大寫的函數(shù)時沒有new操作符。
'new-cap': [2, {
'newIsCap': true,
'capIsNew': false
}]
// 錯誤示例
let friend = new person();
// 正確示例
let friend = new Person();
let person = Person();
要求調(diào)用無參構(gòu)造函數(shù)時帶括號:'new-parens': 2
// 錯誤示例
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ù)來創(chuàng)建數(shù)組,唯一的例外是通過給構(gòu)造函數(shù)傳入指定的一個數(shù)值來創(chuàng)建稀疏數(shù)組:'no-array-constructor': 2
// 錯誤示例
Array(0, 1, 2);
new Array(0, 1, 2);
// 正確示例
Array(500);
new Array(someOtherArray.length)
禁用arguments.caller或arguments.callee:'no-caller': 2
允許使用console:no-console': 'off'
禁止修改類聲明的變量:'no-class-assign': 2
// 錯誤示例
class A { };
A = 0;
// 正確示例
let A = class A { }
A = 0;
禁止在條件表達(dá)式中出現(xiàn)賦值操作符,在條件語句中很容易將一個比較運算符==/===錯寫成=,所以引用該規(guī)則,即禁止在 if、for、while 和 do...while 語句中出現(xiàn)模棱兩可的賦值操作符:'no-cond-assign': 2
// 錯誤示例
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)的控制字符是特殊的、不可見的字符。這些字符很少被用在 JavaScript 字符串中,所以一個正則表達(dá)式如果包含這些字符的,很有可能一個錯誤:'no-control-regex': 2
// 錯誤示例
let pattern1 = /\x1f/;
let pattern2 = new RegExp("\x1f");
// 正確示例
let pattern1 = /\x20/;
let pattern2 = new RegExp("\x20");
禁止使用delete刪除變量,delete 的目的是刪除對象的屬性。使用 delete 操作刪除一個變量可能會導(dǎo)致意外情況發(fā)生:'no-delete-var': 2
禁止在function定義中出現(xiàn)重復(fù)的參數(shù),該規(guī)則并不適用于箭頭函數(shù)或類方法:'no-dupe-args': 2
禁止類成員中出現(xiàn)重復(fù)的名稱,如果類成員中有同名的聲明,最后一個聲明將會默默地覆蓋其它聲明。 它可能導(dǎo)致意外的行為:'no-dupe-class-members': 2
禁止對象字面量中出現(xiàn)重復(fù)的鍵:'no-dupe-keys': 2
禁止出現(xiàn)重復(fù)的case標(biāo)簽:'no-duplicate-case': 2
禁止在正則表達(dá)式中出現(xiàn)空字符集,在正則表達(dá)式中空字符集不能匹配任何字符,它們可能是打字錯誤:'no-empty-pattern': 2
禁用eval(),JavaScript 中的 eval() 函數(shù)是有潛在危險的,而且經(jīng)常被誤用。在不可信的代碼里使用 eval() 有可能使程序受到不同的注入攻擊。eval() 在大多數(shù)情況下可以被更好的解決問題的方法代替:'no-eval': 2
禁止對catch子句中的異常重新賦值,在 try 語句中的 catch 子句中,如果意外地(或故意地)給異常參數(shù)賦值,是不可能引用那個位置的錯誤的。由于沒有 arguments 對象提供額外的方式訪問這個異常,對它進(jìn)行賦值絕對是毀滅性的:'no-ex-assign': 2
禁止擴(kuò)展原生對象,在 JavaScript 中,你可以擴(kuò)展任何對象,包括內(nèi)置或者”原生”對象。有時人們改變這些原生對象的行為,會影響到代碼中的其它部分。例如我們重寫了一個內(nèi)建的方法,將會影響到所有對象,甚至是其它內(nèi)建對象:'no-extend-native': 2
// 錯誤示例
Object.prototype.a = 'a';
避免不必要的 bind() 使用,不會標(biāo)記有函數(shù)參數(shù)綁定的bind() 的使用情況,把所有使用bind() 的箭頭函數(shù)標(biāo)記為是有問題的:'no-extra-bind': 2
// 錯誤示例
let x = function () {
foo();
}.bind(bar);
// 正確示例
let x = function () {
this.foo();
}.bind(bar);
禁止不必要的布爾類型轉(zhuǎn)換:'no-extra-boolean-cast': 2
// 錯誤示例
!!!bar;
!!foo ? baz : bat;
Boolean(!!bar);
if(Boolean(foo)){ };
// 正確示例
let foo = !!bar;//這里兩個感嘆號是有意義的,第一個取反,第二個把bar轉(zhuǎn)換成布爾類型
在函數(shù)表達(dá)式周圍禁止不必要的圓括號:'no-extra-parens': [2, 'functions']
// 錯誤示例
((function foo() {}))();
let y = (function () {return 1;});
禁止case落空,即從上一個case落入下一個case執(zhí)行,旨在消除非故意case落空行為:'no-fallthrough': 2
// 錯誤示例
switch(foo) {
case 1:
doSomething();
case 2:
doSomethingElse();
}
// 正確示例
switch(foo) {
case 1:
doSomething();
//falls through,標(biāo)記此處希望執(zhí)行落空操作
case 2:
doSomethingElse();
}
禁止不規(guī)范的浮點小數(shù):'no-floating-decimal': 2
// 錯誤示例
let num = .5;
let num = 2.;
let num = -.8;
// 正確示例
let num = 0.5;
let num = 2.0;
let num = -0.8;
禁止對function聲明重新賦值:'no-func-assign': 2
// 錯誤示例
function foo() { }
foo = bar;
// 正確示例
let foo = function() { };
foo=bar;
禁止隱式的eval(),消除使用 setTimeout()、setInterval() 或 execScript() 時隱式的 eval():'no-implied-eval': 2
// 錯誤示例
setTimeout("alert('hi');",100);
setInterval("alert('hi');",100);
// 正確示例
setTimeout(function(){
alert('hi');
},100);
禁止function聲明出現(xiàn)在嵌套的語句塊中:'no-inner-declarations': [2, 'functions']
// 錯誤示例
if (test) {
function doSomething() { };
}
// 正確示例
if (test) {
let fn = function fnExpression() {}
}
禁止在RegExp構(gòu)造函數(shù)中出現(xiàn)無效的正則表達(dá)式,在正則表達(dá)式字面量中無效的模式在代碼解析時會引起 SyntaxError,但是 RegExp 的構(gòu)造函數(shù)中無效的字符串只在代碼執(zhí)行時才會拋出 SyntaxError,所以啟用該規(guī)則:'no-invalid-regexp': 2
// 錯誤示例
RegExp('[');
RegExp('.','z');
new RegExp('\\');
// 正確示例
RegExp('.');
禁止不規(guī)則的空白,無效的或不規(guī)則的空白會導(dǎo)致 ECMAScript 5 解析問題,也會使代碼難以調(diào)試:'no-irregular-whitespace': 2
禁用__iterator__屬性:'no-iterator': 2
禁用與變量同名的標(biāo)簽:'no-label-var': 2
禁用標(biāo)簽語句
'no-labels': [2, {
'allowLoop': false,
'allowSwitch': false
}]
// 錯誤示例
label:
while (true) {
break label;
}
// 正確示例
while (true) {
break;
}
禁止不必要的嵌套塊:'no-lone-blocks': 2
// 錯誤示例
if (foo) {
bar();
{
baz();
}
}
// 正確示例
if (foo) {
if (bar) {
baz();
}
}
禁止使用空格和tab混合縮進(jìn):'no-mixed-spaces-and-tabs': 2
禁止出現(xiàn)多個空格,在某行中,出現(xiàn)多個空格而且不是用來作縮進(jìn)的,通常是個錯誤:'no-multi-spaces': 2
// 錯誤示例
let a = 1;
if (foo === 'bar') { }
// 正確示例
let a = 1;
if (foo === 'bar') { }
禁止使用多行字符串, JavaScript 中,可以在新行之前使用斜線創(chuàng)建多行字符串,這不是一個好的做法,因為它是 JavaScript 中的一個非正式的特性:'no-multi-str': 2
// 錯誤示例
let x = 'line 1 \
line 2';
// 正確示例
let x = 'line 1\n' +
'line 2';
不允許多個空行,最大連續(xù)空行數(shù)為1
'no-multiple-empty-lines': [2, {
'max': 1
}]
// 錯誤示例
let foo = 5;
let bar = 3;
// 正確示例
let foo = 5;
let bar = 3;
禁止對原生對象或只讀的全局對象進(jìn)行賦值:'no-global-assign': 2
禁止對關(guān)系運算符的左操作數(shù)使用否定操作符,關(guān)系運算符有in、instanceof:'no-unsafe-negation': 2
// 錯誤示例
if (!key in object) {
}
// 正確示例
if (!(key in object)) {
}
禁止使用Object構(gòu)造函數(shù):'no-new-object': 2
// 錯誤示例
let myObject = new Object();
// 正確示例
let myObject = {};
不允許new require形式的表達(dá)式:'no-new-require': 2
// 錯誤示例
let appHeader = new require('app-header');
// 正確示例
let ArrHeader = require('app-header');
let appHeader = new AppHeader();
禁止Symbol操作符和new一起使用:'no-new-symbol': 2
禁止使用原始String/Number/Boolean包裝實例:'no-new-wrappers': 2
禁止將Math/JSON/Reflect對象當(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時不允許字符串拼接,在 Node.js 中,全局變量 _dirname 和 _filename 分別代表當(dāng)前執(zhí)行腳本的目錄路徑以及文件路徑,阻止在 Node.js 中使用字符串拼接路徑:'no-path-concat': 2
// 錯誤示例
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)多個空格:'no-regex-spaces': 2
禁止在返回語句中賦值,除非使用括號把它們括起來:'no-return-assign': [2, 'except-parens']
禁止自我賦值:'no-self-assign': 2
禁止自身比較:'no-self-compare': 2
不允許使用逗號操作符,除了在初始化或者更新部分for語句時或者表達(dá)式序列被明確包裹在括號中:'no-sequences': 2
// 逗號操作符包含多個表達(dá)式,其中只有一個是可使用的。它從左到右計算每一個操作數(shù)并且返回最后一個操作數(shù)的值。然而,這往往掩蓋了它的副作用,它的使用經(jīng)常會發(fā)生事故,如下:
let a = (3, 5);//a = 5
a = b += 5, a+b;//設(shè)b=1;此時該語句返回12,打印后a=6,b=6;
// 錯誤示例
foo = doSomething(),val;
// 正確示例
foo = (doSomething(),val);
關(guān)鍵字不能被遮蔽:'no-shadow-restricted-names': 2
全局對象的屬性值 (NaN、Infinity、undefined)和嚴(yán)格模式下被限定的標(biāo)識符 eval、arguments 也被認(rèn)為是關(guān)鍵字。重定義關(guān)鍵字會產(chǎn)生意想不到的后果且易迷惑其他讀者
禁止在函數(shù)標(biāo)識符和其調(diào)用之間有空格:'no-spaced-func': 2
// 錯誤示例
fn ();
fn
();
// 正確示例
fn();
禁用稀疏數(shù)組:'no-sparse-arrays': 2
禁止在構(gòu)造函數(shù)中,在調(diào)用 super() 之前使用 this 或 super:'no-this-before-super': 2
保持異常拋出的一致性,禁止拋出字面量和那些不可能是 Error 對象的表達(dá)式:'no-throw-literal': 2
// 錯誤示例
throw 'error'
// 正確示例
throw new Error('error');
禁用行尾空格:'no-trailing-spaces': 2
有時在編輯文件的過程中,你可以在行的末尾以額外的空格作為結(jié)束。這些空格差異可以被源碼控制系統(tǒng)識別出并被標(biāo)記為差異,給開發(fā)人員帶來挫敗感。雖然這種額外的空格并不會造成功能性的問題,許多編碼規(guī)范要求在提交代碼之前刪除尾部空格。
禁用未聲明的變量,除非顯式地在/*global*/注釋中指定過:'no-undef': 2
// 錯誤示例
let a = someFunction();
b = 10;
// 正確示例
/*global b*/
b = 10;
不允許初始化變量值為undefined:'no-undef-init': 2
禁止使用令人困惑的多行表達(dá)式,個人理解就是別漏分號:'no-unexpected-multiline': 2
// 在JavaScript中,一下情況不會自動插入分號
// 該語句有一個沒有閉合的括號,數(shù)組字面量或?qū)ο笞置媪炕蚱渌撤N方式,不是有效結(jié)束一個語句的方式。(比如,以 . 或 , 結(jié)尾)
// 該行是 -- 或 ++(在這種情況下它將減量/增量的下一個標(biāo)記)
// 它是個 for()、while()、do、if() 或 else,并且沒有 {
// 下一行以 [、(、+、*、/、-、,、. 或一些其它在單個表達(dá)式中兩個標(biāo)記之間的二元操作符。
// 錯誤示例
let foo = bar
(1 || 2).baz();
// 正確示例
let foo = bar;
(1 || 2).baz();
禁用一成不變的循環(huán)條件,循環(huán)條件中的變量在循環(huán)中是要經(jīng)常改變的。如果不是這樣,那么可能是個錯誤:'no-unmodified-loop-condition': 2
禁止可以表達(dá)為更簡單結(jié)構(gòu)的額三元操作符,禁止條件表達(dá)式作為默認(rèn)的賦值模式
'no-unneeded-ternary': [2, {
'defaultAssignment': false
}]
// 錯誤示例
let a = x === 2 ? true : false;
let a = x ? x : 1;
// 正確示例
let a = x === 2;
禁止在return/throw/continue/break語句后出現(xiàn)不可達(dá)代碼:'no-unreachable': 2
禁止在finally語句塊中出現(xiàn)控制流語句:'no-unsafe-finally': 2
JavaScript 暫停 try 和 catch 語句塊中的控制流語句,直到 finally 語句塊執(zhí)行完畢。所以,當(dāng) return、throw、break 和 continue 出現(xiàn)在 finally 中時, try 和 catch 語句塊中的控制流語句將被覆蓋,這被認(rèn)為是意外的行為。
禁止出現(xiàn)未使用過的變量,檢查所有變量包括全局環(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
禁止在對象中使用不必要的計算屬性:'no-useless-computed-key': 2
// 錯誤示例
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
// 錯誤示例
class A {
construction () {
}
}
// 正確示例
class A {
construction (){
doSomething();
}
}
禁止不必要的轉(zhuǎn)移:'no-useless-escape': 0
禁止屬性前有空白:'no-whitespace-before-property': 2
// 錯誤示例
foo [bar]
foo. bar
// 正確示例
foo[bar]
foo.bar
禁用with語句:'no-with': 2
要求每個作用域的初始化的變量有多個變量聲明
'one-var': [2, {
'initialized': 'never'
}]
// 錯誤示例
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'//:放在前面
}
}]
// 錯誤示例
foo = 1
+
2;
foo = 1
+ 2;
// 正確示例
foo = 1 + 2;
foo = 1 +
2;
禁止塊語句和類的開始或末尾有空行:'padded-blocks': [2, 'never']
// 錯誤示例
if (a) {
b();
}
// 正確示例
if (a) {
b();
}
強(qiáng)制使用一致的反勾號、雙引號或單引號
'quotes': [2, 'single', {//要求盡可能地使用單引號
'avoidEscape': true,// 允許字符串使用單引號或雙引號,只要字符串中包含了一個其他引號,否則需要轉(zhuǎn)義
'allowTemplateLiterals': true//允許字符串使用反勾號`
}]
// 錯誤示例
let double = "double";
let unescaped = "a string containning 'single' quotes";
// 正確示例
let single = 'single';
let single = 'a string containing "double" quotes';
let double = `double`;
禁止在語句末尾使用分號(除了消除以[、(、/、+ 或 - 開始的語句的歧義):'semi': [2, 'never']
在很多情況下,JavaScript 引擎可以確定一個分號應(yīng)該在什么位置然后自動添加它。此特征被稱為 自動分號插入 (ASI),被認(rèn)為是 JavaScript 中較為有爭議的特征。個人認(rèn)為分號還是有必要寫的,故關(guān)閉了這個選項,寫不寫看個人了。
分號前禁止有空格,分號后強(qiáng)制有空格
'semi-spacing': [2, {
'before': false,
'after': true
}]
// 錯誤示例
let foo ;
let foo;let bar;
// 正確示例
let foo;
let foo; let bar;
塊語句必須總是至少有一個前置空格:'space-before-blocks': [2, 'always']
// 錯誤示例
if (a){
b();
}
// 正確示例
if (a) {
b();
}
禁止在參數(shù)的(前有空格:'space-before-function-paren': [2, 'never']
// 錯誤示例
function foo () {
}
// 正確示例
function foo() {
}
強(qiáng)制圓括號內(nèi)沒有空格:'space-in-parens': [2, 'never']
// 錯誤示例
foo( 'bar');
// 正確示例
foo('bar');
要求在綴操作符周圍有空格:'space-infix-ops': 2
// 錯誤示例
a+b;
// 正確示例
a + b;
強(qiáng)制在單詞類一元操作符new/delete/typeof/void/yield后使用空格,其他一元操作符-/+/--/++/!/!!要求不使用空格
'space-unary-ops': [2, {
'words': true,
'nonwords': false
}]
// 錯誤示例
type!foo;
-- foo;
// 正確示例
type !foo;
--foo
要求注釋//和/*必須跟隨至少一個空白
'spaced-comment': [2, 'always', {
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']//這些字符串也就是塊級注釋的標(biāo)記,例如一個額外的 /,被用來表示是由 doxygen、vsdoc 等系統(tǒng)讀取的文檔,這些系統(tǒng)必須有額外的字符。 不管第一個參數(shù)是 "always" 還是 "never"、"markers"數(shù)組都會起作用
}]
// 錯誤示例
/*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 */
禁止模板字符串的花括號中出現(xiàn)空格:'template-curly-spacing': [2, 'never']
// 錯誤示例
`hello, ${ people.name}`;
// 正確示例
`hello, ${people.name}`;
要求調(diào)用isNaN()檢查NaN:'use-isnan': 2
// 因為在 JavaScript 中 NaN 獨特之處在于它不等于任何值,包括它本身
// 錯誤示例
if (foo == NaN){ };
// 正確示例
if (isNaN(foo)){ };
要求typeof表達(dá)式只與字符串字面量或其他typeof表達(dá)式進(jìn)行比較,禁止與其他值進(jìn)行比較:'valid-typeof': 2
// 錯誤示例
typeof foo === 'strnig'
// 正確示例
typeof foo === 'string'
typeof foo === baz
要求所有的立即執(zhí)行函數(shù)表達(dá)式使用括號包裹起來,但允許其他風(fēng)格:'wrap-iife': [2, 'any']
// 錯誤示例
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']
// 錯誤示例
if ('red' === color) { }
if (true == flag) { }
// 正確示例
if (color === 'red') { }
if (flag == true) { }
在初始化賦值后從未被修改過的變量,要求使用const聲明:'prefer-const': 2
禁用debugger
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0;
要求花括號內(nèi)有空格,除了{(lán)},禁止以對象元素開始或結(jié)尾的對象的花括號中有空格
'object-curly-spacing': [2, 'always', {
objectsInObjects: false
}]
// 錯誤示例
let obj = {'foo': 'bar'};
// 正確示例
let obj = {'foo': 'bar' };
let obj = { "foo": { "baz": 1, "bar": 2 }};
禁止在數(shù)組括號內(nèi)出現(xiàn)空格:'array-bracket-spacing': [2, 'never']
// 錯誤示例
let arr = [ 'foo', 'bar'];
// 正確示例
let arr = ['foo', 'bar'];
參考文檔:vue規(guī)范
參考文檔:JavaScript規(guī)范