ReactJS – 使用 Airbnb 风格指南自动检查和格式化 Git 提交

在团队中工作时，每个开发人员都会有自己的编程风格。因此，在所有文件中保持一致的编程风格至关重要。

看一眼代码，你不应该能看出是谁写的 😉

通过本指南，您将能够设置 Git 提交的自动代码检查和格式化。

如果您是 NodeJS 开发人员，请阅读本文——NodeJS——使用 Airbnb 风格指南自动检查和格式化 Git 提交代码

它分为 4 个部分

你会学到

1. 使用 Airbnb 风格指南设置 ESLint
2. 使用 Prettier 设置格式
3. Git提交时自动进行代码检查和格式化
4. 配置 VS Code 以支持 ESLint 和 Prettier

为什么需要代码检查和格式设置？

• 干净的代码
• 轻松查找错误、拼写错误和语法错误
• 遵循最佳实践
• 警告：请勿使用已弃用/有害的方法
• 团队内部要保持一致的代码风格。
• 避免编写类似 console.log 这样的“有害”代码
• 让公关更轻松，减少审稿人的烦恼！

使用 Airbnb 风格指南设置 ESLint

ESLint是一个用于 JavaScript 和 JSX 的代码检查工具，它提供了一些不错的规则和插件。任何人都可以为 ESLint 编写规则。例如，“避免使用 console.log()” 就是一条规则。

幸运的是，Airbnb 编写了一份 JavaScript 风格指南，涵盖了他们使用的大部分最佳实践。它本质上是一系列不同规则的集合。您可以在这里阅读：Airbnb JavaScript 风格指南

步骤 1 – 通过以下方式安装必要的软件包
npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

步骤 2.eslintrc –在项目根目录下创建一个新文件，并将以下内容粘贴到该文件中。

{
  "env": {
    "browser": true
  },
  "extends": ["airbnb", "prettier"]
}

步骤 3 – 添加新的 lint 命令package.json–"lint": "eslint 'src/**/*.{js,jsx}' --fix"

现在你应该可以通过运行命令来检查你的代码了npm run lint。它会尝试修复可以修复的错误。否则，它会抛出错误/警告。

使用 Prettier 设置格式

ESLint 用于代码检查和错误查找，而Prettier则专门用于代码格式化。除了 JavaScript，Prettier 还支持格式化 JSON、HTML、CSS、Markdown、SQL、YAML 等格式。强烈建议同时使用 ESLint 和 Prettier。

步骤 1 – 通过以下方式安装 Prettier CLI 软件包npm i -D prettier-eslint-cli eslint-config-prettier

步骤 2 – 添加新的格式化命令package.json–"format": "prettier --write 'src/**/*.{js,jsx,css,scss}'"

就像我们之前做的那样，你现在应该能够npm run format使用 Prettier 来格式化代码了！

Git提交时自动进行代码检查和格式化

尽管我们已经编写了用于运行代码检查和格式化的命令，但大多数开发者常常忘记运行这些命令就直接提交到 Git。你可以将 `npm run lint` 添加到你的 CI/CD 流程中，这样一旦出现错误，流程就会失败。不过，如果每次提交时都能执行这些检查，那就更好了。

哈士奇和林特上演救援戏码

Husky允许你在提交之前添加要运行的命令。它利用了git 钩子。

Lint-staged—— “对暂存的 Git 文件运行代码检查工具”。每次提交都对所有文件运行 ESLint 和 Prettier 会非常耗时。使用 lint-staged，您可以仅对暂存的文件运行这些工具。

安装 husky 和 ​​lint-stagednpm i -D husky lint-staged

您需要编辑该文件package.json进行配置。以下是完整文件：

{
  "scripts": {
    "lint": "eslint 'src/**/*.{js,jsx}' --fix",
    "format": "prettier --write 'src/**/*.{js,jsx,css,scss}'"
  },
  "lint-staged": {
    "**/*.js": [
      "eslint --fix",
      "prettier-eslint --write",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "devDependencies": {
    "eslint": "^5.15.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "prettier-eslint-cli": "^4.7.1",
    "husky": "^1.3.1",
    "lint-staged": "^8.1.3"
  }
}

我们指示 Husky 在每次提交时运行 lint-staged。lint-staged 会对暂存的文件运行 eslint、prettier 和 'git add' 命令。最后一个 'git add' 命令是将已更改的文件添加回提交，因为其格式可能已更改。

需要在不进行这些检查的情况下提交吗？

如果发生火灾 🙂，而你又想提交代码怎么办？会不会出现“请移除控制台日志”之类的提示？你可以通过添加 `--no-verify( git commit –m -n “Urgent commit!”)`参数来告诉 Git 不要运行这些钩子。

配置 VS Code 以支持 ESLint 和 Prettier

ESLint 和 Prettier 都与 VS Code 有很好的集成。它们可以自动高亮显示错误/警告，在输入/保存代码时自动修复代码等等。

安装ESLint和Prettier扩展ext install dbaeumer.vscode-eslint​ext install esbenp.prettier-vscode

安装完扩展程序后，打开 VS Code settings.json 文件（Ctrl+,），并添加以下内容：

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "prettier.eslintIntegration": true
}

结论

现在你应该已经配置好了 ESLint 和 Prettier，这样每次你提交文件时，它们都会扫描文件并尝试修复所有错误，或者显示那些无法自动修复的错误。希望你喜欢。

如有任何问题或有任何其他反馈，请在下方留言！

这篇文章最初发表在我的博客Coffee N Coding上。欢迎在Twitter上关注我，我会分享很多像这样的精彩内容。

通过Facebook Messenger订阅我的博客