如何在VS Code中设置Vue文件格式化？

Question

你好。

我已经安装了"Vetur"插件，并且对于我的Vue文件具有很好的功能（语法高亮、片段、Emmet、格式化、自动完成、调试）。 但是我不知道如何编辑格式设置！它把我的代码转换成这样：

var map = {
q:"й",w:"ц",e:"у",r:"к",t:"е",y:"н",u:"г",i:"ш",o:"щ",p:"з",a:"ф",s:"ы",d:"в",

转化为：

var map = {
  q: "й",
  w: "ц",
  e: "у",
  r: "к",
  t: "е",
  y: "н",
  u: "г",
  i: "ш",
  o: "щ",

我该如何编辑这个行为？

- Dmi3ii

---

使用 Ctrl+E、Ctrl+D 和 Ctrl+F 的组合键来格式化您的编辑器中的代码。 - Manmohan_singh

Answer 1

更简单的方法是安装 Vetur 扩展 octref.vetur，然后添加以下内容到 .vscode/settings.json 文件中。

{
    "editor.defaultFormatter": "octref.vetur",
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.postcss": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.less": "prettier",
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.ts": "prettier"
}

- Anees Hameed

---

当我选择使用这些设置格式化Vue文档时，似乎会将引号替换为双引号。如果我想要使用引号，这似乎是大多数事情的标准，例如props或模块导入路径等，该怎么办？ - rhand

没关系。我们需要添加Prettier的选项，如下所示："vetur.format.defaultFormatterOptions": { "prettier": { "singleQuote": true } - rhand

很酷，但你也可以像下面这样在自己的文件中配置prettier。 这是首选方式！ https://i.stack.imgur.com/qLhdI.png - Anees Hameed

Answer 2

Vetur使用prettier来格式化js代码。您可以在这里查看如何配置。prettier的所有选项都在这里。但据我所知，没有办法调整prettier中对象字段定义的换行行为。

- Morty Choi

---

配置 Vetur 的链接已过时。 - Fahad Khan