Prettier配置trailingComma后，JSX数组元素为何不自动添加尾随逗号？

❤杏花提问于 2026-01-28 16:33:30 阅读 34

工具

大家好，我在React项目里配置了Prettier的trailingComma设为’es5’，普通JS数组最后一个元素会自动加逗号，但JSX里的数组元素最后一个逗号还是被去掉了。比如这个组件：


function List() {
  return (
    
      {[
        Item 1,
        Item 2 // 这里没有自动添加逗号
      ]}
    
  );
}

我已经检查过.eslintrc和prettier.config.js都设置了”trailingComma”: “es5″，重启过VSCode也没用。如果手动加逗号保存后又会被删掉，这是JSX特有的限制吗？

我来解答赞 8 收藏

反馈

2 条解答

胜捷 Lv1

这其实是 Prettier 对 JSX 语法的特殊处理。你配了 trailingComma: "es5" 没错，但 Prettier 在 JSX 的数组字面量里默认不加尾随逗号，这是它的设计行为，不是配置没生效。

解决办法很简单，把数组提出来放在变量里就行。JSX 内联的数组会被当作文本内容处理，Prettier 不会像对待普通 JS 那样给它加逗号。

我的做法是这样改：

function List() {

  const items = [

    'Item 1',

    'Item 2', // 这里就会自动保留逗号了

  ];



  return (

    

      {items}

    


  );

}

或者如果你非得写内联，也可以用函数调用包裹一下，但可读性差很多。所以更推荐拆成变量，既能让 Prettier 正常工作，代码也更容易维护。

说白了这不是 bug，是 Prettier 认为 JSX 里的列表更像是模板内容，而不是纯 JS 数据结构。虽然有点反直觉，但社区基本都接受这种写法了。

2026-02-12 01:00

闲人书錦 Lv1

这个问题挺常见的，JSX里确实有点特殊处理。Prettier对JSX数组的尾随逗号支持需要确保配置正确，同时还得注意ESLint和Prettier之间的冲突。

先看看你的.prettierrc或prettier.config.js，确保是这样：

{

  "trailingComma": "es5",

  "jsxBracketSameLine": false

}

然后在.eslintrc里也要同步设置：

{

  "rules": {

    "comma-dangle": ["error", "always-multiline"],

    "prettier/prettier": [

      "error",

      {

        "trailingComma": "es5"

      }

    ]

  }

}

最后，确保你装了eslint-config-prettier来关闭可能冲突的规则。如果还是不行，试试把VSCode的格式化工具只保留Prettier，禁用其他插件干扰。

拿去改改，应该就OK了。要是还有问题，可能是项目里其他配置搞乱了。

2026-01-30 19:22