title: Lint笔记-ESLint
author: Gamehu
tags:
  - 实践
categories:
  - 工作
date: 2019-09-03 15:23:00
---

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

关于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的配置文件，最终填完之后大概就是下面这样


{% asset_img eslint.png  %}

**演示一把：**

选一种方式生成配置文件，可根据需求选择，建议第一个问题选第二种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插件

{% asset_img idea_eslint.png  %}

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

{% asset_img idea_eslint01.png  %}

ESLint的使用方法

{% asset_img idea_eslint02.png  %}
{% asset_img idea_eslint03.png  %}

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