# comma-dangle

要求或不允许尾随逗号

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

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

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

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

不太晰:

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

更清晰:

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

# 规则详情

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

# 选项

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

{
    "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 Modules 的出口申报。(例如 export {a,};
  • functions 用于函数声明和函数调用。(例如 (function(a,){ })(b,);functions 仅应在 linting ECMAScript 2017 或更高版本时启用。

# never

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

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

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

var arr = [1,2,];

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

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

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

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

var arr = [1,2];

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

# always

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

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

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

var arr = [1,2];

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

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

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

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

var arr = [1,2,];

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

# 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"
});

此规则使用 "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",
});

# only-multiline

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

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

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

var arr = [1,2,];

var arr = [1,
    2,];

此规则使用 "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"
});

# functions

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

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

function foo(a, b,) {
}

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

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

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

function foo(a, b) {
}

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

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

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

function foo(a, b) {
}

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

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

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

function foo(a, b,) {
}

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

# 何时不使用

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

Last Updated: 5/13/2023, 8:55:38 PM