ESLint スタイリスティック

外観

@stylistic/

quote-props ​

オブジェクトリテラルのプロパティ名は、リテラルまたは文字列を使用して2つの方法で定義できます。たとえば、次の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/quote-props: ["error", "always"]*/

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

};
不正

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

js
/*eslint @stylistic/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/quote-props: ["error", "as-needed"]*/

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

};
不正

"as-needed"オプションを使用したこのルールの正しいコードの例

js
/*eslint @stylistic/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/quote-props: ["error", "consistent"]*/

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

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

};
不正

"consistent"オプションを使用したこのルールの正しいコードの例

js
/*eslint @stylistic/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/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/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/quote-props: ["error", "as-needed", { "keywords": true }]*/

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

};
不正

"consistent-as-needed", { "keywords": true }オプションを使用したこのルールの追加の不正なコードの例

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

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

};
不正

unnecessary ​

"as-needed", { "unnecessary": false }オプションを使用したこのルールの追加の正しいコードの例

js
/*eslint @stylistic/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/quote-props: ["error", "as-needed", { "numbers": true }]*/

var x = {
        
100: 1

}
不正

使用しない場合 ​

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

TypeScript固有 ​

ts/quote-props ​

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

Copyright OpenJS Foundation and other contributors, www.openjsf.org.
Copyright © 2023-PRESENT ESLint Stylistic contributors.