Taro3 + Vue3 + NutUi 校验配置

相关脚手架安装及项目初始化见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",

完