首页 计算机学科 web vue vue3

# 提交前做代码检查

一定要保证代码在丢到仓库里面之前，一定保证代码全部都是规范的，然后再进仓库才是合理的。不然不规范的代码放进仓库了，然后后面的同事拉取代码结果一堆报错人家还要修改你送过来的报错。 那么需要再提交之前做代码的规范检查使用 husky 这个工具来完成。

husky 是基于 git 的 hooks 工具。hooks 工具可以理解为就是钩子，可以在特定的时机执行特定的命令。比如 vue 的生命周期其中也有了解过钩子的说法。

如下操作步骤：

  1. 初始化 git 仓库，执行 git init 即可

  2. 初始化 husky 工具配置，执行 pnpm dlx husky-init && pnpm install 即可

    官网： https://typicode.github.io/husky/

  3. 修改 .husky/pre-commit 文件

    - 表示删除线

    我们把原来有的 npm test 删掉，然后换成 pnpm lint

    pnpm lint 作用：对整个项目当中所有文件进行校验，并且发现有错误的地方会自动修复

    -n-p-m- -t-e-s-t-
    +pnpm lint

    <font title='red'> 问题 </font>：默认进行的是全量检查，<font title='red'> 耗时 </font > 问题，<font title='red'> 历史 </font > 问题。

演示：

Administrator@Jfier MINGW64 /e/vue/Demo7/Demo/vue3-big-event-admin
$ git init
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint:   git config --global init.defaultBranch <name>
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint:   git branch -m <name>
Initialized empty Git repository in E:/Vue/Demo7/Demo/vue3-big-event-admin/.git/
Administrator@Jfier MINGW64 /e/vue/Demo7/Demo/vue3-big-event-admin (master)
$ pnpm dlx husky-init && pnpm install
Packages: +2
++
Progress: resolved 2, reused 0, downloaded 2, added 2, done
husky-init updating package.json
  setting prepare script to command "husky install"
husky - Git hooks installed
husky - created .husky/pre-commit
please review changes in package.json
Packages: +1
+
Progress: resolved 217, reused 195, downloaded 0, added 1, done
> vue3-big-event-admin@0.0.0 prepare E:\vue\Demo7\Demo\vue3-big-event-admin
> husky install
husky - Git hooks installed
dependencies:
+ pinia 2.1.6
+ vue 3.3.4
+ vue-router 4.2.4
devDependencies:
+ @rushstack/eslint-patch 1.3.3
+ @vitejs/plugin-vue 4.3.4
+ @vue/eslint-config-prettier 8.0.0
+ eslint 8.48.0
+ eslint-plugin-vue 9.17.0
+ husky 8.0.3
+ prettier 3.0.3
+ vite 4.4.9
Done in 3.9s
完毕后，在项目目录中就会出现一个文件夹
image-20230831165129161
在 package.json 文件中可以看到如下：
解释：lint 命令对其中后缀名的文件都进行校验
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
但是这个命令并不会被触发，怎么使用呢？如下：
在 pre-commit 配置文件中，注释掉原有的 npm test 添加 pnpm lint，当我们提交代码就会触发 lint 命令进行校验了。
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
# npm test
pnpm lint
进行实验：
在 main.js 中添加一行代码：gaga 为 未定义的变量
console.log(gaga)
将代码添加到暂存区：
Administrator@Jfier MINGW64 /e/vue/Demo7/Demo/vue3-big-event-admin (master)
$ git add .
warning: in the working copy of '.eslintrc.cjs', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.gitignore', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.husky/pre-commit', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.prettierrc.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.vscode/extensions.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'README.md', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'pnpm-lock.yaml', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/App.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/assets/base.css', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/assets/logo.svg', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/assets/main.css', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/components/HelloWorld.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/components/TheWelcome.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/components/WelcomeItem.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/components/icons/IconCommunity.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/components/icons/IconDocumentation.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/components/icons/IconEcosystem.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/components/icons/IconSupport.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/components/icons/IconTooling.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/main.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/router/index.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/stores/counter.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/views/AboutView.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/views/HomeView.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'vite.config.js', LF will be replaced by CRLF the next time Git touches it
将代码提交：
Administrator@Jfier MINGW64 /e/vue/Demo7/Demo/vue3-big-event-admin (master)
$ git commit -m '提交啦'
> vue3-big-event-admin@0.0.0 lint E:\Vue\Demo7\Demo\vue3-big-event-admin
> eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore
E:\Vue\Demo7\Demo\vue3-big-event-admin\src\main.js
  9:13  error  'gaga' is not defined  no-undef
