# keyword-spacing

在关键字前后强制保持一致的间距

一些该规则报告的问题可以通过 --fix 命令行选项自动修复

关键字是 JavaScript 的语法元素，例如 try 和 if。这些关键字对语言具有特殊意义，因此在代码编辑器中经常以不同的颜色出现。作为语言的重要组成部分，样式指南通常指的是应该在关键字周围使用的间距。例如，您可能有一个样式指南，它说关键字应该始终被空格包围，这意味着 if-else 语句必须如下所示：

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

当然，您也可以有一个不允许关键字周围有空格的样式指南。

但是，如果要强制 function 关键字和后面的左括号之间的空格样式，请参考 space-before-function-paren。

# 规则详情

此规则强制在关键字和类似关键字的标记周围保持一致的间距：as（在模块声明中）、async（在异步函数中）、await（在等待表达式中）、break、case、catch、class、const、continue、debugger、default、 delete、do、else、export、extends、finally、for、from（在模块声明中）、function、get（在 getter 中）、if、import、in（在 for-in 语句中）、let、new、of（在 for -of statements), return, set (of 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 } 选项的错误代码示例：

/*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 {
    //...
}

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

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

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

// Avoid conflict with `comma-spacing`
let a = [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 obj = {
    foo:function() {}
};

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

// Avoid conflict with `semi-spacing`
let a = 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 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 {
    //...
}

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

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

// Avoid conflict with `comma-spacing`
let a = [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 obj = {
    foo:function() {}
};

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

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

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

// 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* foo(a) {
    return yield+a;
}

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

// Avoid 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 }, "static": { "after": false }, "as": { "after": false } } } 选项的正确代码示例：

/*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" };

# 何时不使用

如果您不想强制关键字间距的一致性，那么禁用此规则是安全的。

← key-spacing line-comment-position →