为什么更漂亮地在对象的最后一个元素','逗号

Question

在Visual studio代码中，当我在应用程序中使用chart.js时，漂亮的总是在对象"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自开始，然后将它们添加到对象文字(ECMAScript 5(和最近(ECMAScript 2017(的函数参数。

这是一个相对较新的语法变化，但基本思想是，通过在每行上加一个逗号，可以实现：

1. 添加商品或重新订购商品更容易。在此之前，您必须检查尾部逗号，并根据位置确保其存在或删除
2. 消除了由于缺少,而使一个行项目具有特殊性的需要
3. 允许更干净的Git差异

如果您愿意，可以阅读完整的文档-它将进一步详细介绍：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas

---

就图表不显示的问题而言，除非您使用的是非常旧的浏览器，否则尾部逗号不应导致错误/信息不显示。

Answer 2

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

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

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

   {"trailingComma"："es5"}

2. 为了遵守配置，请确保启用以下在vs代码配置中设置。

   "requireConfig"：真实

Answer 3

Prettier在末尾添加这些逗号，只是因为如果您想在后面添加另一个数据，则不需要键入逗号。它对分号(；(也是如此。

您出现错误是因为您没有提供数据集。

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

{/* <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