✖ 1 problem (1 error, 0 warnings)
 ELIFECYCLE  Command failed with exit code 1.
husky - pre-commit hook exited with code 1 (error)
提交时出现了报错。解释报错：在 main.js 中的 9 行 13 字符的地方发生错误，原因：未定义的变量
将 main.js 文件中的报错代码注释或者删除或者修复后再次进行提交代码到仓库：
Administrator@Jfier MINGW64 /e/vue/Demo7/Demo/vue3-big-event-admin (master)
$ git add .
warning: in the working copy of 'src/App.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/components/TheWelcome.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/components/icons/IconCommunity.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/components/icons/IconDocumentation.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/components/icons/IconEcosystem.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/components/icons/IconSupport.vue', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/main.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'vite.config.js', LF will be replaced by CRLF the next time Git touches it
Administrator@Jfier MINGW64 /e/vue/Demo7/Demo/vue3-big-event-admin (master)
$ git commit -m '提交啦1'
> vue3-big-event-admin@0.0.0 lint E:\Vue\Demo7\Demo\vue3-big-event-admin
> eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore
[master (root-commit) 135d389] 提交啦1
 28 files changed, 2397 insertions(+)
 create mode 100644 .eslintrc.cjs
 create mode 100644 .gitignore
 create mode 100644 .husky/pre-commit
 create mode 100644 .prettierrc.json
 create mode 100644 .vscode/extensions.json
 create mode 100644 README.md
 create mode 100644 index.html
 create mode 100644 package.json
 create mode 100644 pnpm-lock.yaml
 create mode 100644 public/favicon.ico
 create mode 100644 src/App.vue
 create mode 100644 src/assets/base.css
 create mode 100644 src/assets/logo.svg
 create mode 100644 src/assets/main.css
 create mode 100644 src/components/HelloWorld.vue
 create mode 100644 src/components/TheWelcome.vue
 create mode 100644 src/components/WelcomeItem.vue
 create mode 100644 src/components/icons/IconCommunity.vue
 create mode 100644 src/components/icons/IconDocumentation.vue
 create mode 100644 src/components/icons/IconEcosystem.vue
 create mode 100644 src/components/icons/IconSupport.vue
 create mode 100644 src/components/icons/IconTooling.vue
 create mode 100644 src/main.js
 create mode 100644 src/router/index.js
 create mode 100644 src/stores/counter.js
 create mode 100644 src/views/AboutView.vue
 create mode 100644 src/views/HomeView.vue
 create mode 100644 vite.config.js
Administrator@Jfier MINGW64 /e/vue/Demo7/Demo/vue3-big-event-admin (master)
$ git log --oneline
135d389 (HEAD -> master) 提交啦1
提交成功了！
# 暂存区 eslint 校验
解决上述的历史问题，防止别人的不规范代码影响到自己的代码。
这个插件会校验暂存区新添加的代码，不会官历史的代码有什么问题。
  1. 安装 lint-staged 包 pnpm i lint-staged -D
  2. package.json 配置 lint-staged 命令
    {
       //... 省略...
      "lint-staged": {
        "*.{js,ts,vue}": [
         	"eslint --fix"
        ]
      }
    }
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
        "format": "prettier --write src/",
        "prepare": "husky install",
        "lint-staged": "lint-staged"   //<------------------------
    }
  3. .husky/pre-commit 文件修改
    pnpm lint-staged