时间戳

首页 > 解决方案 > VSCode 中 *.vue 文件的自动格式化不起作用

vue.js - VSCode 中 *.vue 文件的自动格式化不起作用

问题描述

我正在开发 VSCode 1.58.2 中的 Vue.js 项目。

一切顺利；但是 *.vue 文件在保存时不会自动格式化。

我的 .vscode/settings.json

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.defaultFormatter": "octref.vetur",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
  "javascript.format.placeOpenBraceOnNewLineForFunctions": false,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.placeOpenBraceOnNewLineForControlBlocks": false,
  "typescript.format.placeOpenBraceOnNewLineForFunctions": false
}

感谢您的帮助。

标签： vue.jsvisual-studio-codevscode-settings

解决方案

在您的 settings.json 中，您应该有：

  1. [vue]: {"editor.defaultFormatter": "octref.vetur"}

  2. "vetur.format.defaultFormatter.html": "js-beautify-html"告诉Vue如何格式化<template>

  3. 完整配置：

{
    "editor.formatOnSave": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    }  
}

注意：如果您有多个用于 .vue 文件的格式化程序，则必须指定使用哪一个，否则保存时格式化将不知道要使用哪一个，并且默认不执行任何操作。这将选择“Vetur”作为默认值。

推荐阅读