ESLint スタイリスティック

外観

@stylistic/js/

quote-props ​

オブジェクトリテラルのプロパティ名は、リテラルまたは文字列を使用して定義できます。たとえば、次の 2 つのオブジェクトは同等です。

js
var object1 = {
    property: true
};

var object2 = {
    "property": true
};

多くの場合、文字列の代わりに識別子を使用するか、その逆にするかを選択しても問題ありません。それでも、コード内で一貫したスタイルを適用することを決定する場合があります。

ただし、引用符を使用する必要がある場合があります。

  1. ECMAScript 3 JavaScript エンジン (IE8 など) を使用していて、プロパティ名としてキーワード (ifなど) を使用する場合。この制限は ECMAScript 5 で削除されました。
  2. プロパティ名に "one two" のようにスペースを含むなど、識別子以外の文字を使用する場合。

引用符が重要な別の例は、数値リテラルをプロパティキーとして使用する場合です。

js
var object = {
    1e2: 1,
    100: 2
};

これは一見問題ないように見えるかもしれませんが、このコードは実際には ECMAScript 5 の厳格モードで構文エラーをスローします。これは、1e2 と 100 がプロパティ名として使用される前に文字列に強制変換されるために発生します。String(1e2) と String(100) はどちらも "100" に等しくなり、「厳格モードではオブジェクトリテラルでの重複データプロパティは許可されていません」エラーが発生します。このような問題はデバッグが難しい場合があるため、プロパティ名の周りにすべての引用符を要求することを好む人もいます。

ルールの詳細 ​

このルールでは、オブジェクトリテラルのプロパティ名の周りに引用符が必要です。

オプション ​

このルールには、文字列オプションとオブジェクトオプションの 2 つのオプションがあります。

文字列オプション

  • "always" (デフォルト) は、すべてのオブジェクトリテラルのプロパティ名の周りに引用符を必要とします。
  • "as-needed" は、厳密に必要でないオブジェクトリテラルのプロパティ名の周りの引用符を許可しません。
  • "consistent" は、一貫した引用符スタイルを適用します。特定のオブジェクトでは、すべてのプロパティを引用符で囲むか、どのプロパティも引用符で囲まないかのいずれかにする必要があります。
  • "consistent-as-needed" は、いずれかの名前が厳密に引用符を必要とする場合は、すべてのオブジェクトリテラルのプロパティ名の周りに引用符を必要とし、それ以外の場合はオブジェクトプロパティ名の周りの引用符を許可しません。

オブジェクトオプション

  • "keywords": true は、オブジェクトプロパティ名として使用される言語キーワードの周りに引用符を必要とします (as-needed または consistent-as-needed を使用する場合のみ適用されます)。
  • "unnecessary": true (デフォルト) は、厳密に必要でないオブジェクトリテラルのプロパティ名の周りの引用符を許可しません (as-needed を使用する場合のみ適用されます)。
  • "unnecessary": false は、厳密に必要でないオブジェクトリテラルのプロパティ名の周りの引用符を許可します (as-needed を使用する場合のみ適用されます)。
  • "numbers": true は、オブジェクトプロパティ名として使用される数値の周りに引用符を必要とします (as-needed を使用する場合のみ適用されます)。

always ​

デフォルトの "always" オプションを使用した場合、このルールに違反する誤ったコードの例

js
/*eslint @stylistic/js/quote-props: ["error", "always"]*/

var object = {
        
foo: "bar"
,
        
baz: 42

};
不正

デフォルトの "always" オプションを使用した場合、このルールに準拠する正しいコードの例

js
/*eslint @stylistic/js/quote-props: ["error", "always"]*/
/*eslint-env es6*/

var object1 = {
    "foo": "bar",
    "baz": 42,
    "qux-lorem": true
};

var object2 = {
    'foo': 'bar',
    'baz': 42,
    'qux-lorem': true
};

var object3 = {
    foo() {
        return;
    }
};
正しい

