vue项目开发规范配置

eslint

配置编译时是否启用

vue.config.js配置文件中增加：

module.exports = {
    lintOnSave: true,
    devServer: {
        overlay: {
            warnings: true,
            errors: true
        }
    }
}

参考文章

Configuration Files

This can be in the form of an .eslintrc.* file or an eslintConfig field in a package.json file.

There are several pieces of information that can be configured:

• Environments - which environments your script is designed to run in. Each environment brings with it a certain set of predefined global variables.
• Globals - the additional global variables your script accesses during execution.
• Rules - which rules are enabled and at what error level.

配置：

    'space-before-function-paren': ['error', 'never']

prettier和eslint配合使用

参考文章

整理配置

参考文章
梳理前端开发使用eslint和prettier来检查和格式化代码问题

vscode中安装eslint插件

增加配置到settings.json中：

    "eslint.autoFixOnSave": true,  //保存时使用自动格式化
    "eslint.validate": [   //验证文件类型
        "javascript",
        "javascriptreact",
        "jsx",
        {
            "language": "vue",
            "autoFix": true
        },
        "vue",
        "html",
    ]

"vue"配置需要放到autoFix之后，否则出现在vscode中保存不能自动fix的情况。

新配置，上面配置已过期：

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

vscode中安装vetur插件

增加配置到settings.json中：

   "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned" //属性强制折行对齐
        },
        "prettier": {
            "singleQuote": true,
            "semi": false
        }
    }