总是被嫌弃代码不规范？你可能需要这个工具

前言

你是不是有这样的困惑？

每当接手一个新项目（如果项目中没有配置 eslint husky commit）等这些规范的话，就需要自己手动配置一遍，配置多了就只能来句窝草！😬
公司的项目有的是 vue 有的是 react,vue版本 项目有的是2有的是3，这导致不同项目的eslint配置文件无法公用。再来句窝草！😬

web-norm

开源地址：github.com/lyh0371/web…

web-norm 就是为了解决前端开发过程中各种繁琐的规范配置问题。话不多说，先看看效果把。

使用 npm install web-norm -g 后在自己项目中直接执行 web-norm 命令即可

Jul-25-2022 12-10-04.gif

web-norm会根据package.json自动去分析项目，然后按照对应的依赖和自动生成对应的配置文件

npm install 重新安装依赖，并重新启动 vscode。整个项目的规范化配置完成👏

web-norm 帮我们做了什么？

eslint + pretter + 保存时自动格式化代码

在vue项目中

Jul-25-2022 12-21-40.gif

在React项目中

husky 代码提交自动校验 + commit 提交规范

web-norm 让代码更加健壮，让提交更加丝滑，让commit记录更加漂亮。

web-norm 实现原理

web-norm 实现原理不算复杂，只是基本的对文件读取修改操作。技术栈使用的是 node + ts，使用 github 的 actions 实现 npm 自动发版。代码结构如下所示，感兴趣的可以去代码仓库瞅瞅👀。顺便点个 start 😘

web-norm
├─ src
│  ├─ cli.ts
│  ├─ core  // 核心函数
│  │  ├─ commitlint.ts
│  │  ├─ eslint.ts
│  │  ├─ eslintignore.ts
│  │  ├─ husky.ts
│  │  ├─ special.ts
│  │  └─ vscode.ts
│  ├─ start.ts  // 入口文件
│  ├─ static
│  ├─ templet // 需要生成文件的模板
│  │  ├─ commitlint.config.ts
│  │  ├─ eslintrc.ts
│  │  └─ prettierrc.ts
│  └─ utils  // 工具函数
│     ├─ check.ts
│     ├─ debug.ts
│     ├─ env.ts
│     ├─ path.ts
│     └─ tool.ts
├─ tsconfig.json
├─ yarn-error.log
└─ yarn.lock

可能遇见的问题

husky 不生效

mac 可能是因为权限问题。在执行web-norm 的时候系统会自动注入npm run postinstallmac 命令。直接运行该命令就行。

window 不生效的情况比较复杂，有的时候也很奇怪，最保险的办法就是重新安装 husky 步骤如下：

删除 .husky 文件
运行命令 npm run prepare 重新初始化.husky
运行 npx husky add .husky/pre-commit "npm-run-pre-commit" 生成 pre-commit文件，内容复制为：
```
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run pre-commit
```
运行 npx husky add .husky/commit-msg "npm-run-pre-commit" 生成 commit-msg文件，内容复制为：
```
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install commitlint --edit $1
```
npm run commit 进行测试

eslint 不生效

重启 vscode。如果不行，那就多重启几次😑

还有bug？欢迎提交issues，本人专业售后😬。