as-needed ​

"as-needed" オプションを使用した場合、このルールに違反する誤ったコードの例

js
/*eslint @stylistic/js/quote-props: ["error", "as-needed"]*/

var object = {
        
"a": 0
,
        
"0": 0
,
        
"true": 0
,
        
"null": 0

};
不正

"as-needed" オプションを使用した場合、このルールに準拠する正しいコードの例

js
/*eslint @stylistic/js/quote-props: ["error", "as-needed"]*/
/*eslint-env es6*/

var object1 = {
    "a-b": 0,
    "0x0": 0,
    "1e2": 0
};

var object2 = {
    foo: 'bar',
    baz: 42,
    true: 0,
    0: 0,
    'qux-lorem': true
};

var object3 = {
    foo() {
        return;
    }
};
正しい

consistent ​

"consistent" オプションを使用した場合、このルールに違反する誤ったコードの例

js
/*eslint @stylistic/js/quote-props: ["error", "consistent"]*/

var object1 = {
        
foo: "bar"
,
    "baz": 42,
    "qux-lorem": true
};

var object2 = {
    'foo': 'bar',
        
baz: 42

};
不正

"consistent" オプションを使用した場合、このルールに準拠する正しいコードの例

js
/*eslint @stylistic/js/quote-props: ["error", "consistent"]*/

var object1 = {
    "foo": "bar",
    "baz": 42,
    "qux-lorem": true
};

var object2 = {
    'foo': 'bar',
    'baz': 42
};

var object3 = {
    foo: 'bar',
    baz: 42
};
正しい

consistent-as-needed ​

"consistent-as-needed" オプションを使用した場合、このルールに違反する誤ったコードの例

js
/*eslint @stylistic/js/quote-props: ["error", "consistent-as-needed"]*/

var object1 = {
        
foo: "bar"
,
    "baz": 42,
    "qux-lorem": true
};

var object2 = {
        
'foo': 'bar'
,
        
'baz': 42

};
不正

"consistent-as-needed" オプションを使用した場合、このルールに準拠する正しいコードの例

js
/*eslint @stylistic/js/quote-props: ["error", "consistent-as-needed"]*/

var object1 = {
    "foo": "bar",
    "baz": 42,
    "qux-lorem": true
};

var object2 = {
    foo: 'bar',
    baz: 42
};
正しい

keywords ​

"as-needed", { "keywords": true } オプションを使用した場合、このルールに違反する追加の誤ったコードの例

js
/*eslint @stylistic/js/quote-props: ["error", "as-needed", { "keywords": true }]*/

var x = {
        
while: 1
,
        
volatile: "foo"

};
不正

"consistent-as-needed", { "keywords": true } オプションを使用した場合、このルールに違反する追加の誤ったコードの例

js
/*eslint @stylistic/js/quote-props: ["error", "consistent-as-needed", { "keywords": true }]*/

var x = {
        
"prop": 1
,
        
"bar": "foo"

};
不正

unnecessary ​

"as-needed", { "unnecessary": false } オプションを使用した場合、このルールに準拠する追加の正しいコードの例

js
/*eslint @stylistic/js/quote-props: ["error", "as-needed", { "keywords": true, "unnecessary": false }]*/

var x = {
    "while": 1,
    "foo": "bar"  // Would normally have caused a warning
};
正しい

numbers ​

"as-needed", { "numbers": true } オプションを使用した場合、このルールに違反する追加の誤ったコードの例

js
/*eslint @stylistic/js/quote-props: ["error", "as-needed", { "numbers": true }]*/

var x = {
        
100: 1

}
不正

使用しない場合 ​

プロパティ名が引用符で一貫して囲まれているかどうかを気にせず、レガシー ES3 環境をターゲットにしない場合は、このルールをオフにしてください。

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

Copyright OpenJS Foundationおよびその他の貢献者、www.openjsf.org。
Copyright © 2023-PRESENT ESLint スタイリスティックの貢献者。