前言

熟话说，不以规矩，不能成方圆。良好的代码规范，不管是对于个人还是团队都非常重要。为了提供代码质量和统一代码规范，我选择了eslint和prettier搭配来使用，并且在最后提交到git仓库时用husky搭配lint-stage进行预检查，保证线上仓库的代码符合要求。

eslint和prettier区别

ESLint 主要解决的是代码质量问题，代码质量出问题意味着程序有潜在Bug。比如：

• 代码质量规则 (code-quality rules)
  • no-unused-vars
  • no-extra-bind
  • no-implicit-globals
  • prefer-promise-reject-errors
  • …

Prettier 主要解决的是代码风格问题，风格问题充其量也只是看着不爽。比如：

• 代码风格规则 (code-formatting rules)
  • max-len
  • no-mixed-spaces-and-tabs
  • keyword-spacing
  • comma-style
  • …

eslint和prettier配置冲突

eslint和prettier各自详细的配置这里不多说，社区里面有很多详细的配置。这里主要讲一下eslint和prettier搭配使用的注意点。因为eslint在代码检查的过程中，也会对代码风格进行检查，如果prettier的配置和eslint的规则冲突，则会陷入死循环。解决方法如下：

npm install eslint-plugin-prettier eslint-config-prettier -D
复制代码

然后在.eslintrc.json文件中配置:

"extends": ["plugin:prettier/recommended"]
复制代码

即可。具体可看这里

husky

husky是一个为 git 客户端增加 hook 的工具。在执行git命令之前我们可以自定义某些的操作，比如 pre-commit 钩子就会在你执行 git commit 的触发，我们可以在 pre-commit 中实现一些比如 lint 检查、单元测试、代码美化等操作。

传送门

lint-stage

lint-stage一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具；这个很实用，因为我们如果对整个项目的代码做一个检查，可能耗时很长，如果是老项目，要对之前的代码做一个代码规范检查并修改的话，这可能就麻烦了，可能导致项目改动很大。所以这个 lint-staged，对团队项目和开源项目来说，是一个很好的工具，它是对个人要提交的代码的一个规范和约束。

传送门

最后送上wangUI仓库地址