NextJS 中的 Linting、格式化和预提交设置
NextJS 中的 Linting、格式化和预提交设置
本教程还包括我首选的 Lint / Formatting 设置
随着 NextJS 的使用越来越多，在本文中，我想与您分享我最喜欢的 3 个工具，以使您的代码库更清洁、更健康。我还将分享每个工具的首选设置。
埃斯林特
对于本教程的课程，您可以交换 _纱线添加--dev_ 和 _npm install --save-dev_
Eslint 是最受欢迎的 短绒 用于 javascript 项目。尽管它很受欢迎，但由于在个人项目中使用时的恶名，eslint 受到了很多仇恨。尽管如此，从长远来看，eslint 对您的代码库确实很有用，尤其是当您修改配置以满足自己的需要时。
要在 nextjs 中使用 eslint，请安装以下 2 个依赖项：
纱线添加--dev eslint
纱线添加--dev eslint-config-next
安装依赖后，创建 .eslintrc.json 在您的基本目录中并添加这些配置：
{
"扩展": ["next/core-web-vitals", "eslint:recommended"],
// 使用未使用的导入包自动修复未使用的导入 “插件”：[“未使用的进口”]， “全局”：{
“JSX”：“只读”
}
}
“extends”数组是一组预先确定的规则，已经由 nextjs/eslint 设置。您可以阅读有关规则的更多信息 这里 .然后，要运行 linter，在终端中输入：
npx 下一个 lint --fix
修复标志是自动修复有违规的文件。有些违规可以自动修复，有些必须手动完成。为了使 linting 更容易，在你的 包.json 脚本
// 包.json
{
...
“脚本”：{
...
"lint": "下一个 lint --fix"
}
...
}
然后尝试运行 绒线 或者 npm 运行 lint ，输出应该是一样的。
如果有错误，你的输出应该是这样的
Violation on line 17:7 in _app.tsx
在每个错误中，您都将获得该违规的源文件，该错误的行：该错误的列，以及它违反的规则，非常简洁吧？上图违反的规则是 没有未使用的变量 如果您是第一次设置，可能会违反很多规则。如果在 eslint 中有你不喜欢的规则，你可以通过在规则对象中指定它来删除这些规则 .eslintrc.json . eslint 中的规则对象示例：
{
...
“规则”：{
"no-duplicate-case": "off", // 这将关闭规则
"no-unused-vars": "warn", // 这将通知违规但不输出错误
"no-func-assign" : "error" // 这将通知违规并输出错误
}
}
您可以阅读有关规则的更多信息 这里 .
我还喜欢添加 eslint-plugin-unused-import，因为它可以帮助我自动修复未使用的导入。跑 yarn add --dev eslint-plugin-unused-imports 然后将此行添加到您的 .eslintrc.json ：
// .eslintrc.json
{
...
“插件”：[“未使用的进口”]，
“规则”：{
“未使用的进口/没有未使用的进口”：“错误”
}
...
}
现在，如果你再次运行 yarn lint，它会自动修复未使用的导入，这是我容易忘记的。
更漂亮
更漂亮的是一个 代码格式化程序 如果您的代码不遵守您设置的规则，这有助于您的代码更清洁。 Prettier 有它自己的默认配置，但在这里我也会分享我的配置以及我为什么要更改它的一些默认配置。
现在你可能会问，prettier 和 eslint 有什么区别？ Eslint 将帮助您向您展示错误可能在哪里 和 更漂亮将有助于格式化你的代码更干净 .所以如果有错误，prettier 不会叫你出来，如果你的代码脏了，eslint 也不会叫你出来 （嗯，一些规则可能，但让我们把它留在那里） .
首先，将 prettier 和添加到您的项目中：
纱线添加--dev更漂亮
纱线添加--dev eslint-config-prettier
第二个模块是用 eslint 连接 prettier。然后将其添加到您的配置文件中：
// 包.json
{
...
“脚本”：{
...
“格式：全部”：“更漂亮——写。”
}
} // .eslintrc.json
{
“扩展”：[...，“更漂亮”]，
...
}
然后尝试运行 纱线格式：全部 它应该尝试格式化您目录中的所有文件。您可以通过修改来指定要在哪个目录中使用 - 写 旗帜。在这种情况下，“。”表示此目录中的所有内容（隐藏文件除外）。尝试更改 . 至 源/* 并看到它只会格式化源文件夹。
现在，当您的代码库很大时，格式化所有文件可能不是一个好的解决方案。如果您使用的是 macOS 或 ubuntu 或类似的 unix 系统，您可以将其添加到脚本中以仅格式化您在 git staging 中更改的文件：
“格式：分级”：“更漂亮--write $（git diff --staged --name-only --diff-filter d | xargs）”
要修改更漂亮的默认配置，请创建 .prettierrc 在您的基本目录中的文件并添加此配置：
{
“尾随逗号”：“无”，
“标签宽度”：2，
“半”：真的，
“单引号”：假，
“打印宽度”：80
}
出色地 ，这是我的个人配置，你可以随意更改。你可以看到更多关于更漂亮的配置 这里 .
还有，像 .gitignore , 你可以创建 .prettierignore 忽略一些文件。我的 .prettierignore 看起来像这样：
.prettierignore
上市/
.gitignore
。沙哑/
沙哑
Husky 帮助您安装预提交挂钩。预提交挂钩意味着每次执行 git commit 时，都会运行一些操作以确保您的代码可以提交。结合前面的知识，将 linting 和格式化添加到 pre-commit 钩子将有助于我们在想要添加更改时进行 lint 和格式化，这会有所帮助，因为如果存在无法被 eslint 自动修复的违规行为，它会停止提交。另一方面，husky 还可以用于各种事情，例如提交前的测试、日志记录、测试构建等。
要安装它，请运行：
纱线添加--dev husky # 创建一个准备运行的脚本
# 当你运行 `yarn install`
npm 设置脚本准备“哈士奇安装”
纱线准备 # 创建 pre-commit 钩子，改变 yarn 格式：staged
# to yarn format:all 如果它不工作
npx husky add .husky/pre-commit "yarn format:staged\nyarn lint"
现在，每次您提交更改时，它都会格式化并检查您的文件！如果不知何故您的预提交不起作用，请将 .husky/pre-commit 文件的内容更改为：
... // 配置，在不同的机器上可能会有所不同 纱线格式：分阶段
绒线
而已！全部完成。如果您不熟悉 nextjs / 使用 npm 编程，我希望这对您有所帮助。任何使这篇文章变得更好的建议将不胜感激。谢谢阅读！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
