react增加eslint校验

基于vscode，在react项目中，增加eslint校验及prettier格式化

安装eslint，并初始化

npm i eslint eslint-config-prettier eslint-plugin-prettier -D

//eslint-config-prettie、eslint-plugin-prettier方便在eslint中使用prettier

npx eslint --init //初始化 根据选项选择：react、ts、browser

项目根目录将生成 .eslintrc.js文件，如下：

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "react"
    ],
    "rules": {
    }
}

修改.eslintrc.js文件

module.exports = {
  /**
   * 参考文档
   * 环境变量配置
   * https://eslint.nodejs.cn/docs/latest/use/configure/language-options
   */
  env: {
    browser: true,
    es6: true,
    node: true,
  },

  // 忽略文件
  ignorePatterns: ["node_modules", "build", "config", "static"],

  // 继承其他插件及包里面的规则
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "prettier",
  ],

  // 覆盖--用于某些特殊文件处理
  overrides: [
    {
      files: [".eslintrc.{js,cjs}"],
      env: {
        node: true,
      },
      parserOptions: {
        sourceType: "script",
      },
    },
  ],

  // 将 TypeScript 转换为 ESTree 兼容形式的解析器，以便它可以在 ESLint 中使用
  parser: "@typescript-eslint/parser",

  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },

  /**
   * 插件名称可省略 eslint-plugin- 或 eslint-plugin
   * 非范围包插件全名: eslint-plugin-react; eslint-plugin-prettier;
   * 范围包插件全名: @typescript-eslint/eslint-plugin;
   */
  plugins: ["@typescript-eslint", "react", "prettier"],

  // 基于基础规则，自定义部分规则
  rules: {
    //允许在tsx中使用jsx语法
    "react/jsx-filename-extension": "off", 
    "react/function-component-definition": [
      2,
      { namedComponents: "arrow-function" },
    ],
    "prettier/prettier": 2,
    /**
     *参考文档
     *规则文档 https://eslint.nodejs.cn/docs/latest/rules/
     */
    // 全等=== 、!===
    eqeqeq: ["error", "always"],
    // 不能省略括号
    curly: ["error", "all"],
    // 不能重复引入模块
    "no-duplicate-imports": "error",
  },
}

vscode安装eslint插件

vscode安装prettier插件

根目录新增.prettierrc.json文件

//参考文档  https://www.prettier.cn/docs/options.html
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": false,
  "bracketSameLine": true,
  "insertPragma": true
}

重启vscode即可