使用 Husky、ESLint、Prettier 在 9 分钟内自动格式化 Git Commit 上的代码

感谢阅读

当与其他几个开发人员合作一个项目时，保持一致的代码风格可以大大提高代码的可读性和可维护性。

幸运的是，我们可以使用Husky、ESLint、Prettier来自动化这一关键过程，以确保每次提交时代码都被格式化。

1.安装软件包

我们需要安装以下软件包：

• Huskygit hooks ：一款让工作变得轻而易举的工具
• ESLint：Linter用于JavaScript
• 更漂亮：Code formatter
• Lint-staged：正如文档所述：linters针对暂存git文件运行，不要让💩进入您的代码库！

要安装软件包，请使用：

npm install --save-dev eslint prettier lint-staged husky

2. 配置 ESLint

运行以下命令初始化ESLint：

npx eslint --init

系统将提示您回答几个问题，从而生成针对您的特定用例的配置

生成的配置看起来像这样：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended"]
}

如果您像我一样懒惰，只需将配置复制并粘贴到名为的文件中，.eslintrc.json而不必回答一长串问题。

要查看所有可用的配置，请访问ESLint 文档。上面提供的配置只是一个基本示例。

3. 配置 Prettier

配置Prettier与配置ESlint类似，只需将.prettierrc.json文件添加到项目根目录即可。

您可以使用以下配置作为起点：

{
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2
}

要查看所有可用选项，请转到Prettier 文档。

还要将.prettierignore文件添加到您的项目根目录中，以便ignore您不想格式化的文件，使用以下内容作为基础：

package-lock.json
yarn.lock
node_modules
# any other unwanted files or folders

4. 配置 Lint-staged

Lint-staged 的​​配置也相当简单。只需将以下内容添加到你的package.json文件即可：

{
  /* other configurations */
  "lint-staged": {
    "**/*.{js,jsx,json}": ["eslint . --fix", "prettier --write ."]
  }
}

5.配置Husky

我们已到达配置之旅的最后一步。配置Husky比其他配置稍微棘手一些。将以下脚本添加到您的package.json文件：

{
  /* other configurations */
  "scripts": {
    /* other scripts */
    "configure-husky": "npx husky install && npx husky add .husky/pre-commit \"npx --no-install lint-staged\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

运行configure-husky脚本安装Husky并连接到pre-commit钩子：

npm run configure-husky

一切就绪！让我们尝试committing一些改变

宾果！成功了！🎉

从现在开始，在您的项目中保持一致的代码风格将变得轻而易举。

快乐开发！

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。