vsCode中使用ESLint配置全过程

在 vue项目中使用vscode编辑时为了开发的代码统一，采用了ESLint如果代码没有按照规则格式化的话那么就将报错，接下来将详细的讲下配置全过程：

前提条件

安装ESLint,我这里就重整个Vue项目的下载开始操作

vue init webpack eslint_dome_vue //创建项目

在创建项目时可直接开启，ESLint配置。项目创建开之后会在目录下生成 .eslintrc.js 文件，这是用来今后配置规则之处。

配置vsCode令代码可修复

在vscode商城中下载ESLint插件

配置vscode路径:文件 -> 首选项 -> 设置

在设置中分为用户和工作区，区别在于在用户中的配置的对改用户的所有项目都有效，工作区的是针对指定项目。这里我们开启用户的setting.json文件添加以下代码开启保存自动修复即可（添加在对象第一层）。添加代码如下：

  //eslint 代码自动检查相关配置
    "eslint.enable": true,
    "eslint.autoFixOnSave": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascriptreact",
        "vue",
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        },
        "html",
        {
            "language": "html",
            "autoFix": true
        }
    ],

保存之后重启vsCode，随后就可实现代码跟随ESLint规则修复！如果出现重启vsCode后没有实现跟随ESLint规则修复，那么一定要检查下如下开关是否开启：

ESLint规则

• “off” or 0 - 关闭规则
• “warn” or 1 - 将规则视为一个警告（不会影响退出码）
• “error” or 2 - 将规则视为一个错误 (退出码为1)

尝试在规则中添加'no-debugger': 1，意味着不允许使用debugger

则会出现报错警告：

还有其他一些规则可以去看ESLint文档，这里就不一一描述了。

以上就是我对ESLint的一些理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。