Eslint 中文開發手冊

keyword-spacing (Rules) - Eslint 中文開發手冊

在--fix命令列上的選項可以自動修復一些被這條規則反映的問題。

關鍵字是 JavaScript 的語法元素，例如function和if。這些識別符號對語言有特殊意義，因此在程式碼編輯器中經常以不同的顏色顯示。作為語言的重要組成部分，風格指南通常指的是圍繞關鍵詞使用的空格。例如，您可能有一個樣式指南，指出關鍵字應始終由空格包圍，這意味著if-else語句必須如下所示：

if (foo) {
    // ...
} else {
    // ...
}

當然，你也可以有一個不允許圍繞關鍵字的空格的風格指南。

規則細節

此規則強制執行圍繞關鍵字和關鍵字標記的一致空格: as (in module declarations), async (of async functions), await (of await expressions), break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, finally, for, from (in module declarations), function, get (of getters), if, import, in, instanceof, let, new, of (in for-of statements), return, set (of setters), static, super, switch, this, throw, try, typeof, var, void, while, with, and yield。這個規則的設計要謹慎，不要與其他間隔規則相沖突：它不適用於其他規則報告問題的間隔。

選項

該規則有一個物件選項：

"before": true （預設）在關鍵字之前至少需要一個空格"before": false 在關鍵字之前禁止使用空格"after": true （預設）在關鍵字後至少需要一個空格"after": false 在關鍵字後禁止使用空格"overrides" 允許覆蓋指定關鍵字的間距樣式

before

此規則的預設程式碼錯誤程式碼示例{ "before": true }：

/*eslint keyword-spacing: ["error", { "before": true }]*/

if (foo) {
    //...
}else if (bar) {
    //...
}else {
    //...
}

具有預設選項的此規則的正確程式碼示例{ "before": true }：

/*eslint keyword-spacing: ["error", { "before": true }]*/
/*eslint-env es6*/

if (foo) {
    //...
} else if (bar) {
    //...
} else {
    //...
}

// no conflict with `array-bracket-spacing`
let a = [this];
let b = [function() {}];

// no conflict with `arrow-spacing`
let a = ()=> this.foo;

// no conflict with `block-spacing`
{function foo() {}}

// no conflict with `comma-spacing`
let a = [100,this.foo, this.bar];

// not conflict with `computed-property-spacing`
obj[this.foo] = 0;

// no conflict with `generator-star-spacing`
function *foo() {}

// no conflict with `key-spacing`
let obj = {
    foo:function() {}
};

// no conflict with `object-curly-spacing`
let obj = {foo: this};

// no conflict with `semi-spacing`
let a = this;function foo() {}

// no conflict with `space-in-parens`
(function () {})();

// no conflict with `space-infix-ops`
if ("foo"in {foo: 0}) {}
if (10+this.foo<= this.bar) {}

// no conflict with `jsx-curly-spacing`
let a = <A foo={this.foo} bar={function(){}} />

此規則的錯誤程式碼示例包含以下{ "before": false }選項：

/*eslint keyword-spacing: ["error", { "before": false }]*/

if (foo) {
    //...
} else if (bar) {
    //...
} else {
    //...
}

此規則的正確程式碼示例包含以下{ "before": false }選項：

/*eslint keyword-spacing: ["error", { "before": false }]*/

if (foo) {
    //...
}else if (bar) {
    //...
}else {
    //...
}

after

此規則的預設程式碼錯誤程式碼示例{ "after": true }：

/*eslint keyword-spacing: ["error", { "after": true }]*/

if(foo) {
    //...
} else if(bar) {
    //...
} else{
    //...
}

具有預設選項的此規則的正確程式碼示例{ "after": true }：

/*eslint keyword-spacing: ["error", { "after": true }]*/

if (foo) {
    //...
} else if (bar) {
    //...
} else {
    //...
}

// not conflict with `array-bracket-spacing`
let a = [this];

// not conflict with `arrow-spacing`
let a = ()=> this.foo;

// not conflict with `comma-spacing`
let a = [100, this.foo, this.bar];

// not conflict with `computed-property-spacing`
obj[this.foo] = 0;

// not conflict with `generator-star-spacing`
function* foo() {}

// not conflict with `key-spacing`
let obj = {
    foo:function() {}
};

// not conflict with `func-call-spacing`
class A {
    constructor() {
        super();
    }
}

// not conflict with `object-curly-spacing`
let obj = {foo: this};

// not conflict with `semi-spacing`
let a = this;function foo() {}

// not conflict with `space-before-function-paren`
function() {}

// no conflict with `space-infix-ops`
if ("foo"in{foo: 0}) {}
if (10+this.foo<= this.bar) {}

// no conflict with `space-unary-ops`
function* foo(a) {
    return yield+a;
}

// no conflict with `yield-star-spacing`
function* foo(a) {
    return yield* a;
}

// no conflict with `jsx-curly-spacing`
let a = <A foo={this.foo} bar={function(){}} />

此規則的錯誤程式碼示例包含以下{ "after": false }選項：

/*eslint keyword-spacing: ["error", { "after": false }]*/

if (foo) {
    //...
} else if (bar) {
    //...
} else {
    //...
}

此規則的正確程式碼示例包含以下{ "after": false }選項：

/*eslint keyword-spacing: ["error", { "after": false }]*/

if(foo) {
    //...
} else if(bar) {
    //...
} else{
    //...
}

overrides

此規則的正確程式碼示例包含以下{ "overrides": { "if": { "after": false }, "for": { "after": false }, "while": { "after": false } } }選項：

/*eslint keyword-spacing: ["error", { "overrides": {
  "if": { "after": false },
  "for": { "after": false },
  "while": { "after": false }
} }]*/

if(foo) {
    //...
} else if(bar) {
    //...
} else {
    //...
}

for(;;);

while(true) {
  //...
}

何時不使用它

如果您不希望強制實現關鍵字間隔的一致性，那麼禁用此規則是安全的。

版本

此規則在 ESLint 2.0.0-beta.1中引入。

資源

Rule sourceDocumentation source

  Eslint 中文開發手冊