comma-dangle

要求或禁止尾随逗号

🔧

此规则报告的一些问题可通过 --fix 命令行选项自动修复

此规则在 ESLint v8.53.0 中已弃用。请在 @stylistic/eslint-plugin-js 中使用相应的规则。

¥This rule was deprecated in ESLint v8.53.0. Please use the corresponding rule in @stylistic/eslint-plugin-js.

根据 ECMAScript 5（和 ECMAScript 3！）规范，对象字面中的尾随逗号是有效的。但是，IE8（不在 IE8 文档模式下）及以下版本在遇到 JavaScript 中的尾随逗号时会抛出错误。

¥Trailing commas in object literals are valid according to the ECMAScript 5 (and ECMAScript 3!) spec. However, IE8 (when not in IE8 document mode) and below will throw an error when it encounters trailing commas in JavaScript.

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

尾随逗号简化了向对象和数组添加和删除项目，因为只有你正在修改的行必须被触及。支持尾随逗号的另一个参数是，当从对象或数组中添加或删除项目时，它提高了差异的清晰度：

¥Trailing commas simplify adding and removing items to objects and arrays, since only the lines you are modifying must be touched. Another argument in favor of trailing commas is that it improves the clarity of diffs when an item is added or removed from an object or array:

不太晰：

¥Less clear:

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

更清晰：

¥More clear:

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

规则详情

¥Rule Details

此规则强制在对象和数组字面中一致使用尾随逗号。

¥This rule enforces consistent use of trailing commas in object and array literals.

选项

¥Options

此规则有一个字符串选项或一个对象选项：

¥This rule has a string option or an object option:

{
    "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"（默认）不允许尾随逗号

¥"never" (default) disallows trailing commas
"always" 需要尾随逗号

¥"always" requires trailing commas
当最后一个元素或属性与结束 ] 或 } 位于不同行时，"always-multiline" 需要尾随逗号；当最后一个元素或属性与结束 ] 或 } 位于同一行时，不允许使用尾随逗号

¥"always-multiline" requires trailing commas when the last element or property is in a different line than the closing ] or } and disallows trailing commas when the last element or property is on the same line as the closing ] or }
当最后一个元素或属性与结束 ] 或 } 位于不同行时，"only-multiline" 允许（但不要求）使用尾随逗号；当最后一个元素或属性与结束 ] 或 } 位于同一行时，"only-multiline" 不允许使用尾随逗号

¥"only-multiline" allows (but does not require) trailing commas when the last element or property is in a different line than the closing ] or } and disallows trailing commas when the last element or property is on the same line as the closing ] or }

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

¥You can also use an object option to configure this rule for each type of syntax. Each of the following options can be set to "never", "always", "always-multiline", "only-multiline", or "ignore". The default for each option is "never" unless otherwise specified.

arrays 用于数组字面量和数组解构模式。（例如 let [a,] = [1,];）

¥arrays is for array literals and array patterns of destructuring. (e.g. let [a,] = [1,];)
objects 用于对象字面量和解构对象模式。（例如 let {a,} = {a: 1};）

¥objects is for object literals and object patterns of destructuring. (e.g. let {a,} = {a: 1};)
imports 用于 ES 模块的导入声明。（例如 import {a,} from "foo";）

¥imports is for import declarations of ES Modules. (e.g. import {a,} from "foo";)
exports 用于 ES Modules 的导出声明。（例如 export {a,};）

¥exports is for export declarations of ES Modules. (e.g. export {a,};)
functions 用于函数声明和函数调用。（例如 (function(a,){ })(b,);）

¥functions is for function declarations and function calls. (e.g. (function(a,){ })(b,);)
- functions 仅应在 linting ECMAScript 2017 或更高版本时启用。
  
  ¥functions should only be enabled when linting ECMAScript 2017 or higher.

never

使用默认 "never" 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the default "never" option:

在线运行

/*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" 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the default "never" option:

在线运行

/*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" 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the "always" option:

在线运行

/*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" 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the "always" option:

在线运行

/*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" 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the "always-multiline" option:

在线运行

/*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" 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the "always-multiline" option:

在线运行

/*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" 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the "only-multiline" option:

在线运行

/*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" 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the "only-multiline" option:

在线运行

/*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"} 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the {"functions": "never"} option:

在线运行

/*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"} 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the {"functions": "never"} option:

在线运行

/*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"} 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the {"functions": "always"} option:

在线运行

/*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"} 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the {"functions": "always"} option:

在线运行

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

function foo(a, b,) {
}

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

何时不使用

¥When Not To Use It

如果你不关心悬空逗号，你可以关闭此规则。

¥You can turn this rule off if you are not concerned with dangling commas.

版本

此规则是在 ESLint v0.16.0 中引入。

comma-dangle

规则详情

选项

never

always

always-multiline

only-multiline

functions

何时不使用

版本

资源