学习在 React Prettier 中配置 ESLINT 和 PRETTIER 🗽 husky 🐶

2025-06-07

学习在 React 中配置 ESLINT 和 PRETTIER

更漂亮🗽

哈士奇🐶

为什么检查代码很重要？

Linting 将会检查代码但不执行它。

检查器最好的部分是发现代码中看起来不像的潜在错误。

ESLint ✍️

ESLint 会解析您的代码，对其进行分析，并运行 linting 规则。这些规则可能会触发警告或错误，让您知道代码是否正确。

例子：

// ❌ Oops, what is multiple?
const output = multiple(1, 2);
Enter fullscreen mode Exit fullscreen mode

ESLint 无法理解 add 所指的内容，因此会抛出错误。你需要显式声明 add 来更正它：

// ✅ Correct
function multiple() {}
const output = multiple(1, 2);
Enter fullscreen mode Exit fullscreen mode

安装 Eslint：

全球

$ npm install eslint -g
Enter fullscreen mode Exit fullscreen mode

或者

$ npm install eslint eslint-plugin-react lint-staged --save-dev
Enter fullscreen mode Exit fullscreen mode

注意：如果您使用的是 VS Code，请安装插件：VSCode 的 ESLint 扩展。它将直接在代码中高亮显示错误和警告。

配置 ESLint ⚙︎

ESLint 具有高度可配置性。只需.eslintrc在项目根目录下添加文件，即可在任何需要的文件上运行 ESLint。

如果您想跳过某些代码的 eslint，请在代码中添加注释：// eslint-disable-next-line

例如：

// eslint-disable-next-line
const result = multiple(1, 2);
Enter fullscreen mode Exit fullscreen mode

注意：请谨慎使用，每次发现错误时禁用 ESLint 是一个非常糟糕的主意。

ESLint CLI ☀︎

ESLint 有一个命令行界面 (CLI) 来检查文件是否正确。你可以在ESLint 的文档中找到所有选项。你最常用的选项是--fix“在 ESLint 可以修复文件时”的选项。

包.json：

{
  "scripts": {
        "pre-commit": "lint-staged",
    "lint": "eslint .", // lint the codebase
  },
    "lint-staged": {
    "*.+(js|jsx)": [
      "eslint --fix", // try to fix whatever it can fix
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

ESLint 配置 ⚙︎

.eslintrc.js：

// eslint-disable-next-line no-undef
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["eslint:recommended", "plugin:react/recommended"],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["react"],
  rules: {
        "no-console": "warn",
        "import/first": "error"
    "react/prop-types": 0,
    "linebreak-style": ["error", "unix"]
  },
}
Enter fullscreen mode Exit fullscreen mode

添加上述代码片段后，会出现类型错误。要修复此问题，请添加：
.eslintrc.js：

// eslint-disable-next-line no-undef
module.exports = {
  ...
}
Enter fullscreen mode Exit fullscreen mode

上述 ESLint 配置满足以下要求：

查看CRA以获得更多有趣的配置。

更漂亮🗽

它有助于格式化代码库。

使用 Prettier，我们可以遵循常见的代码风格。

安装 Prettier：

$ npm install prettier --save-dev
Enter fullscreen mode Exit fullscreen mode

笔记：

如果您使用的是 VS Code，请安装插件：VSCode 的 Prettier 扩展。它将直接在代码中高亮显示错误和警告。

配置 Prettier ⚙︎

它会格式化你的代码，但有时你可能不喜欢这样。你可以使用 prettier 配置文件，.prettierrc或者通过prettierpackage.json 中的 key 来修改。

  • singleQuote: true 如果您想使用单引号， false 否则。
  • printWidth：指定打印机将换行的行长度的数字。
  • semi： true 如果您想在每个语句的末尾打印分号， false 否则。

看看这个以获得更漂亮的选择。

.eslintrc.js：

extends: ["prettier"],
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
    "linebreak-style": ["error", "unix"],
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off",
  },
}
Enter fullscreen mode Exit fullscreen mode

Prettier CLI ☀︎

使用与eslint--write类似的选项。--fix

包.json：

