ESLint 样式

外观

@stylistic/js/

comma-dangle ​

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

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

尾随逗号简化了向对象和数组添加和删除项的操作，因为只需要修改您正在修改的行。支持尾随逗号的另一个论据是，它提高了在向对象或数组添加或删除项时差异的清晰度

不太清晰

差异
 var foo = {
-    bar: "baz",
-    qux: "quux"
+    bar: "baz"
 };

更清晰

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

规则详情 ​

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

选项 ​

此规则具有字符串选项或对象选项

json
{
    "comma-dangle": ["error", "never"],
    // or
    "comma-dangle": ["error", {
        "arrays": "never",
        "objects": "never",
        "imports": "never",
        "exports": "never",
        "functions": "never"
    }]
}
  • "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,);）
    • functions仅应在对 ECMAScript 2017 或更高版本进行代码风格检查时启用。

never ​

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

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

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

};

var arr = [1,2
,
];

foo({
  bar: "baz",
  qux: "quux"
,

});
incorrect

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

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

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

var arr = [1,2];

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

always ​

使用"always"选项时，此规则的错误代码示例

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

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

};

var arr = [1,2
]
;

foo({
  bar: "baz",
  qux: "quux"

}
)
;
incorrect

使用"always"选项时，此规则的正确代码示例

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

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

var arr = [1,2,];

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

always-multiline ​

使用"always-multiline"选项时，此规则的错误代码示例

js
/*eslint @stylistic/js/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"

});
incorrect

使用"always-multiline"选项时，此规则的正确代码示例

js
/*eslint @stylistic/js/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",
});
correct

only-multiline ​

使用"only-multiline"选项时，此规则的错误代码示例

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

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

var arr = [1,2
,
];

var arr = [1,
    2
,
];
incorrect

使用"only-multiline"选项时，此规则的正确代码示例

js
/*eslint @stylistic/js/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"
});
correct

functions ​

使用{"functions": "never"}选项时，此规则的错误代码示例

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

function foo(a, b
,
) {
}

foo(a, b
,
);
new foo(a, b
,
);
incorrect

使用{"functions": "never"}选项时，此规则的正确代码示例

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

function foo(a, b) {
}

foo(a, b);
new foo(a, b);
correct

使用{"functions": "always"}选项时，此规则的错误代码示例

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

function foo(a, b
)
 {
}

foo(a, b
)
;
new foo(a, b
)
;
incorrect

使用 {"functions": "always"} 选项时，此规则的正确代码示例

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

function foo(a, b,) {
}

foo(a, b,);
new foo(a, b,);
correct

何时不使用它 ​

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