vs code 格式化vue设置

最新推荐文章于 2025-04-28 14:42:17 发布

原创最新推荐文章于 2025-04-28 14:42:17 发布 · 975 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文详细描述了VSCode中的settings.json配置，包括Prettier、vetur插件的选项，以及对不同文件类型的格式化规则，如HTML、JavaScript、Vue和XML。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件—>首选项—>设置—>打开 setting.json

{
    "workbench.startupEditor": "none",
    "security.workspace.trust.untrustedFiles": "open",
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    // 方法注释
    "fileheader.cursorMode": {
        "description": "",
        "parameter": ""
    },
    // 文件头注释
    "fileheader.customMade": {
        "Author": "pengtao",
        "Date": "Do not edit",
        "LastEditTime": "Do not edit",
        "LastEditors": "pengtao",
        "Description": ""
    },
    // 封号
    "prettier.semi": false,
    // 单引号
    "prettier.singleQuote": true,
    // jsx中单引号
    "prettier.jsxSingleQuote": true,
    // 末尾尾随逗号
    "prettier.trailingComma": "none",
    // 在唯一的箭头函数参数周围包含括号
    "prettier.arrowParens": "avoid",
    // 将多行JSX元素的>放在最后一行的末尾，而不是单独放在下一行（不适用于自动关闭元素）。
    "prettier.bracketSameLine": false,
    // Vue文件中＜script＞和＜style＞是否缩进
    "prettier.vueIndentScriptAndStyle": false,
    "javascript.autoClosingTags": false,
    "javascript.format.enable": false,
    "javascript.validate.enable": false,
    "[xml]": {
        "editor.defaultFormatter": "redhat.vscode-xml"
    },
    "[glsl]": {
        "editor.defaultFormatter": "raczzalan.webgl-glsl-editor"
    },
    // vue文件配置
    "[vue]": {
        // 默认格式化插件 vetur
        "editor.defaultFormatter": "octref.vetur"
    },
    // Vetur默认配置
    "vetur.format.defaultFormatterOptions": {
        // prettyhtml配置
        "prettyhtml": {
            // 属性格式化
            "sortAttributes": true,
            // 属性换行
            "wrapAttributes": true
        },
        // prettier配置 与外层prettier配置一致
        "prettier": {
            "semi": false,
            "singleQuote": true,
            "jsxSingleQuote": true,
            "trailingComma": "none",
            "bracketSameLine": false,
            "arrowParens": "avoid",
            "vueIndentScriptAndStyle": true
        }
    },
    // Vue文件中＜script＞是否缩进
    "vetur.format.scriptInitialIndent": true,
    // Vue文件中＜style＞是否缩进
    "vetur.format.styleInitialIndent": true,
    // vue中template使用prettyhtml进行格式化(个人觉得用prettyhtml格式化html比较好看一点)
    "vetur.format.defaultFormatter.html": "prettyhtml",
    "workbench.colorTheme": "Visual Studio Light"
}