comma-dangle

要求或禁止尾隨逗號

🔧

此規則報告的某些問題可以使用 --fix 命令列選項自動修正

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

根據 ECMAScript 5（和 ECMAScript 3！）規範，物件字面值中的尾隨逗號是有效的。但是，當 IE8（不在 IE8 文件模式下時）及更舊版本遇到 JavaScript 中的尾隨逗號時，會拋出錯誤。

var foo = {
    bar: "baz",
    qux: "quux",
};
1
2
3
4

尾隨逗號簡化了向物件和陣列新增和刪除項目的操作，因為只需要修改您正在修改的行。支持尾隨逗號的另一個論點是，當從物件或陣列新增或刪除項目時，它提高了差異的清晰度。

較不清晰

 var foo = {
-    bar: "baz",
-    qux: "quux"
+    bar: "baz"
 };
1
2
3
4
5

更清晰

 var foo = {
     bar: "baz",
-    qux: "quux",
 };
1
2
3
4

規則詳情

此規則強制物件和陣列字面值中尾隨逗號的使用方式一致。

選項

此規則具有字串選項或物件選項

{
    "comma-dangle": ["error", "never"],
    // or
    "comma-dangle": ["error", {
        "arrays": "never",
        "objects": "never",
        "imports": "never",
        "exports": "never",
        "functions": "never"
    }]
}
1
2
3
4
5
6
7
8
9
10
11

"never"（預設）禁止尾隨逗號
"always" 要求尾隨逗號
"always-multiline" 當最後一個元素或屬性與結尾的 ] 或 } 位於不同行時，要求尾隨逗號；當最後一個元素或屬性與結尾的 ] 或 } 位於相同行時，禁止尾隨逗號
"only-multiline" 當最後一個元素或屬性與結尾的 ] 或 } 位於不同行時，允許（但不要求）尾隨逗號；當最後一個元素或屬性與結尾的 ] 或 } 位於相同行時，禁止尾隨逗號

您也可以使用物件選項來設定此規則用於每種類型的語法。以下每個選項都可以設定為 "never"、"always"、"always-multiline"、"only-multiline" 或 "ignore"。除非另有說明，否則每個選項的預設值為 "never"。

arrays 用於陣列字面值和解構的陣列模式。（例如 let [a,] = [1,];）
objects 用於物件字面值和解構的物件模式。（例如 let {a,} = {a: 1};）
imports 用於 ES 模組的導入宣告。（例如 import {a,} from "foo";）
exports 用於 ES 模組的匯出宣告。（例如 export {a,};）
functions 用於函式宣告和函式呼叫。（例如 (function(a,){ })(b,);）
- 只有在靜態程式碼分析 ECMAScript 2017 或更高版本時，才應啟用 functions。

never

對於使用預設 "never" 選項的此規則，錯誤程式碼範例

在線上測試開啟

/*eslint comma-dangle: ["error", "never"]*/

var foo = {
    bar: "baz",
    qux: "quux",
};

var arr = [1,2,];

foo({
  bar: "baz",
  qux: "quux",
});
1
2
3
4
5
6
7
8
9
10
11
12
13

對於使用預設 "never" 選項的此規則，正確程式碼範例

在線上測試開啟

/*eslint comma-dangle: ["error", "never"]*/

var foo = {
    bar: "baz",
    qux: "quux"
};

var arr = [1,2];

foo({
  bar: "baz",
  qux: "quux"
});
1
2
3
4
5
6
7
8
9
10
11
12
13

always

對於使用 "always" 選項的此規則，錯誤程式碼範例

在線上測試開啟

/*eslint comma-dangle: ["error", "always"]*/

var foo = {
    bar: "baz",
    qux: "quux"
};

var arr = [1,2];

foo({
  bar: "baz",
  qux: "quux"
});
1
2
3
4
5
6
7
8
9
10
11
12
13

對於使用 "always" 選項的此規則，正確程式碼範例

在線上測試開啟

/*eslint comma-dangle: ["error", "always"]*/

var foo = {
    bar: "baz",
    qux: "quux",
};

var arr = [1,2,];

foo({
  bar: "baz",
  qux: "quux",
});
1
2
3
4
5
6
7
8
9
10
11
12
13

always-multiline

對於使用 "always-multiline" 選項的此規則，錯誤程式碼範例

在線上測試開啟

/*eslint comma-dangle: ["error", "always-multiline"]*/

var foo = {
    bar: "baz",
    qux: "quux"
};

var foo = { bar: "baz", qux: "quux", };

var arr = [1,2,];

var arr = [1,
    2,];

var arr = [
    1,
    2
];

foo({
  bar: "baz",
  qux: "quux"
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

對於使用 "always-multiline" 選項的此規則，正確程式碼範例

在線上測試開啟

/*eslint comma-dangle: ["error", "always-multiline"]*/

var foo = {
    bar: "baz",
    qux: "quux",
};

var foo = {bar: "baz", qux: "quux"};
var arr = [1,2];

var arr = [1,
    2];

var arr = [
    1,
    2,
];

foo({
  bar: "baz",
  qux: "quux",
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

only-multiline

對於使用 "only-multiline" 選項的此規則，錯誤程式碼範例

在線上測試開啟

/*eslint comma-dangle: ["error", "only-multiline"]*/

var foo = { bar: "baz", qux: "quux", };

var arr = [1,2,];

var arr = [1,
    2,];

1
2
3
4
5
6
7
8
9

對於使用 "only-multiline" 選項的此規則，正確程式碼範例

在線上測試開啟

/*eslint comma-dangle: ["error", "only-multiline"]*/

var foo = {
    bar: "baz",
    qux: "quux",
};

var foo = {
    bar: "baz",
    qux: "quux"
};

var foo = {bar: "baz", qux: "quux"};
var arr = [1,2];

var arr = [1,
    2];

var arr = [
    1,
    2,
];

var arr = [
    1,
    2
];

foo({
  bar: "baz",
  qux: "quux",
});

foo({
  bar: "baz",
  qux: "quux"
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

functions

對於使用 {"functions": "never"} 選項的此規則，錯誤程式碼範例

在線上測試開啟

/*eslint comma-dangle: ["error", {"functions": "never"}]*/

function foo(a, b,) {
}

foo(a, b,);
new foo(a, b,);
1
2
3
4
5
6
7

對於使用 {"functions": "never"} 選項的此規則，正確程式碼範例

在線上測試開啟

/*eslint comma-dangle: ["error", {"functions": "never"}]*/

function foo(a, b) {
}

foo(a, b);
new foo(a, b);
1
2
3
4
5
6
7

對於使用 {"functions": "always"} 選項的此規則，錯誤程式碼範例

在線上測試開啟

/*eslint comma-dangle: ["error", {"functions": "always"}]*/

function foo(a, b) {
}

foo(a, b);
new foo(a, b);
1
2
3
4
5
6
7

對於使用 {"functions": "always"} 選項的此規則，正確程式碼範例

在線上測試開啟

/*eslint comma-dangle: ["error", {"functions": "always"}]*/

function foo(a, b,) {
}

foo(a, b,);
new foo(a, b,);
1
2
3
4
5
6
7

何時不使用

如果您不關心尾隨逗號，則可以關閉此規則。

版本

此規則是在 ESLint v0.16.0 中引入的。

資源

編輯此頁面