Eslint简单使用与如何在VScode中配置

eslint可以自动检测代码错误，让代码风格统一，在团队合作时尤为重要。

    一.初始化npm:

npm init -y

   二.安装eslint（这里使用全局安装）:

npm i eslint -g

  三.初始化eslint:

eslint --init

    初始化eslint后根目录会生成一个.eslintrc.js的文件，我们可以通过这个文件配置eslint(后面会讲如何配置）。接着我们在根目录新建一个test.js文件，输入以下内容:

console.log('eslint入门');

   然后用eslint执行这个文件： eslint test.js  ，接着你会发现报错了：

   

    可以看到，console是不被允许的，如何配置console被允许呢？打开.eslintrc.js,输入以下内容：

module.exports = {
    "env": {  //eslint使用的环境
        "browser": true,
        "es2020": true
    },
    "extends": "eslint:recommended", ////继承一种或者多种规则,默认使用eslint推荐风格
    "rules": { //配置规则，重点
       "no-console": "off", //允许console
       "indent": ["error", 4] //缩进是四个空格
    }
};

    可以看到我们已经通过配置rules把no-console给关了，现在再运行eslint test.js就不会报错了。rules里面的 "indent": ["error", 4]是什么意思呢？为了实现更细粒化的配置，eslint运行我们给规则设立提醒程度：

规则的错误等级有三种：

• "off" 或者 0：关闭规则
•  "warn" 或者 1：打开规则，并且作为一个警告（不影响代码运行）
•  "error" 或者 2：打开规则，并且作为一个错误（错误不解决，代码无法运行

四.如何引入配置好的eslint:

    每次都要手动配置eslint岂不是很麻烦，事实上我们可以通过extends，实现eslint继承,使用别人写好的规则包（以eslint-config-开头的npm包），如eslint-config-standard：

module.exports = {
    "extends": "standard", 
}

   其他常见规则：

"rules": {
        /**
        **这些规则与 JavaScript 代码中可能的错误或逻辑错误有关
        **/
        "for-direction":"error",//强制 “for” 循环中更新子句的计数器朝着正确的方向移动
        "getter-return":"error",//强制在 getter 属性中出现一个 return 语句
        "no-await-in-loop":"error",//禁止在循环中 出现 await
        "no-compare-neg-zer":"error",//禁止与 -0 进行比较
        "no-cond-assign":[//禁止在条件语句中出现赋值操作符
            "error",
            "always"
        ],
        "no-console":[//禁用 console
            "error"
//            { "allow": ["warn", "error"] }
        ],
        "no-constant-condition":"error",//禁止在条件中使用常量表达式
        "no-control-regex":"error",//禁止在正则表达式中使用控制字符
        "no-debugger":"error",//禁用 debugger
        "no-dupe-args":"error",//禁止在 function 定义中出现重复的参数
        "no-dupe-keys":"error",//禁止在对象字面量中出现重复的键
        "no-duplicate-case":"error",//禁止重复 case 标签
        "no-empty":"error",//禁止空块语句
        "no-empty-character-class":"error",//禁止在正则表达式中出现空字符集
        "no-ex-assign":"error",//禁止对 catch 子句中的异常重新赋值
        "no-extra-boolean-cast":"error",//禁止不必要的布尔类型转换
        "no-extra-parens":"error",//禁止冗余的括号
        "no-extra-semi":"error",//禁用不必要的分号
        "no-func-assign":"error",//禁止对 function 声明重新赋值
        "no-inner-declarations":"error",//禁止在嵌套的语句块中出现变量或 function 声明
   
    }

   完整规则请参考：http://eslint.cn/docs/rules/

   最后再介绍下如何在vscode中配置eslint，实现便捷开发：

   1.安装eslint插件

    

   2.打开左上角文件-首选项-设置,在设置中搜索eslint，点击并翻页到最下面，点击setting.json进行配置：

插入以下配置文件：

    "editor.formatOnSave": false, //关闭每次保存的时候自动格式化js，不然可以和eslint冲突
    "eslint.autoFixOnSave": true, //  启用保存时自动修复,默认只支持.js文件
    "eslint.validate": [
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        },
        {
            "language": "typescript",
            "autoFix": true
        },
    ],

  然后编写代码，按ctrl+s后发现代码自动修复了，爽的一匹，哈哈.