Taro3 + Vue3 + NutUi 校验配置

Posted 2023-03-09

参考技术A

NutUI - 移动端 Vue2、Vue3、小程序 组件库 (jd.com)

在项目内执行 eslint --init （若eslint方法报错，请先全局安装再尝试）
按顺序选择如下内容

等待依赖安装完成会生成 .eslintrc.js 文件
此时规则还不太适用此项目，会有很多报错，因此再手动安装一些依赖

然后更改eslintrc文件为

保存后查看其他文件是否有校验效果，若没有重启一下项目
我使用的vscode格式化插件为 Prettier ESLint - Visual Studio Marketplace
用此插件格式化会符合设置的eslint规则

安装vue-tsc

然后在 package.json 的 scripts 中添加以下脚本

首先单独测试命令
运行 yarn lint 看报错文件是否提示出来
修复为符合eslint规则后再运行此命令
出现类似如下展示即为成功

然后运行 yarn tsc

此时如果有类似如下报错
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1952:40 - error TS1005: \';\' expected.

运行 yarn add typescript -D 升级typescript

再运行命令 yarn tsc
出现类似如下展示即为成功

安装husky

然后初始化husky

此时会生成 .husky 文件夹，里面包含 _ 文件夹
在.husky文件夹内新建 pre-commit 文件（没有后缀）
内容如下

之后使用git提交，在commit时，会运行检查，若检查不通过，需修改到符合规则才能提交

为保证其他开发者在提交时也有husky效果，在 package.json 的 scripts 中添加以下脚本
（prepare脚本会在yarn install后自动执行）