Vue-CLI 和 Visual Studio Code 格式冲突

Posted 2023-02-23

【中文标题】Vue-CLI 和 Visual Studio Code 格式冲突

【英文标题】：Vue-CLI and Visual Studio Code formatting conflicts

【发布时间】：2020-09-26 11:10:00

【问题描述】：

我使用本教程生成了一个 Vue.js 项目：https://www.vuemastery.com/courses/real-world-vue-js/vue-cli/

然后我开始更改Visual Studio Code 设置和项目配置，如下所述：https://www.vuemastery.com/courses/real-world-vue-js/optimizing-your-editor

不幸的是，这导致Vue-CLI 和 Visual Studio Code 具有不同的格式设置。每当我在VS Code 中保存文件时，它都会被格式化（这很好）。但是当我在Vue-CLI 中运行命令时，所有文件都会被不同的规则重新格式化。这意味着即使更改与我正在做的事情无关，几乎所有文件都会被修改。这让我发疯了。

如何让这些工具“同步”，以免它们应用不同的格式规则？哪些配置文件与此相关？

或者是否可以完全禁用Vue-CLI 中的格式？

更新：

最近我注意到VS Code 自己搞乱了格式。即使不使用Vue-CLI。当我对 .vue 文件进行更改并保存它们时，VS Code 在 javascript 映射中的最后一个元素之后添加尾随逗号。当我进行一些额外的更改时，逗号会保留在那里。但是随着另一个变化，它突然将它们全部删除。这种行为似乎完全是随机的。

【参考方案1】：

我在根目录下创建了一个名为prettierrc.js的文件，内容如下：

module.exports = 
  trailingComma: "all",
  arrowParens: "always",
;