vetur+prettier+eslint 实现vue代码格式化

前端vue代码用eslint做了代码格式校验,规范用的这个http://alloyteam.github.io/CodeGuide/
在vsc中,需要安装vutur、prettier插件
为了编码方便,vsc的setting.json配置成这样

{
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "vetur.validation.template": false,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "wrap_attributes": "force-aligned"
    },
    "editor.wordWrap": "on",
    "prettier.tabWidth": 4,
    "prettier.singleQuote": true,
    "editor.formatOnSave": true,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "typescriptreact",
            "autoFix": true
        }
    ],
    "javascript.preferences.quoteStyle": "single",
    "vetur.format.defaultFormatter.js": "prettier",
    "editor.tabSize": 4,
    "editor.detectIndentation": false,
    "typescript.preferences.quoteStyle": "single",
    "prettier.useTabs": false
}

这样,代码会在格式化的时候自动按照eslint的规则去格式化代码

你可能感兴趣的:(vetur+prettier+eslint 实现vue代码格式化)