vue3+ts+vite配置commit提交代码时语法检测

周家大小姐.

已于 2024-02-08 21:45:33 修改

阅读量929

点赞数 11

文章标签： vue typescript 前端

于 2024-02-08 21:04:41 首次发布

本文链接：https://blog.csdn.net/qq_40190624/article/details/136082275

版权

本文介绍了如何在 Vue3 项目中结合 TypeScript 和 Vite，利用 husky 和 lint-staged 实现提交代码前的语法检查。详细步骤包括安装 husky 和 lint-staged，配置 package.json，设置 prettier 和 eslint，以及创建 format-code.sh 脚本进行代码提示。此外，还提供了如何绕过代码检查直接提交的方法。

摘要由CSDN通过智能技术生成

一.安装husky和 lint-staged

该文件是 Husky 的预提交钩子脚本，用于在提交前运行指定的命令。

cnpm install husky lint-staged -D

package.json文件添加脚本

在 package.json 中配置lint-staged

注：这里 lint-staged 的配置是：在 git 的待提交的文件中，在 src 目录下的所有指定文件都要执行已配置的命令。

  "lint-staged": {
    "*.{vue,js,ts,tsx,jsx}": [
      "eslint --fix",
      "prettier --write --ignore-unknown"
    ],
    "**/*.{js,jsx,ts,tsx,vue,json}": [
      "prettier --write"
    ]
  },

执行命令创建 pre-commit 钩子

//使用执行 lint-statged 使用本地资源 不下载
npx husky add .husky/pre-commit "npx lint-staged --no-stash"

执行命令完成后.husky文件夹中会有一个 pre-commit (修改其中的代码,就是提交代码前需要执行的检查代码的命令)。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# npx lint-staged
npx lint-staged --no-stash
# npm run format-code

二.lint-staged配置

配置package.json的相关命令和配置格式化配置

  "lint-staged": {
    "*.{vue,js,ts,tsx,jsx}": [
      "eslint --fix",
      "prettier --write --ignore-unknown"
    ],
    "**/*.{js,jsx,ts,tsx,vue,json}": [
      "prettier --wr