Eslint及其在VScode上的配置步骤

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次eslint代码检查，就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃，可以有效的控制项目代码的质量。
eslint的官网链接

Eslint在VScode上的配置步骤

在扩展里面搜Eslint,安装

再搜Prettier - Code formatter，进行安装

然后在设置中，就是settings.json文件中加入以下：

"eslint.alwaysShowStatus": true,
    "prettier.trailingComma": "none",
    "prettier.semi": false,
    //每行文字个数超出此限制将会被迫换行
    "prettier.printWidth": 300,
    //使用单引号替换双引号
    "prettier.singleQuote": true,
    "prettier.arrowParens": "avoid",
    //设置.vue文件中，HTML代码的格式化插件
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.ignoreProjectWarning": true,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "trailingComma": "none",
            "semi": false,
            "singleQuote": true,
            "arrowParens": "avoid",
            "printWidth": 300
        },
        "js-beautify-html": {
            "wrap_attributes": false
        }
    },

    // ESLint 插件的配置
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },

最后自己建立一个.prettierrc文件，里面的内容是：

{
    "semi": false,
    "singleQuote": true,
    "bracketSpacing": true
}

再将该文件放置到自己的电脑C盘\用户\自己电脑的名字文件夹下面
然后回到settings.json文件下配置：

"prettier.configPath": "C:\\Users\\******\\.prettierrc",

路径就是自己刚刚配置的路径

在App.vue和main.js文件中右击鼠标，

如果和我的不一样就点击下面“配置默认格式程序”选择“Prettier - Code formatter”即可