vsCode使用eslint-CSDN博客

eslint 查询 eslint.org/

安装

// 首先全局安装 eslint 
yarn global add eslint 
复制代码

简单配置

// 使用AirBnb 规则 
eslint --init
// 推荐选择 javascript 文件类型 json文件的话 在里面写注释有点问题
复制代码

如果要设置版本(airbnb)

eslint 使用的时候需要依赖 eslint-config-airbnb 、eslint-plugin-import、eslint-plugin-jsx-a11y、eslint-plugin-react

 "eslint-config-airbnb": "16.1.0",
 "eslint-plugin-import": "^2.8.0",
 "eslint-plugin-jsx-a11y": "^6.0.3",
 "eslint-plugin-react": "^7.6.1",
// 可以使用对应版本
yarn add eslint-config-airbnb@16.1.0 --dev
复制代码

自定义规则

eslintrc.js 是对当前工作区设置，不管在哪个工作项目

elintrc配置

extentds: 使用扩展规则，可以多个，本文使用['airbnb']
env: 你的脚本将要运行在什么环境中 ``
rules: 开启规则和发生错误时报告的级别 级别分为三种推荐使用[1,{}]定义
      0或’off’：关闭规则。 
      1或’warn’：打开规则，并且作为一个警告（并不会导致检查不通过）。 
      2或’error’：打开规则，并且作为一个错误 (退出码为1，检查不通过)。

      参数说明： 
      参数1 ： 错误等级 
      参数2 ： 处理方式
globals：定义全局变量  针对可能需要使用到 比如windows 这些可以配置
      "window": true,
      "document": true,
复制代码

参考宽松rules

"rules": {
    "react/no-string-refs": [1],
    "react/no-render-return-value": [1],
    "jsx-a11y/no-noninteractive-element-interactions": [1],
    "react/no-unused-prop-types": [1],

    "no-case-declarations": [0],
    "arrow-body-style": [0],
    "generator-star-spacing": [0],
    "global-require": [1],
    "import/extensions": [0],
    "import/no-extraneous-dependencies": [0],
    "import/no-unresolved": [0],
    "import/prefer-default-export": [0],
    "jsx-a11y/no-static-element-interactions": [0],
    "no-bitwise": [0],
    "no-cond-assign": [0],
    "no-else-return": [0],
    "no-nested-ternary": [0],
    "no-restricted-syntax": [0],
    "no-use-before-define": [0],
    "react/forbid-prop-types": [0],
    "react/jsx-filename-extension": [1, {
      "extensions": [".js"]
    }],
    "react/jsx-no-bind": [0],
    "react/prefer-stateless-function": [0],
    "react/prop-types": [0],
    "require-yield": [1],
    "jsx-a11y/anchor-is-valid": [0],
    "no-underscore-dangle": [0],
    "object-curly-newline": [0],
    "func-names": [0],
    "react/no-array-index-key": [0],
    "jsx-a11y/click-events-have-key-events": [0],
    "no-plusplus": [0],
    "linebreak-style": [
      0,
      "error",
      "windows"
    ],
    // 正确的使用const 在this.props解构的时候, 为了简便使用了let
    "prefer-const": [0],
    // 不允给参数重新赋值 
    "no-param-reassign": [0],
    // 函数未被调用 对应这种表达式cb && cb()会报错
    "no-unused-expressions": [0],
    // 必须指定defaultProps, 但是对于很多组件,不传props很也是一种状态
    "react/require-default-props": [0],
    "jsx-a11y/label-has-for": [0],
    // 多个操作符需要加括号, 明确指定先后顺序
    "no-mixed-operators": [0],
    "react/no-find-dom-node": [0],
    "max-len": [0],
    // 箭头函数不返回赋值语句
    "no-return-assign": [0],
    // tabIndex属性不能加在 不是focusable元素上
    "jsx-a11y/no-noninteractive-tab": [0],
    "jsx-a11y/no-noninteractive-tabindex": [0],

    // react class 函数书写顺序
    "react/sort-comp": ["error", {
      "order": [
        "static-methods",
        "lifecycle",
        "/^handle.+$/",
        "getters",
        "setters",
        "/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/",
        "everything-else",
        "/^render.+$/",
        "render"
      ]
    }]
  },
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true
    }
  }
复制代码

严格rules

  // 涉及到工作区 未能检测到 忽略这个提醒
    "import/no-extraneous-dependencies": [0],
    //   // 函数未被调用 对应这种表达式cb && cb()会报错
    "no-unused-expressions": [2, { "allowShortCircuit": true }],
    // 对于prop中使用bind提示
    "react/jsx-no-bind": [
      1,
      {
        'ignoreRefs': true,
        'allowArrowFunctions': true
      }
    ],
    // 对proptypes 类型不限制
    "react/forbid-prop-types": [0],
    // 暂时忽略属性类型检查
    "react/prop-types": [0],
    "react/jsx-filename-extension": [1, {
      "extensions": [".js"]
    }],
    // react class 函数书写顺序
    "react/sort-comp": ["error", {
      "order": [
        "static-methods",
        "lifecycle",
        "/^handle.+$/",
        "getters",
        "setters",
        "/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/",
        "everything-else",
        "/^render.+$/",
        "render"
      ]
    }]
复制代码

vsCode配置在vsCode配置中加入以下设置可以保存的时候自动保存为符合eslint规则的代码（不是全部规则）

"eslint.autoFixOnSave": true,
复制代码

如果在windows环境中换行符的话可以通过vs用户配置修改成LF模式扩展阅读(juejin.im/entry/5c289…)

PropTypes （当然可以 ts）

可以使用vsCode 插件React PropTypes Generate可以快速生成PropTypes