eslint规范

背景

在开发过程中eslint没有进行强制规范，导致项目代码很多警告，代码不规范，为此从根源上解决进行强制规范

配置eslint检测不通过，错误显示在浏览器，且编译失败

vue.config.js配置如下内容：

module.exports = {
    devServer: {
        overlay: {
            warnings: true,
            errors: true
        }
    },
    lintOnSave: 'error',
    // 用途：设置是否在开发环境下每次保存代码时都启用 eslint验证。
	// false：关闭每次保存都进行检测
	// true：开启每次保存都进行检测，效果与warning一样
	// ‘warning’：开启每次保存都进行检测，lint 错误将显示到控制台命令行，而且编译并不会失败。
	// ‘error’：开启每次保存都进行检测，lint 错误将显示到浏览器页面上，且编译失败。
	// ‘default’：同’error’
    chainWebpack: config => {
        config.module.rule('eslint').use('eslint-loader').loader('eslint-loader').tap(opt => {
            opt.emitWarning = opt.emitError = opt.failOnWarning = opt.failOnError = true;
            return opt;
        });
    }
};

npm run serve启动运行后会出现如下效果：

访问页面效果如下图：

npm run build编译打包失败

vscode配置eslint代码提示和自动格式化功能

安装eslint插件

开启错误提示

如下区域进行打勾

不符合eslint规范时会如下提示：

配置自动格式化

为了提高工作效率，可以配置自动格式化
点击如下，打开setting.json文件

配置添加下面内容：

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

这样代码在保存时会自动的进行格式化