Vue 3 项目，使用 VSCode 自动格式化 .vue 文件

 Volar 已经弃用了，现在改用 Vue - Official 。

第一步，安装拓展 Prettier - Code formatter 和 Vue - Official

第二步，打开设置，打开 settings.json 文件

第三步，修改 settings.json 文件

{
    "security.workspace.trust.untrustedFiles": "open",
    "explorer.confirmDelete": false,
    "editor.accessibilitySupport": "off",
    "editor.formatOnSave": true,
    "[python]": {
        "editor.formatOnType": true
    },
    "editor.formatOnPaste": true,
    "files.associations": {
        "*.html": "html",
        "*.vue": "vue",
        "*.ts": "typescript"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "explorer.confirmDragAndDrop": false,
    "prettier.useEditorConfig": false,
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "js-beautify-html": {
        "wrap_attributes": "auto"
    },
    "prettier": {
        "printWidth": 300,
        "bracketSameLine": true,
        "trailingComma": "none",
        "singleQuote": true,
        "semi": false,
        "proseWrap": "preserve",
        "arrowParens": "avoid",
        "tabWidth": 4
    },
    "backgroundCover.autoStatus": true,
    "files.autoSave": "onFocusChange",
    "editor.fontSize": 14,
    "editor.tabSize": 4,
    "editor.tabCompletion": "on",
    "editor.lineNumbers": "on",
    "terminal.integrated.shell.osx": "zsh",
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.rulers": []
}

注意点：

• editor.formatOnSave：设置为 true，确保在保存文件时自动格式化。
• prettier.tabWidth 和 editor.tabSize：设置为 4，确保缩进为 4 个字符。
• editor.rulers：设置为空数组，移除每两个字符出现的竖线。
• [vue]：设置 editor.defaultFormatter 为 esbenp.prettier-vscode，确保使用 Prettier 格式化 .vue 文件。

第四步，根目录创建 .prettierrc 文件:

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

重启 VSCode ，即可。