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" 当最后一个元素或属性与 closing ] 或 } 在不同行时，要求尾随逗号；而当最后一个元素或属性与 closing ] 或 } 在同一行时，则不允许尾随逗号
"only-multiline" 当最后一个元素或属性与 closing ] 或 } 在不同行时，允许（但不要求）尾随逗号；而当最后一个元素或属性与 closing ] 或 } 在同一行时，则不允许尾随逗号

您还可以使用对象选项为每种语法类型配置此规则。以下每个选项都可以设置为 "never"、"always"、"always-multiline"、"only-multiline" 或 "ignore"。除非另有说明，否则每个选项的默认值为 "never"。

arrays 用于数组字面量和解构的数组模式。(例如 let [a,] = [1,];)
objects 用于对象字面量和解构的对象模式。(例如 let {a,} = {a: 1};)
imports 用于 ES 模块的 import 声明。(例如 import {a,} from "foo";)
exports 用于 ES 模块的 export 声明。(例如 export {a,};)
functions 用于函数声明和函数调用。(例如 (function(a,){ })(b,);)
- 只有在 linting ECMAScript 2017 或更高版本时才应启用 functions。

never

使用默认 "never" 选项时，不正确代码的示例

在 Playground 中打开

/*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" 选项时，正确代码的示例

在 Playground 中打开

/*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" 选项时，不正确代码的示例

在 Playground 中打开

/*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" 选项时，正确代码的示例

在 Playground 中打开

/*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" 选项时，不正确代码的示例

在 Playground 中打开

/*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" 选项时，正确代码的示例

在 Playground 中打开

/*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" 选项时，不正确代码的示例

在 Playground 中打开

/*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" 选项时，正确代码的示例

在 Playground 中打开

/*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"} 选项时，不正确代码的示例

在 Playground 中打开

/*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"} 选项时，正确代码的示例

在 Playground 中打开

/*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"} 选项时，不正确代码的示例

在 Playground 中打开

/*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"} 选项时，正确代码的示例

在 Playground 中打开

/*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 中引入。

资源

编辑此页