如何在 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: "?",

如何编辑该行为？

Answer 1

更简单的方法是安装 veturoctref.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"
}

Answer 2

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