在开发vue中，避免不了的格式化代码，原来小编一直使用vsocode中的Beautify插件，一按F1，选择Beautify file -->html,后来就不再使用了，使用了setting.json去配置。

打开设置

设置

找到在setting.json中编辑

setting.json

以下就是我的配置了

{
    "update.mode": "manual",
    "editor.formatOnSave": true,
    "editor.fontSize": 14,
    "editor.fontFamily": "Consolas, 'Courier New', monospace",
    "editor.fontWeight": "bold",
    "editor.lineHeight": 18,
    "editor.letterSpacing": 0,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": true,
    "editor.wordWrap": "off",
    "editor.renderLineHighlight": "gutter",
    "editor.roundedSelection": true,
    "editor.renderControlCharacters": true,
    "editor.renderIndentGuides": true,
    "editor.dragAndDrop": false,
    "editor.minimap.showSlider": "mouseover",
    "editor.minimap.renderCharacters": false,
    "editor.minimap.maxColumn": 90,
    "editor.quickSuggestions": {
        "strings": true
    },
    "window.titleBarStyle": "native",
    "window.menuBarVisibility": "visible",
    "window.zoomLevel": 0,
    "window.title": "${rootName} - ${dirty}${activeEditorLong}",
    "workbench.colorTheme": "Monokai",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.startupEditor": "newUntitledFile",
    "workbench.activityBar.visible": true,
    "workbench.statusBar.visible": true,
    "workbench.sideBar.location": "left",
    "workbench.editor.enablePreview": true,
    "workbench.editor.tabSizing": "fit",
    "workbench.colorCustomizations": {
        // "statusBar.background": "#333333",
        // "statusBar.foreground": "#adadad",
        "terminal.background": "#000000",
        "terminal.foreground": "#FFFFFF"
    },
    "breadcrumbs.enabled": false,
    "breadcrumbs.symbolPath": "off",
    "explorer.openEditors.visible": 0,
    "files.encoding": "utf8",
    "files.eol": "\r\n",
    "files.hotExit": "onExit",
    "files.autoSave": "off",
    "extensions.autoUpdate": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "wxml": "html"
    },
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.implicitProjectConfig.experimentalDecorators": true,
    //path
    "git.path": "D:\\Git\\bin\\git.exe",
    "terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\cmd.exe",
    //eslint
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    //px to rem
    "px-to-rem.px-per-rem": 75,
    "px-to-rem.only-change-first-ocurrence": false,
    "px-to-rem.number-of-decimals-digits": 10,
    "px-to-rem.notify-if-no-changes": true,
    //npm-scripts
    "npm-scripts.showStartNotification": false,
    //simpleIcons
    "simpleIcons.hideArrows": false,
    //vetur
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false
        }
    },
    "vetur.validation.template": false,
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "minapp-vscode.disableAutoConfig": true,
    "search.followSymlinks": false,
    "team.showWelcomeMessage": false,
    "workbench.statusBar.feedback.visible": false
}

喜欢的可以进行复制替换保存，在Ctrl+s的时候会自动保存代码
友情链接 使用vs code创建vue代码片段