jsx-quotes

強制在 JSX 屬性中一致使用雙引號或單引號

🔧

此規則回報的部分問題可以透過 --fix 命令列選項自動修正

重要

此規則在 ESLint v8.53.0 中已棄用。請使用 @stylistic/eslint-plugin-js 中的對應規則。

瞭解更多

JSX 屬性值可以包含字串字面值，並以單引號或雙引號分隔。

<a b='c' />;
<a b="c" />;
1
2

與 JavaScript 中的字串字面值不同，JSX 屬性內的字串字面值不能包含跳脫引號。如果您想要在 JSX 屬性值中包含雙引號，則必須使用單引號作為字串分隔符。

<a b="'" />;
<a b='"' />;
1
2

規則詳情

此規則強制在 JSX 屬性中一致使用雙引號或單引號。

此規則有一個字串選項

使用預設 "prefer-double" 選項時，此規則的錯誤程式碼範例

在 Playground 中開啟

/*eslint jsx-quotes: ["error", "prefer-double"]*/

<a b='c' />;
1
2
3

使用預設 "prefer-double" 選項時，此規則的正確程式碼範例

在 Playground 中開啟

/*eslint jsx-quotes: ["error", "prefer-double"]*/

<a b="c" />;
<a b='"' />;
1
2
3
4

使用 "prefer-single" 選項時，此規則的錯誤程式碼範例

在 Playground 中開啟

/*eslint jsx-quotes: ["error", "prefer-single"]*/

<a b="c" />;
1
2
3

使用 "prefer-single" 選項時，此規則的正確程式碼範例

在 Playground 中開啟

/*eslint jsx-quotes: ["error", "prefer-single"]*/

<a b='c' />;
<a b="'" />;
1
2
3
4

如果您不使用 JSX，或者您不關心 JSX 屬性中引號使用方式的一致性，則可以關閉此規則。

此規則在 ESLint v1.4.0 中引入。

編輯此頁面