{
     "lint-staged": {
    "*.+(js|jsx)": [
      "prettier --write --ignore-unknown"
    ],
    "*.+(json|css|md)": [
      "prettier --write"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

在 Vscode 中启用 formatOnSave

查找 formatOnSave 并选中复选框，或者将此行添加到settings.json：

"editor.formatOnSave": true,
Enter fullscreen mode Exit fullscreen mode

将 Prettier 与 ESLint 集成⛩

ESLint也有格式规则，例如 max-len（类似于 printWidth）或引号。

Prettier取代了 ESLint 的格式规则，但并没有取代代码质量规则。

因此，您可以通过安装以下内容来集成到Prettier您的配置中：ESLint

$ npm install eslint-config-prettier eslint-plugin-prettier --save-dev
Enter fullscreen mode Exit fullscreen mode

eslint-config-prettier禁用与 Prettier 冲突的规则。同时eslint-plugin-prettier添加使用 Prettier 格式化内容的规则。您可以使用推荐的配置来启用此配置：

.eslintrc.js：

{
  "extends": ["plugin:prettier/recommended"]
}
Enter fullscreen mode Exit fullscreen mode

更漂亮的配置：

.prettierrc.json：

{
  "printWidth": 85,
  "arrowParens": "always",
  "semi": false,
  "tabWidth": 2
}
Enter fullscreen mode Exit fullscreen mode

基本上，这意味着 Prettier：

  • 超过 85 个字符的行将换行。
  • 即使只有一个参数，也总是在箭头函数周围使用括号。
  • 不会在每个语句的末尾打印分号。
  • 每个缩进级别将使用两个空格。

每次提交时进行 Lint 和格式化

你可以对代码库进行 lint 和运行，这很棒。但这是否意味着你现在应该随时对代码进行 lint 和格式化？不！

如果您使用 GIT，则可以利用Git 钩子在每次提交或推送之前运行 ESLint 和 Prettier。

哈士奇🐶

这不是狗。我们讨论的是可以让你轻松设置 Git Hooks 的工具

假设您的 package.json 有以下脚本，并且您想在每次提交时运行 lint 和 format：

包.json：

{
  "scripts": {
        "postinstall": "husky install && cd app && yarn install",
  },
  "devDependencies": {
    "husky": "^6.0.0",
  }
}
Enter fullscreen mode Exit fullscreen mode
  • 安装 Husky 作为开发依赖项：

然后，您可以通过两个简单的步骤添加 Git hooks：

  1. 安装 Husky

  2. 添加预提交

  3. 安装 Husky

$ npm install husky --save-dev
Enter fullscreen mode Exit fullscreen mode
  1. 添加预提交通过两种方法向您的项目添加预提交：

方法 1：

在根目录下创建 .husky 并预提交文件：

.husky/预提交：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn run pre-commit
Enter fullscreen mode Exit fullscreen mode

方法 2：

在你的 package.json 中插入以下代码：
package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint && npm run format"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

就这样。每次提交时，与 pre-commit 关联的命令都会运行。这样你的代码库就会被 lint 和格式化。

pre-commit是目前为止使用最多的 Git 钩子，但您也可以使用其他钩子，如pre-push或post-commit。

lint-staged 🚀

代码库越大，lint 和格式化的时间就越长。想象一下，你有超过 1000 个组件。你肯定不想等着 ESLint 把所有代码库都 lint 一遍，对吧？最终，只需要 lint 那些刚刚被修改过的文件。为此，你可以使用lint-staged。

安装lint-staged：

$ npm install --save-dev lint-staged
Enter fullscreen mode Exit fullscreen mode

然后，您必须在文件lint-staged中添加一个用于配置的键package.json。根据lint-staged 文档，该配置应该是一个对象，其中每个值代表一个或多个要运行的命令，而其键是用于这些命令的 glob 模式。

包.json：

{
  "lint-staged": {
    "*.+(js|jsx)": "eslint --fix",
    "*.+(json|css|md)": "prettier --write"
  }
}
Enter fullscreen mode Exit fullscreen mode

上述配置将允许你运行 ESLint 并修复 .js 和 .jsx 文件。同时，它将对 .json、.css 和 .md 文件运行 Prettier。

然后，让我们告诉 ESLint 我们将使用 Prettier 的配置：

.eslintrc.js：

{
  extends: ["prettier"],
  plugins: ["react", "prettier"]
}
Enter fullscreen mode Exit fullscreen mode

完成后，我们需要指定 Prettier 的选项。为此，您可以创建一个文件，或者在 中.prettierrc添加一个键。我们选择第一个选项：prettierpackage.json

.prettierrc.json：

{
  "semi": false,
  "singleQuote": false,
  "tabWidth": 2,
  "printWidth": 80
}
Enter fullscreen mode Exit fullscreen mode

让我们在暂存文件上添加预提交钩子。lint-staged为此，我们需要在 devDependencies 中安装 husky 和 ​​husky：

$ npm install --save-dev husky lint-staged
Enter fullscreen mode Exit fullscreen mode

pre-commit然后，我们通过添加一个husky键来添加钩子本身package.json：

包.json

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

如果我们保持原样，它将会失败，因为我们没有指定 lint-staged 的​​配置，所以让我们立即执行此操作：

{
  "lint-staged": {
    "*.+(js|jsx)": [
      "eslint --fix",
      "prettier --write --ignore-unknown"
    ],
    "*.+(json|css|md)": [
      "prettier --write"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

这里我们使用 ESLint 来检查和格式化 JS 和 JSX 文件。我们还使用 Prettier 来格式化 json、css 和 markdown 文件。一切就绪！

以下是完整package.json文件：

包.json

{
  "name": "react-eslint-prettier-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
  },
  "scripts": {
    "postinstall": "husky install && cd app && yarn install",
        "test": "cd app && yarn test",
        "pre-commit": "lint-staged",
        ...
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.+(js|jsx)": [
      "eslint --fix",
      "prettier --write --ignore-unknown"
    ],
    "*.+(json|css|md)": [
      "prettier --write"
    ]
  }
  "devDependencies": {
        "eslint": "^7.24.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.23.2",
    "husky": "^6.0.0",
    "lint-staged": "^10.5.4",
    "prettier": "2.2.1",
  }
}
Enter fullscreen mode Exit fullscreen mode

.eslintrc.js：

// eslint-disable-next-line no-undef
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["eslint:recommended", "plugin:react/recommended", "prettier"],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["react", "prettier"],
  rules: {
    "prettier/prettier": "error",
    "react/prop-types": 0,
    "linebreak-style": ["error", "unix"],
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off",
  },
}
Enter fullscreen mode Exit fullscreen mode

笔记：

进行上述更改后，如果代码不起作用，请重新启动代码编辑器。

🌟推特 👩🏻‍💻suprabha.me​ 🌟 Instagram
文章来源：https://dev.to/suprabhasupi/learn-to-configure-eslint-and-prettier-in-react-4gp0
Devto 翻译
PREV
常规函数与箭头函数
NEXT
如何使用 Gatsby 💻 搭建博客