vscode配置ctrl+S进行代码格式化

最新推荐文章于 2025-08-26 10:33:58 发布

原创最新推荐文章于 2025-08-26 10:33:58 发布 · 2.2k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

实用配置

本文介绍了如何在Visual Studio Code中配置Beautify和Vetur插件，实现HTML、CSS、JS和Vue文件在保存时自动格式化。设置包括插件安装、配置文件内容以及针对不同语言的默认格式化器。通过这些设置，可以提升代码整洁性和开发效率。

Visual Studio Code 保存文件时自动格式化当前页代码

使用到的插件

Beautify：用于对html css js等文件代码格式化。
Vetur：用于对Vue代码格式化，也可以使用Beanutify。

setting 代码

{
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "beautify.config": "",
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json",
                "jsonc"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautifyrc"
            ]
        },
        "css": [
            "css",
            "less",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "vue"
        ]
    },
    "editor.fontSize": 18,
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    // #这里很关键，如果这里没有设置 保存时是不会对vue代码进行格式化的
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "emmet.excludeLanguages": [
        "markdown"
    ],
    "security.workspace.trust.untrustedFiles": "open",
    "explorer.confirmDelete": false,
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "emmet.preferences": {},
    "editor.formatOnType": true,
    // #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
    "explorer.confirmDragAndDrop": false,
    "javascript.preferences.quoteStyle": "single",
    "typescript.preferences.quoteStyle": "single",
    // tab 大小为2个空格
    "editor.tabSize": 2,
    // 100 列后换行
    "editor.wordWrapColumn": 100,
    // 保存时格式化
    "editor.formatOnSave": true,
    // 开启 vscode 文件路径导航
    "breadcrumbs.enabled": true,
    // prettier 设置语句末尾不加分号
    "prettier.semi": false,
    // prettier 设置强制单引号
    "prettier.singleQuote": true,
    // 注释后面加空格
    "prettier.eslintIntegration": true,
    // 选择 vue 文件中 template 的格式化工具
    "vetur.format.defaultFormatter.html": "prettyhtml",
    // 显示 markdown 中英文切换时产生的特殊字符
    "editor.renderControlCharacters": true,
    // 设置 eslint 保存时自动修复
    "eslint.autoFixOnSave": true,
    // eslint 检测文件类型
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    // vetur 的自定义设置
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": true,
            "semi": false
        }
    }
}