uni-app 如何使用 eslint + prettier + stylelint + lint-staged + husky 配置代码格式校验

如今，在前端开发中，代码格式校验已成为一个不可或缺的重要环节。 uni-app 作为一种跨平台开发框架，自然也需要代码格式校验工具。

而 eslint + prettier + stylelint + lint-staged + husky 则是目前比较流行的代码格式校验工具组合。

接下来，我们将介绍如何在 uni-app 中使用这些工具。

1. 安装必要的依赖

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

2. 初始化 eslint

npx eslint --init

这将创建一个名为 .eslintrc.json 的配置文件。

3. 配置 eslint

你可以根据自己的需要来修改 .eslintrc.json 文件。

例如，你可以设置代码的缩进风格、行尾换行符等。

4. 初始化 prettier

npx prettier --write

这将创建一个名为 .prettierrc 的配置文件。

5. 配置 prettier

你可以根据自己的需要来修改 .prettierrc 文件。

例如，你可以设置代码的缩进风格、行尾换行符等。

6. 初始化 stylelint

npx stylelint --init

这将创建一个名为 .stylelintrc 的配置文件。

7. 配置 stylelint

你可以根据自己的需要来修改 .stylelintrc 文件。

例如，你可以设置代码的缩进风格、行尾换行符等。

8. 初始化 lint-staged

npx lint-staged

这将创建一个名为 .lintstagedrc 的配置文件。

9. 配置 lint-staged

你可以根据自己的需要来修改 .lintstagedrc 文件。

例如，你可以设置要执行的代码格式校验任务。

10. 初始化 husky

npx husky install

这将创建一个名为 .husky 的文件夹。

11. 配置 husky

你可以根据自己的需要来修改 .husky 文件夹中的文件。

例如，你可以设置在提交代码时要执行的代码格式校验任务。

12. 测试代码格式校验

现在，你可以运行以下命令来测试代码格式校验是否生效：

npm run lint

如果代码格式不正确，则会显示错误信息。

13. 使用代码格式校验工具

在开发过程中，你可以使用代码格式校验工具来帮助你保持代码的整洁。

例如，你可以使用 eslint 和 prettier 来格式化代码，使用 stylelint 来检查 CSS 代码的格式，使用 lint-staged 来在提交代码时执行代码格式校验任务，使用 husky 来在提交代码时执行代码格式校验任务。

结论

通过使用 eslint + prettier + stylelint + lint-staged + husky，你可以轻松地对 uni-app 的代码进行格式校验，从而使代码更加整洁、可读性更强、维护性更强。

希望本文能对你有所帮助。