keyword-spacing

強制在關鍵字之前和之後保持一致的間距

🔧

此規則報告的某些問題可以透過 --fix 命令列選項自動修正

重要事項

此規則在 ESLint v8.53.0 中已棄用。請使用對應的規則，位於 @stylistic/eslint-plugin-js。

了解更多

關鍵字是 JavaScript 的語法元素，例如 try 和 if。這些關鍵字對語言具有特殊意義，因此在程式碼編輯器中通常以不同的顏色顯示。作為語言的重要組成部分，風格指南通常會提及關鍵字周圍應使用的間距。例如，您的風格指南可能會規定關鍵字應始終用空格包圍，這意味著 if-else 語句必須看起來像這樣

if (foo) {
    // ...
} else {
    // ...
}
1
2
3
4
5

當然，您也可以制定風格指南，禁止關鍵字周圍出現空格。

但是，如果您想強制執行 function 關鍵字和後面的左括號之間的間距風格，請參考 space-before-function-paren。

規則詳細資訊

此規則強制在關鍵字和類似關鍵字的 tokens 周圍保持一致的間距：as (在模組宣告中)、async (在 async 函數中)、await (在 await 表達式中)、break、case、catch、class、const、continue、debugger、default、delete、do、else、export、extends、finally、for、from (在模組宣告中)、function、get (在 getters 中)、if、import、in (在 for-in 語句中)、let、new、of (在 for-of 語句中)、return、set (在 setters 中)、static、super、switch、this、throw、try、typeof、var、void、while、with 和 yield。此規則經過精心設計，不會與其他間距規則衝突：它不適用於其他規則報告問題的間距。

選項

此規則有一個物件選項

"before": true (預設) 要求關鍵字前至少有一個空格
"before": false 禁止關鍵字前有空格
"after": true (預設) 要求關鍵字後至少有一個空格
"after": false 禁止關鍵字後有空格
"overrides" 允許覆寫指定關鍵字的間距風格

before

以下是使用預設 { "before": true } 選項時，不正確程式碼的範例

在 Playground 中開啟

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

if (foo) {
    //...
}else if (bar) {
    //...
}else {
    //...
}
1
2
3
4
5
6
7
8
9

以下是使用預設 { "before": true } 選項時，正確程式碼的範例

在 Playground 中開啟

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

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

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

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

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

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

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

// Avoid conflict with `generator-star-spacing`
function *bar() {}

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

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

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

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

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

// Avoid conflict with `jsx-curly-spacing`
let f = <A foo={this.foo} bar={function(){}} />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

以下是使用 { "before": false } 選項時，不正確程式碼的範例

在 Playground 中開啟

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

if (foo) {
    //...
} else if (bar) {
    //...
} else {
    //...
}
1
2
3
4
5
6
7
8
9

以下是使用 { "before": false } 選項時，正確程式碼的範例

在 Playground 中開啟

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

if (foo) {
    //...
}else if (bar) {
    //...
}else {
    //...
}
1
2
3
4
5
6
7
8
9

after

以下是使用預設 { "after": true } 選項時，不正確程式碼的範例

在 Playground 中開啟

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

if(foo) {
    //...
} else if(bar) {
    //...
} else{
    //...
}
1
2
3
4
5
6
7
8
9

以下是使用預設 { "after": true } 選項時，正確程式碼的範例

在 Playground 中開啟

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

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

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

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

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

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

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

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

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

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

// Avoid conflict with `semi-spacing`
let d = this;function bar() {}

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

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

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

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

// Avoid conflict with `jsx-curly-spacing`
let e = <A foo={this.foo} bar={function(){}} />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

以下是使用 { "after": false } 選項時，不正確程式碼的範例

在 Playground 中開啟

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

if (foo) {
    //...
} else if (bar) {
    //...
} else {
    //...
}
1
2
3
4
5
6
7
8
9

以下是使用 { "after": false } 選項時，正確程式碼的範例

在 Playground 中開啟

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

if(foo) {
    //...
} else if(bar) {
    //...
} else{
    //...
}
1
2
3
4
5
6
7
8
9

overrides

以下是使用 { "overrides": { "if": { "after": false }, "for": { "after": false }, "while": { "after": false }, "static": { "after": false }, "as": { "after": false } } } 選項時，正確程式碼的範例

在 Playground 中開啟

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

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

for(;;);

while(true) {
    //...
}

class C {
    static{
        //...
    }
}

export { C as"my class" };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

何時不該使用

如果您不想強制執行關鍵字間距的一致性，那麼停用此規則是安全的。

版本

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

資源

編輯此頁面