VSCode支持Vue.js代码美化

准备工作

VSCode安装插件

1. Eslint
2. prettier
3. vetur

配置项

话不多说，直接上代码

// vscode settings.json
{
    "gitlens.advanced.messages": {
        "suppressShowKeyBindingsNotice": true
    }
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "workbench.colorTheme": "Panda Syntax",
    "workbench.editor.enablePreview": false,
    "prettier.semi": false,
    "editor.wordWrap": "on",
    "eslint.autoFixOnSave": true,
    "eslint.options": {
        "extensions": [
            ".html",
            ".js",
            ".vue",
            ".jsx"
        ]
    },
    "eslint.validate": [
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        },
        "html",
        "vue",
        "javascriptreact"
    ],
    "editor.renderControlCharacters": true,
    "editor.renderWhitespace": "all",
    "terminal.integrated.scrollback": 10000,
    "editor.quickSuggestions": {
        "strings": true
    },
    "element-helper.version": "2.5",
    "editor.fontSize": 16,
    "vetur.validation.template": true,
    "editor.formatOnSave": true,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "prettier.singleQuote": true,
    "editor.detectIndentation": false,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        },
        "prettier": {
            "semi": false,
            "singleQuote": true
        }
    },
    "prettier.eslintIntegration": true,
    "vetur.format.defaultFormatter.js": "prettier-eslint"
}