为什么 prettier 在对象的最后一个元素放一个逗号 ','

Question

在 Visual studio 代码中，当我在我的应用程序中使用 chart.js 时，prettier 总是在对象 'label' 的最后一个数据的末尾放置一个逗号。我认为，这是一个错误，无法在我的浏览器上显示我的图表。它显示空白。代码如下。

let massPopChart2 = new Chart(myChart2, {
  type: "bar", // bar, horizontalBar, pie, line, doughnut, radar, polarArea
  data: {
    labels: [
      "1st Day",
      "2nd Day",
      "3rd Day",
      "4th Day",
      "5th Day",
      "6th Day",
      "7th Day",
    ],
  },
});

谁能帮我弄清楚为什么会这样？

Answer 1

JavaScript has allowed trailing commas in array literals since the beginning, and later added them to object literals (ECMAScript 5) and most recently (ECMAScript 2017) to function parameters.

这是一个相对较新的语法更改，但基本思想是通过在每行中放置逗号允许：

更容易添加商品或重新订购商品。之前你总是必须检查尾随逗号并确保它存在或删除取决于位置。
不再需要有一个订单项是特殊的，因为它缺少 ,.
允许更清洁 Git 差异。

如果愿意，您可以阅读完整的文档 - 它有更详细的内容： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas

至于图表不显示的问题，除非您使用的是非常旧的浏览器，否则尾随逗号不应导致 error/information 不显示。

Answer 2

您需要更新 prettier 扩展程序的配置。

有两种方法。下面一个用的最多。

在项目的根目录下创建一个 .prettierrc 文件，然后指定以下配置。

{ "trailingComma": "es5" }
为了遵守配置，请确保启用以下在 vs 代码配置中设置。

"prettier.requireConfig": 真

Answer 3

Prettier 在末尾添加了这些逗号，只是因为如果您想在此之后添加其他数据，则无需键入逗号。它对分号 (;) 也一样。

您收到错误消息是因为您没有提供数据集。

data 采用包含标签和数据集值的对象。

{/* <canvas id="myChart" width="400" height="400"></canvas> */}

// var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['1','2'],
    datasets: [
      {
        label: '1st',
        data: '120',
        borderColor: Utils.CHART_COLORS.red,
        backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
      },
      {
        label: '2',
        data: '240',
        borderColor: Utils.CHART_COLORS.red,
        backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
      }
    ]
  },
//   options: {
//     indexAxis: 'y',
//     elements: {
//       bar: {
//         borderWidth: 2,
//       }
//     },
//     responsive: true,
//     plugins: {
//       legend: {
//         position: 'right',
//       },
//       title: {
//         display: true,
//         text: 'Chart.js Horizontal Bar Chart'
//       }
//     }
//   },
// };

你可以在官方文档上了解更多https://www.chartjs.org/docs/latest/charts/bar.html

为什么 prettier 在对象的最后一个元素放一个逗号 ','

Why prettier put a comma ',' at the last element of the object

html

javascript

chart.js

visual-studio-code

prettier