ESLint スタイリスティック

外観

@stylistic/js/

keyword-spacing ​

キーワードは、tryやifのようなJavaScriptの構文要素です。これらのキーワードは、言語にとって特別な意味を持ち、コードエディターでは異なる色で表示されることがよくあります。言語の重要な一部として、スタイルガイドでは、キーワードの周囲に使用すべきスペースについて言及することがよくあります。たとえば、キーワードは常にスペースで囲むべきというスタイルガイドがあるとすると、if-elseステートメントは次のようになります。

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

もちろん、キーワードの周りにスペースを許可しないスタイルガイドを持つこともできます。

ただし、functionキーワードとそれに続く開き括弧の間のスペースのスタイルを強制したい場合は、space-before-function-parenを参照してください。

ルールの詳細 ​

このルールは、キーワードおよびキーワードのようなトークン（as（モジュール宣言内）、async（非同期関数）、await（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 (デフォルト) は、キーワードの前に少なくとも1つのスペースを必要とします。
  • "before": false は、キーワードの前のスペースを許可しません。
  • "after": true (デフォルト) は、キーワードの後に少なくとも1つのスペースを必要とします。
  • "after": false は、キーワードの後のスペースを許可しません。
  • "overrides" は、指定されたキーワードのスペーススタイルをオーバーライドできます。

before ​

デフォルトの{ "before": true }オプションを使用したこのルールの不正なコードの例

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

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

デフォルトの{ "before": true }オプションを使用したこのルールの正しいコードの例

jsx
/*eslint @stylistic/js/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 }オプションを使用したこのルールの不正なコードの例

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

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

{ "before": false }オプションを使用したこのルールの正しいコードの例

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

if (foo) {
    //...
}else if (bar) {
    //...
}else {
    //...
}
正しい

after ​

デフォルトの{ "after": true }オプションを使用したこのルールの不正なコードの例

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


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

デフォルトの{ "after": true }オプションを使用したこのルールの正しいコードの例

jsx
/*eslint @stylistic/js/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 }オプションを使用したこのルールの不正なコードの例

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

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

{ "after": false }オプションを使用したこのルールの正しいコードの例

js
/*eslint @stylistic/js/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 } } }オプションを使用したこのルールの正しいコードの例

js
/*eslint @stylistic/js/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 a
s
"my class" };
正しい

使用しない場合 ​

キーワードのスペースの一貫性を強制したくない場合は、このルールを無効にしても安全です。

MITライセンスの下でリリースされています。

Copyright OpenJS Foundation and other contributors, www.openjsf.org.
Copyright © 2023-PRESENT ESLint スタイリスティック contributors.