Lint笔记-ESLint

发表于 2019-09-03 更新于 2020-09-21 分类于工作

由于尽量不想让自己在编码路上留下的足迹会让后人觉得像屎一样…年初到现在断断续续的都在想办法提升个人的工程能力

关于Lint最早是前两年写了一段时间的nodejs，然后知道了一个叫ESLint的玩意…这东西好用啊，让代码可以不太像屎一样了所以最近就捡起来了，当然工具是辅助最重要的还是基础。

伴随着格言 do not BB，show me code。刚好同事让我帮忙跟他弄一下ESLint，那我想着干脆整个文档，那不就简单了，大家都能用。

以下就是跟我们项目贴合度比较高的ESLint简单的配置教程出来（为博客凑个数，话说确实太懒了文章写的少），然后有时间再分析其原理的东西。

ESLint 配置

安装ESLint相关库

npm install -g eslint 
// 用了 React 需要再安一个babel-eslint  
npm install -D eslint babel-eslint
//如果要用大厂的需安装对应的库，比如用airbnb的
npm install -D eslint-config-airbnb
// 因为要校验 Reac 语法，所以这里需要下载一个 React 语法规则的包  
npm install -D eslint-plugin-react

可能不全，但是总之一句话，别想太多提示差什么包就装什么包就对了。

生成配置文件

node_modules/.bin/eslint --init
//如果全局安装了 可以直接
eslint --init

会出现一个界面，根据模板创建ESLint的配置文件，最终填完之后大概就是下面这样

演示一把：

选一种方式生成配置文件，可根据需求选择，建议第一个问题选第二种Use a popular style guide（使用大厂的），然后选一个，通常用airbnb的. 跟着界面依次填写下面的内容，最终会在你根目录下生成一个文件名为.eslintrc.js的配置文件。

根据模板创建配置文件，可以选个模板，也可以自己回答问题

PS E:\eslint> eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? (Use arrow keys)
> Airbnb (https://github.com/airbnb/javascript)
  Standard (https://github.com/standard/standard)
  Google (https://github.com/google/eslint-config-google)

比如选airbnb

module.exports = {
"extends": "airbnb"
};

也可以自己回答问题来创建

> eslint --init

? How would you like to configure ESLint? Answer questions about your style
// 是否校验 Es6 语法
? Are you using ECMAScript 6 features? Yes  
// 是否校验 Es6 模块语法
? Are you using ES6 modules? Yes   
// 代码运行环境，Browser 指浏览器 
? Where will your code run? Browser   
// 是否校验 CommonJs 语法  
? Do you use CommonJS? Yes  
// 是否校验 JSX 语法
? Do you use JSX? Yes   
// 是否校验 React 语法
? Do you use React? Yes 
// 首行空白选择 Tab 键还是 Space
? What style of indentation do you use? Tabs
// 字符串使用单引号 'string' 还是双引号 "string"
? What quotes do you use for strings? Double
// 操作系统
? What line endings do you use? Windows 
// 每行代码结尾是否校验加分号 ;
? Do you require semicolons? Yes
// 以 .js 格式生成配置文件
? What format do you want your config file to be in? JavaScript

PS：也可以直接在根目录下手动建一个文件.eslintrc.js（后缀也可以是JSON、YAML等），然后手动写配置

贴一个我的（手动写的）

如果只用于JS语法类扫描，可参考但不建议直接使用，因为配置的东西有点多

module.exports = {
"extends": ["airbnb", "prettier","prettier/react"],
"parser": "babel-eslint",
//如果我们想对一些非标准 JS 语法添加 Lint 怎么办呢？有办法，ESLint 还支持我们自定义 parser。 parser是为了非标准语法能生的，plugin是针对符合js语法的规则集合的扩展。
"plugins": [
    "prettier",
    "react",
    "jsx-a11y",
    "import"],
//自定义规则，可以覆盖掉extends的配置。
"rules": {
    "jsx-a11y/click-events-have-key-events":0,
    "jsx-a11y/interactive-supports-focus":0,
    "jsx-a11y/no-static-element-interactions ":0,
    // 'one-var':2,//"error" 或 2 开启规则，使用错误级别的错误
    // 强制驼峰命名规则
    "camelcase": [0, {
        "properties": "never"
    }],
    "prettier/prettier": ["error"],
    "react/prop-types": ["warn"],
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
    "no-unused-vars": 1,//"warn" 或 1 - 开启规则，使用警告级别的错误
    "global-require": 0,//"off" 或 0 - 关闭规则
    "prefer-destructuring": 0,
    "class-methods-use-this": 0,
    "react/no-unused-state": 1,
    "jsx-a11y/no-static-element-interactions":0,
    "import/extensions":0
},
"env":{
    //定义env会带进来一些全局变量，browser会添加所有的浏览器变量比如Windows
    "browser": true,
    "es6": true
},
//当我们将默认的解析器从Espree改为babel-eslint的时候，我们需要指定parseOptions，这个是必须的。parserOptions ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。
"parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true// 启用 JSX
    },
    "ecmaVersion": 6
},

};`

配置IDE

VSCode配置需自行上网搜索

启用ESLint插件

配置触发ESLint自动修复的快捷键

ESLint的使用方法

本文引用的内容，如有侵权请联系我删除，给您带来的不便我很抱歉。