ESLint + Prettier

说明

.eslintrc.json主要用于语法/逻辑规则校验, .prettierrc 主要用于代码风格格式化, 总结来说: ESLint 是负责 对的，Prettier 是负责 美的。

为了避免冲突，需要让 ESLint 忽略掉与 Prettier 重叠的风格规则(通过使用 eslint-config-prettier)

使用

1. install packages

   pnpm add -D eslint prettier
   pnpm add -D eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin
   # react 支持
   pnpm add -D eslint-plugin-react eslint-plugin-react-hooks
   # import
   pnpm add -D eslint-plugin-import
   # markdown
   pnpm add -D eslint-plugin-mdx eslint-plugin-markdown prettier-plugin-mdx
   

2. Create .eslintrc.json

   {
     // ESLint 在执行时只会从当前配置文件开始解析，不会继续往上层目录查找 .eslintrc.* 文件（例如全局的、用户主目录下的等），从而避免继承到不期望的规则，特别是在多项目仓库或 monorepo 中非常有用。
     "root": true,
     // 在前端代码中允许 window, 在后端代码中允许 require, 支持最新的 ECMAScript 语法，防止新语法被误报
     "env": {
       "browser": true,
       "es2021": true,
       "node": true
     },
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
       "ecmaVersion": "latest",
       "sourceType": "module",
       "ecmaFeatures": {
         "jsx": true
       }
     },
     "plugins": ["@typescript-eslint", "prettier"],
     "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
     "rules": {
       "prettier/prettier": "error"
     },
     "plugins": [
       "react",
       "react-hooks",
       "@typescript-eslint",
       "prettier",
       "import",
       // markdown
       "markdown",
       "mdx"
     ],
     "extends": [
       "eslint:recommended",
       "plugin:react/recommended",
       "plugin:react-hooks/recommended",
       "plugin:@typescript-eslint/recommended",
       "plugin:import/errors",
       "plugin:import/warnings",
       "plugin:import/typescript",
       "plugin:mdx/recommended",
       "plugin:prettier/recommended"
     ],
     // 在 ESLint 中，overrides 是一种为特定文件或目录指定不同规则、插件、环境的机制。
     "overrides": [
       {
         "files": ["*.md"],
         "processor": "markdown/markdown"
       },
       {
         "files": ["**/*.md/*.js"],
         "rules": {
           "no-undef": "off",
           "no-unused-vars": "off"
         }
       },
       {
         "files": ["*.mdx"],
         "extends": ["plugin:mdx/recommended"]
       }
     ],
     "settings": {
       "react": {
         "version": "detect"
       }
     }
   }
   

3. Create .prettierrc

   {
     "semi": true,
     "singleQuote": true,
     "printWidth": 100,
     "tabWidth": 2,
     "trailingComma": "es5",
     "arrowParens": "always",
     // markdown
     "plugins": ["prettier-plugin-mdx"]
   }
   

4. script

   "scripts": {
     "lint": "eslint . --ext .ts",
     "format": "prettier --write ."
   }
   

5. vscode配置

   // ~/Library/Application Support/Code/User/settings.json
   {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
     "eslint.validate": [
       "javascript",
       "typescript",
       "typescriptreact",
       // markdown
       "markdown",
       "mdx"
     ]
   }
   

3. 支持markdown

1. 安装依赖 npm install --save-dev eslint-plugin-mdx eslint-plugin-markdown prettier-plugin-mdx

2. .eslintrc.json

   // .eslintrc.json
   {
     "root": true,
     "env": {
       "browser": true,
       "es2021": true,
       "node": true
     },
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
       "ecmaVersion": 2021,
       "sourceType": "module",
       "ecmaFeatures": {
         "jsx": true
       }
     },
     "plugins": [
       "react",
       "react-hooks",
       "@typescript-eslint",
       "prettier",
       "markdown",
       "mdx"
     ],
     "extends": [
       "eslint:recommended",
       "plugin:react/recommended",
       "plugin:@typescript-eslint/recommended",
       "plugin:mdx/recommended",
       "plugin:prettier/recommended"
     ],
     "overrides": [
       {
         "files": ["*.md"],
         "processor": "markdown/markdown"
       },
       {
         "files": ["**/*.md/*.js"],
         "rules": {
           "no-undef": "off",
           "no-unused-vars": "off"
         }
       },
       {
         "files": ["*.mdx"],
         "extends": ["plugin:mdx/recommended"]
       }
     ],
     "rules": {
       "prettier/prettier": "error"
     },
     "settings": {
       "react": {
         "version": "detect"
       }
     }
   }
   

3. .prettierrc

   // .prettierrc
   {
     "plugins": ["prettier-plugin-mdx"]
   }
   

4. .vscode/settings.json

   // .vscode/settings.json
   {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "eslint.validate": [
       "javascript",
       "typescript",
       "typescriptreact",
       "markdown",
       "mdx"
     ]
   }