[JavaScript知识库]学习记录445@eslint 重点知识纲要

虽然是非前端人员，但是对eslint还是需要稍微深入的了解的，不然会成为绊脚石，以下内容只是纲要，或者只是目录，来自于B站上一系列视频；如果要系统性的学习，按照下面的步骤或者视频即可。无他，实手熟尔！

1. 什么是eslint：js代码检验
2. eslint配置详解：env、extends、parser、parserOptions、plugins、rules
3. 项目中的不同文件夹配置eslint：就近原则
4. 五种在文件中配置ESLint的方式：json、JavaScript、ymal等
5. 理解ESLint中的env：环境如node、browser等
6. 理解ESLint中的Specifying Globals：可使用的全局变量
7. 理解ESLint中的Rules：规则
8. ESLint中如何extends继承规则
9. ESLint中如何配置plugin插件
10. ESLint中如何用glob模式指定要检测的文件
11. 提交代码前自动校验ESLint

系列视频链接：https://space.bilibili.com/390120104/search/video?keyword=eslint
最好的学习站点-官网：https://eslint.bootcss.com/

以上学习完毕后：再看类似于下面的配置，就能理清楚了。

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": ["prettier", "alloy", "alloy/react"],
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier", "react-hooks"],
  "rules": {
    "arrow-body-style": 0, // 箭头函数 [2, "as-needed"]
    "class-methods-use-this": 0, // 强制类方法使用 this
    "import/extensions": 0,
    "import/no-dynamic-require": 0,
    "import/no-extraneous-dependencies": 0,
    "import/no-named-as-default": 0,
    "import/no-unresolved": 0,
    "import/no-webpack-loader-syntax": 0,
    "import/prefer-default-export": 0,
    // 缩进Indent with 2 spaces
    "indent": [
      0,
      2,
      {
        "SwitchCase": 2
      }
    ],
    "no-unused-vars": 0,
    "array-callback-return": 0,
    "no-duplicate-imports": 0,
    "max-params": 0,
    "no-console": 0, // 不禁用console
    "no-debugger": 2, //禁用debugger
    "no-return-assign": 0,
    "no-param-reassign": 0,
    "max-nested-callbacks": "off",
    "prettier/prettier": ["error"],
    "react-hooks/exhaustive-deps": "error",
    "react-hooks/rules-of-hooks": "error",
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", ".jsx", ".ts", ".tsx", ".mdx"]
      }
    ],
    "react/jsx-fragments": 0,
    // Indent JSX with 2 spaces
    "react/jsx-indent": ["error", 2],
    // Indent props with 2 spaces
    "react/jsx-indent-props": ["error", 2],
    "react/jsx-key": 2, //在数组或迭代器中验证JSX具有key属性
    "react/jsx-no-useless-fragment": 0,
    "react/jsx-uses-react": "warn", //防止react被错误地标记为未使用
    "react/jsx-uses-vars": "warn",
    "react/no-children-prop": 0,
    "react/prop-types": 0,
    "react/no-unstable-nested-components": 0,
    "eol-last": ["warn","always"]
  }
}