keyword-spacing
关键字是 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
(获取器的)、if
、import
、in
(在 for-in 语句中)、let
、new
、of
(在 for-of 语句中)、return
、set
(设置器的)、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 @stylistic/keyword-spacing: ["error", { "before": true }]*/
if (foo) {
//...
}else if (bar) {
//...
}else {
//...
}
使用默认 { "before": true }
选项时,此规则的正确代码示例
/*eslint @stylistic/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 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(){}} />
使用 { "before": false }
选项时,此规则的错误代码示例
/*eslint @stylistic/keyword-spacing: ["error", { "before": false }]*/
if (foo) {
//...
} else if (bar) {
//...
} else {
//...
}
使用 { "before": false }
选项时,此规则的正确代码示例
/*eslint @stylistic/keyword-spacing: ["error", { "before": false }]*/
if (foo) {
//...
}else if (bar) {
//...
}else {
//...
}
after
使用默认 { "after": true }
选项时,此规则的错误代码示例
/*eslint @stylistic/keyword-spacing: ["error", { "after": true }]*/
if(foo) {
//...
} else if(bar) {
//...
} else{
//...
}
使用默认 { "after": true }
选项时,此规则的正确代码示例
/*eslint @stylistic/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 `function-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(){}} />
使用 { "after": false }
选项时,此规则的错误代码示例
/*eslint @stylistic/keyword-spacing: ["error", { "after": false }]*/
if (foo) {
//...
} else if (bar) {
//...
} else {
//...
}
使用 { "after": false }
选项时,此规则的正确代码示例
/*eslint @stylistic/keyword-spacing: ["error", { "after": false }]*/
if(foo) {
//...
} else if(bar) {
//...
} else{
//...
}
覆盖
使用 { "overrides": { "if": { "after": false }, "for": { "after": false }, "while": { "after": false }, "static": { "after": false }, "as": { "after": false } } }
选项时,此规则的正确代码示例
/*eslint @stylistic/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" };
何时不使用它
如果您不想强制执行关键字间距的一致性,则可以安全地禁用此规则。