如何修改VSCode默认JavaScript格式化器实现数组元素换行？

当然可以实现这个需求！VSCode里的JavaScript格式化器（不管是常用的Prettier还是内置的JS格式化工具）都能调整规则，让数组在超过指定行宽时自动把每个元素拆成单独一行。下面分几种常见场景给你一步步说：

如果你用的是Prettier插件（大部分前端开发者的首选），设置起来很简单：

1. 先确保你已经在VSCode扩展商店安装了「Prettier - Code formatter」插件
2. 打开VSCode设置面板（快捷键：Windows/Linux按Ctrl+,，Mac按Cmd+,）
3. 搜索并调整以下两个关键设置：
   • Prettier: Print Width：把值改成600，这就是触发换行的行宽阈值
   • Default Formatter：选择esbenp.prettier-vscode，确保Prettier是当前文件的默认格式化器
4. （可选）如果想让数组最后一个元素也保留尾逗号，可以开启Prettier: Trailing Comma为all，这样格式化后的数组更易维护

设置完成后，你的代码会自动变成这样：

const mm = [
  MatCardModule,
  MatSnackBarModule,
  MatSelectModule,
  MatButtonModule,
  MatToolbarModule,
  MatStepperModule,
  MatFormFieldModule,
  MatInputModule,
  MatGridListModule
];

如果你不想用第三方插件，VSCode自带的JavaScript格式化工具也能实现：

1. 打开设置面板，搜索并调整：
   • JavaScript > Format: Wrap Line Length：设置为600，这是换行的行宽上限
   • JavaScript > Format: Place Open Brace On New Line For Arrays：勾选这个选项，让数组的左括号单独占一行（可选，根据个人喜好）
2. 同样要确保默认格式化器选的是「vscode.typescript-language-features」（VSCode内置的JS/TS格式化工具）

如果你项目里用ESLint做代码规范，可以在.eslintrc（或.eslintrc.json）里添加数组换行规则：

{
  "rules": {
    "array-element-newline": [
      "error",
      {
        "lineLength": 600,
        "minItems": 2
      }
    ]
  }
}

这个规则的意思是：当数组元素的总字符长度超过600，且元素数量≥2时，强制每个元素单独换行。记得要确保VSCode的ESLint插件启用，并且设置ESLint为格式化器。

最后小提示：可以点击VSCode右下角的格式化器名称（比如显示「Prettier」或「JavaScript」），快速切换当前文件的格式化工具，确保你的设置生效~

内容的提问来源于stack exchange，提问作者Ole