如何向 React 代码库添加 Prettier 和 ESLint 自动化

“文明的进步，源于我们无需思考就能完成的重要操作数量的增加。”——阿尔弗雷德·诺斯·怀特黑德

我刚刚在工作中在我的 React 代码库上实现了 Prettier + ESLint ，我想我最好分享我的笔记以防其他人需要解决这个问题。

我的设置包括：

在 VSCode 中查看内联 lint 违规
PR 与 GitHub 操作合并后进行 Prettify
在 git commit 之前进行美化（有些人不喜欢这个）
能够在本地手动运行检查

即使你使用 TypeScript，你也需要在代码库中同时使用 Prettier 和 ESLint。Prettier并不总是能按照你的意愿执行，而 ESLint 会检查 Prettier 无法检查的内容。由于历史原因，本代码库未使用 TypeScript，请不要@我，我对 TypeScript 的热爱是有据可查的。

步骤 1：依赖关系

yarn add -D eslint eslint-plugin-react husky lint-staged prettier

# or npm i -D eslint eslint-plugin-react husky lint-staged prettier

截至撰写本文时，我正在使用的版本如下：

{
  "devDependencies": {
    "eslint": "^7.27.0",
    "eslint-plugin-react": "^7.23.2",
    "husky": "^6.0.0",
    "lint-staged": "^11.0.0",
    "prettier": "^2.3.0"
  }
}

请注意，如果您将 Husky v6 与 Yarn 2 一起使用，则此设置需要更多工作。

第 2 步：脚本

将内容添加到 package.json...

{
  "scripts": {  
    "format": "prettier --write .",
    "prepare": "husky install"
  },
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  },
}

您现在可以npm run format一次性运行来美化您现有的代码库。

如果你想知道：

Husky添加了 git commit hook，以便...
Lint-staged仅在你在 git 中暂存的新内容上运行 Prettier

步骤 3：更漂亮的设置

开始 Bikeshedding！使用Prettier Playground来决定你的团队想要什么设置。

把这个放进去.prettierrc.json

{
    "arrowParens": "always",
    "bracketSpacing": false,
    "embeddedLanguageFormatting": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxBracketSameLine": false,
    "jsxSingleQuote": false,
    "printWidth": 80,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleQuote": false,
    "tabWidth": 2,
    "trailingComma": "es5",
    "useTabs": false,
  }

步骤 4：ESLint

你知道你必须...

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/prop-types": [0, {}], // this is dumb, why is this still recommended
        "react/no-unescaped-entities": [0, {}],
        "no-unused-vars": [1, {}],
    }
};

建议：还启用ESLint VSCode 插件以在编辑器中查看 eslint 反馈！！！

步骤5：自动化

我们只需添加一个漂亮的小 GitHub Action .github/workflows/autoformat.yml：

name: Continuous Integration

# This action works with pull requests and pushes
on:
  pull_request:
  push:
    branches:
      - master

jobs:
  prettier:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          # Make sure the actual branch is checked out when running on pull requests
          ref: ${{ github.head_ref }}

      - name: Prettify code
        uses: creyD/prettier_action@v3.3
        with:
          # This part is also where you can pass other options, for example:
          prettier_options: --write **/*.{js,md}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

就是这样！

文章来源：https://dev.to/swyx/how-to-add-prettier-and-eslint-automation-to-a-react-codebase-2gk1