eslint 代码检测工具

Posted 2020-10-18

jshint 检测工具不够灵活下，道格拉斯（何许人也？json创造者，javascript重要任务，犀牛那本书就是他写的）。

文档地址：

• 中文地址
• English

安装

利用npm全局安装eslint和pre-commit 。建议这两个全局安装，可能别人检测代码工具不一样，尤其webstrom是自带检测代码功能。

npm i -g eslint pre-commit

pre-commit，在git commit提交代码的时候，希望能够执行代码检测，不要把错误的代码上传到项目仓库（说直白点，谁写的错误代码，在提交时被检查出来，你必须解决，不解决不上传到。从而杜绝了他人修改你的代码）。

pre-commit 主要的配置是都在package.json中

1. 在scripts 定义你希望执行的命令。
   这里我们定义一个用eslint检测你开发代码，如下：

"scripts": {
    "lint": "eslint src/**"
}

1. 在定 pre-commit 的中

"pre_commit": [
    "lint"
]

配置文件

这里都是按照推荐的方法来配置的（务必一定要看官网文档说明，很多语法支持都在官网有说明，google和百度文档不是一定是eslint最新最稳定版本。）

1. 生成配置文件

eslint --init

在项目根目录下会生成 .eslintrc.js。

1. 执行环境的配置

module.exports = {
    env : {
        "node": true,
        "brower": true,
        "es6": true
    }  
}

"es6": true 开启es6全局变量，但并没有支持es6的新语法类型的支持，要开启需要在parserOptions中添加"ecmaVersion": 6

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": 2
    }
}

1. 解析器parser，这里是使用babel-eslint

先全局安装babel-eslint。

npm i -g babel-eslint

修改配置参数：

{
    "parser": "babel-eslint",
}

1. jsx语法支持，安装eslint-plugin-react

npm install eslint-plugin-react --save-dev

配置参数

 "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ]

1. rule配置，这是elsint的核心，这个看文档

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
• "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

这里以no-console为例子说明。

"rules": {
  "no-console": [
    "error",
    "allow": ["warn","error"]
  ]
}

这段规则意思禁止使用console，但出console.warn 和 console.error。

但又有时想用console.log，可以在js文件写入相关注释。

/*eslint-disable no-console*/
console.log(‘u can use console.log!‘);
/*eslint-enable no-console*/
console.log(‘u must not use console.log!‘);

编辑配置

像sublime、atom默认是没有代码检测的，是用webstorm的知道，那种代码及时检错功能非常方便。那么sublime和atom也可以配置相应及时检错（webstorm是含有的，为什么不使用webstrom？那是因为我对sublime、atom上的沉默成本太大）。

sublime配置

• sublimeLinter
• sulimeLinter-contrib-eslint

设置，要在sublimeLinter用户设置，添加如下内容：

{
    "user": {
        "paths":{
            "window": [
                "c:/User/userName/AppData/Roaming/npm/eslint.exe"
            ]
        }
    }
}

window根据自身的全局安装eslint情况而定。

atom配置

• linter
• atom-eslint

安装即可，插件的名字我记不清楚了，但是按照这样搜索，找到下载次数最多安装，是可以安装到对插件(我大多时间是使用sublime，很容易忽视atom，但是使用起来也没什么障碍)。

ps: 具体细节首要是查文档。

我犯了一个严重的错误，项目初始化一定要npm init，否则会出现一些某名奇妙的错误。