使用 linters、prettier 和 husky 升级你的项目

大家好，如果您曾经参与过开源项目，或者任何多人协作的项目，那么您可能遇到过诸如提交约定不一致之类的问题。代码没有正确/均匀的缩进，或者代码中存在' '“和”的差异。 这实际上使代码库变得更加混乱。那么该如何克服这个问题呢？有很多预定义的插件/库可以帮助您解决上述所有问题。 因此，在本篇博文中，我们将讨论以下内容。" "

1. ESLint（用于概括 js 代码的样式标准）
2. Prettier（用于均匀缩进代码库）
3. Husky（提交之前在本地机器上运行测试并提交约定检查，这样您就不会在之后遇到 linting 和测试失败错误）

注意：此 lint 风格仅供个人选择。您可以根据自己的 lint 和风格标准进行调整 :)

VS 代码扩展

（这是我的个人推荐，个人选择）
如果你想跟着学习，我建议你下载它。下载时，你可以将下方代码复制到扩展程序搜索框中，然后会弹出扩展程序。点击“安装”，它就会添加到你的 VS Code 中。

• Eslint ==>dbaeumer.vscode-eslint
• 更漂亮 ==>esbenp.prettier-vscode

初始化和安装

在终端中打开项目并按相同顺序运行以下命令。

1. 运行以下命令（如果未克隆并在本地机器上重新启动）

git init

1. 运行以下命令（这是在您的项目中初始化 package.json）

npm init -y

1. 运行以下命令（这将创建节点模块和 packge-lock.json）

npm i --save-dev eslint eslint-config-prettier eslint-plugin-prettier husky lint-staged prettier

埃斯林特

在项目根目录中创建文件.eslintrc.json并将以下内容粘贴到其中

{
    "env": {
      "es2020": true,
      "node": true
    },
    "extends": [
      "eslint:recommended",
      "plugin:prettier/recommended"
    ],
    "rules": {
      "linebreak-style": ["error", "unix"],
      "quotes": ["error", "single", { "allowTemplateLiterals": true }],
      "semi": ["error", "always"],
      "prefer-const": "error",
      "eqeqeq": ["error", "always"],
      "curly": ["error"]
    },
}

Prettier

现在在项目文件的根目录中创建.prettierrc并将以下内容粘贴到文件中

{
    "endOfLine": "lf",
    "useTabs": true,
    "singleQuote": true
}

Git 忽略

现在在项目根目录中创建.gitignore文件并将以下内容粘贴到文件中

/node_modules/
.env

哈士奇

现在在项目根目录中创建.huskyrc文件并将以下内容粘贴到其中

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

现在转到 package.json 并在最后一个}之前添加此内容

"lint-staged": {
    "*.js": ["eslint --fix", "prettier --write"]
}

现在在终端中逐个运行以下命令

1. 安装 Husky 到本地项目目录

npm install husky --save-dev

1. 安装 Husky 包

npx husky install

1. 初始化 Husky 包并安装依赖项

npx husky-init && npm install

这将创建 Husky 文件夹

现在，前往Husky 文件夹中的pre-commit文件，删除npm test命令。因为我们目前还没有测试。

1. 安装常规提交样式

npm install --save-dev @commitlint/cli @commitlint/config-conventional

1. 将命令添加到 commitlint.config.js 文件

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

1. 添加 Husky 参考提交信息库

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

就这样！你已经用一些很酷的工具设置好了你的项目，它们可以简化你作为维护者或审阅者的工作。它们会照顾到你所有的代码风格指南。

你的 js 项目已全部设置完毕。如果你可以使用 js 进行配置，请参考Nicholas Carrigan 的说明。

参考 ：

Eddie Jaoude Youtube 视频
Nicholas Carrigan 笔记
Commit lint org
Huskey 官方文档

❤️感谢您的阅读❤️

🌏 喜欢 | 关注 | 分享 🌏
我的社交媒体： Twitter | LinkedIn | GitHub