如何通过 Vue - .vue 文件中的官方扩展在 VSCode 中使用 4 个空格格式进行缩进？

Question

我有一个 vuejs 项目，我的团队使用 VSCode 作为编辑器。我正在尝试设置一个通用项目配置以实现一致的自动格式化，包括 4 个空格缩进而不是 2 个。我安装了 prettier 作为 NPM 项目依赖项和 VSCode 的 prettier 扩展，然后创建了一个

.prettierrc

文件来配置它。我将其设置为一般情况下的默认格式化程序以及 .js 文件的默认格式化程序等，在我的 VSCode

settings.json

中。然而，prettier 似乎没有在 .vue 文件中运行。所以我安装了

Vue - Official

扩展，它显然为 vuejs 格式化提供了 Volar。正如你所看到的，我在 VSCode 设置中指定了它，并且还明确将缩进设置为 4 个空格，对于 prettier 来说也是如此。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 4,

  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.tabSize": 4,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "Vue.volar"
  },

  "files.autoSave": "off", // Disable auto-save on focus change
  "workbench.startupEditor": "newUntitledFile",
  "terminal.integrated.fontSize": 12,
  "window.zoomLevel": 0,
  "workbench.colorTheme": "Visual Studio Dark"
}

这是我的.prettierrc供参考：

{
    "semi": true,
    "trailingComma": "es5",
    "singleQuote": true,
    "printWidth": 80,
    "tabWidth": 4,
    "useTabs": false
}

但是，虽然某种格式似乎现在在 .vue 文件中运行，但它仍然只使用 2 个空格。为什么？我该如何解决这个问题？

Answer 1

您尝试在VScode的设置中检查

save

，如果

Editor: Format On Save

没有检查，请检查它。

在设置中，按

prettier

并将 tabWidth 更改为 4。

最后，右键单击您的 html 文件 -> 选择

Format Document With...

-> 选择

Config default formatter...

-> 选择

Prettier - Code Formatter

。

希望以上内容能帮助您解决问题。