非常教程

Eslint参考手册

规则 | Rules

keyword-spacing

--fix命令行上的选项可以自动修复一些被这条规则反映的问题。

关键字是 JavaScript 的语法元素,例如functionif。这些标识符对语言有特殊意义,因此在代码编辑器中经常以不同的颜色显示。作为语言的重要组成部分,风格指南通常指的是围绕关键词使用的空格。例如,您可能有一个样式指南,指出关键字应始终由空格包围,这意味着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 source
  • Documentation source

规则 | Rules相关

1.accessor-pairs
2.array-bracket-newline
3.array-bracket-spacing
4.array-callback-return
5.array-element-newline
6.arrow-body-style
7.arrow-parens
8.arrow-spacing
9.block-scoped-var
10.block-spacing
11.brace-style
12.callback-return
13.camelcase
14.capitalized-comments
15.class-methods-use-this
16.comma-dangle
17.comma-spacing
18.comma-style
19.complexity
20.computed-property-spacing
21.consistent-return
22.consistent-this
23.constructor-super
24.curly
25.default-case
26.dot-location
27.dot-notation
28.eol-last
29.eqeqeq
30.for-direction
31.func-call-spacing
32.func-name-matching
33.func-names
34.func-style
35.function-paren-newline
36.generator-star
37.generator-star-spacing
38.getter-return
39.global-require
40.global-strict
41.guard-for-in
42.handle-callback-err
43.id-blacklist
44.id-length
45.id-match
46.implicit-arrow-linebreak
47.indent
48.indent-legacy
49.init-declarations
50.jsx-quotes
51.key-spacing
52.line-comment-position
53.linebreak-style
54.lines-around-comment
55.lines-around-directive
56.lines-between-class-members
57.max-depth
58.max-len
59.max-lines
60.max-nested-callbacks
61.max-params
62.max-statements
63.max-statements-per-line
64.multiline-comment-style
65.multiline-ternary
66.new-cap
67.new-parens
68.newline-after-var
69.newline-before-return
70.newline-per-chained-call
71.no-alert
72.no-array-constructor
73.no-arrow-condition
74.no-await-in-loop
75.no-bitwise
76.no-buffer-constructor
77.no-caller
78.no-case-declarations
79.no-catch-shadow
80.no-class-assign
81.no-comma-dangle
82.no-compare-neg-zero
83.no-cond-assign
84.no-confusing-arrow
85.no-console
86.no-const-assign
87.no-constant-condition
88.no-continue
89.no-control-regex
90.no-debugger
91.no-delete-var
92.no-div-regex
93.no-dupe-args
94.no-dupe-class-members
95.no-dupe-keys
96.no-duplicate-case
97.no-duplicate-imports
98.no-else-return
99.no-empty
100.no-empty-character-class
Eslint

ESLint 是一个代码规范和错误检查工具,有以下几个特性。所有东西都是可以插拔的。你可以调用任意的 rule api 或者 formatter api 去打包或者定义 rule or formatter。任意的 rule 都是独立的。没有特定的 coding style,你可以自己配置。

主页 https://eslint.org/
源码 https://github.com/eslint/eslint
发布版本 4.12.0

Eslint目录

1.指南 | Guide
2.规则 | Rules