相关脚手架安装及项目初始化见NutUI官网
NutUI - 移动端 Vue2、Vue3、小程序 组件库 (jd.com)
初始化好的项目，为统一风格，添加eslint校验
在项目内执行eslint --init （若eslint方法报错，请先全局安装再尝试）
按顺序选择如下内容
❯ To check syntax, find problems, and enforce code style
❯ JavaScript modules (import/export)
❯ Vue.js
Yes
✔ Browser ✔ Node
❯ Use a popular style guide
❯ Standard: https://github.com/standard/standard
❯ JavaScript
Yes
等待依赖安装完成会生成.eslintrc.js文件
此时规则还不太适用此项目，会有很多报错，因此再手动安装一些依赖
yarn add @vue/eslint-config-prettier @vue/eslint-config-typescript -D
然后更改eslintrc文件为
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
// 此处注意顺序，主要使用prettier规则，因此放在靠后位置
"plugin:vue/vue3-recommended",
"standard",
"@vue/prettier",
"@vue/typescript",
],
parserOptions: {
ecmaVersion: 13,
parser: "@typescript-eslint/parser",
sourceType: "module",
},
plugins: ["vue", "@typescript-eslint"],
rules: {
// prettier官网直译地址：https://segmentfault.com/a/1190000012909159
"prettier/prettier": [
// 将prettier的问题提示由警告升级为错误
"error",
{
// 在对象或数组最后一个元素后面是否加逗号
trailingComma: "all",
},
],
},
};
保存后查看其他文件是否有校验效果，若没有重启一下项目
我使用的vscode格式化插件为Prettier ESLint - Visual Studio Marketplace
用此插件格式化会符合设置的eslint规则
ts校验
安装vue-tsc
yarn add vue-tsc -D
然后在package.json的scripts中添加以下脚本
"tsc": "vue-tsc --noEmit --skipLibCheck",
"lint": "eslint --ext .vue,.js,jsx,.ts,tsx src/"
首先单独测试命令
运行yarn lint看报错文件是否提示出来
修复为符合eslint规则后再运行此命令
出现类似如下展示即为成功
yarn run v1.22.17
$ eslint --ext .vue,.js,jsx,.ts,tsx src/
✨ Done in 1.72s.
然后运行yarn tsc
此时如果有类似如下报错
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1952:40 - error TS1005: ';' expected.
运行yarn add typescript -D升级typescript
再运行命令yarn tsc
出现类似如下展示即为成功
yarn run v1.22.17
$ vue-tsc --noEmit --skipLibCheck
✨ Done in 5.68s.
提交git仓库校验
安装husky
yarn add husky -D
然后初始化husky
npx husky install
此时会生成.husky文件夹，里面包含 _文件夹
在.husky文件夹内新建pre-commit文件（没有后缀）
内容如下
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
echo "---开始eslint检查---"
yarn lint
echo "---eslint检查通过---"
echo "---开始tslint检查---"
yarn tsc
echo "---tslint检查通过---"
之后使用git提交，在commit时，会运行检查，若检查不通过，需修改到符合规则才能提交
注意
为保证其他开发者在提交时也有husky效果，在package.json的scripts中添加以下脚本
（prepare脚本会在yarn install后自动执行）
"prepare": "husky install",
