工具篇-VsCode-代码自动格式化

最新推荐文章于 2025-06-12 14:25:42 发布

小蒜瓣

最新推荐文章于 2025-06-12 14:25:42 发布

阅读量4.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：工具文章标签： vue.js html

本文链接：https://blog.youkuaiyun.com/messicr7/article/details/112249625

工具专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在VSCode中配置个人习惯的代码格式化规则，包括如何避免自动格式化，以及安装和配置beautify、eslint、vetur和prettier等插件来实现代码美化和风格统一。

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

由于编辑器不同，每个人的习惯不同，不同人写的代码格式不尽相同，可是改起来很是头疼，然后就只能偷懒了，经过研究最终配置成功了属于自己的代码习惯的格式化

如果不想自动格式化

代码编辑页面---->按F1---->输入save without formatting---->回车该操作可以用快捷键

tab四个空格，不随便换行，末尾不加逗号等

一、安装扩展

beautify、eslint、vetur、prettier，关于安装插件，之前写过一篇

二、vscode配置

文件-首选项-配置，点击右上角按钮转成ison，部分有注释

{
    "breadcrumbs.enabled": true, // 开启 vscode 文件路径导航
    "workbench.colorTheme": "Monokai",
    "editor.tabSize": 4, // tab 大小为4个空格
    "editor.detectIndentation": false, // 改为false，这里默认是true
    "editor.wordWrapColumn": 800, // 100 列后换行
    "editor.formatOnSave": true, // 保存时格式化
    "editor.formatOnType": true,
    "editor.renderControlCharacters": true, // 显示 markdown 中英文切换时产生的特殊字符
    "editor.fontSize": 17,
    "editor.renderWhitespace": "boundary",
    "git.confirmSync": false,
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.tslint": true,
        "source.fixAll.eslint": true
    },
    "prettier.tabWidth": 4, // prettier tab 大小为4个空格
    "prettier.semi": false, // prettier 设置语句末尾不加分号
    "prettier.singleQuote": false, // prettier 设置强制单引号
    "prettier.printWidth": 800, // 超过最大值换行
    "prettier.trailingComma": "none", // 最后是否加逗号
    // vetur 的自定义设置
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": false,
            "semi": false,
            "trailingComma": "none" // 最后是否加逗号
        },
        "js-beautify-html": {
            "wrap_attributes": "auto",
            "indent_size": 4, //缩进大小
            "indent_char": " ", //缩进字符
            "indent_with_tabs": false,
            "eol": "\n", // 用作行终止的字符，默认为\n
            "end_with_newline": true, //是否用换行符结束
            "preserve_newlines": true, // 是否保留现有的换行符
            "max-preserve-newlines": 40, // 一次可保留的最大换行数
            "indent-inner-html": true, //缩进 head body代码片段
            "wrap_line_length": 800, //超过多少字符换行
            "editorconfig": false //使用editorconfig设置选项
        }
    },
    "vetur.format.options.tabSize": 4, // vetur tab 大小为4个空格
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.postcss": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.less": "prettier",
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.ts": "prettier",
    "vetur.format.defaultFormatter.sass": "sass-formatter",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    // eslint 检测文件类型
    "eslint.validate": ["vue", "html", "javascript", "typescript", "javascriptreact", "typescriptreact"]
}