Chore/husky lint staged

.husky/post-merge

@@ -0,0 +1,9 @@
+#!/bin/sh
+
+# 检查 pnpm-lock.yaml 是否发生变化
+if git diff --name-only HEAD@{1} HEAD | grep -E 'pnpm-lock.yaml'; then
+  echo "Detected changes in dependencies, running pnpm install..."
+  pnpm install
+else
+  echo "No dependency changes detected, skipping pnpm install."
+fi

.husky/pre-commit

@@ -0,0 +1,47 @@
+#!/bin/sh
+
+BOLD='\033[1m'
+GREEN='\033[32m'
+RED='\033[31m'
+RESET='\033[0m'
+
+# 检查是否在 Git 仓库目录下
+git rev-parse --git-dir >/dev/null 2>&1 || {
+    echo >&2 "${RED}❌ 错误: 当前目录不是 Git 仓库${RESET}"
+    exit 1
+}
+
+
+# 检查是否为 --amend
+IS_AMEND=$(git rev-parse --verify --quiet HEAD >/dev/null 2>&1; echo $?)
+
+# 检查暂存区与 HEAD 之间是否有变化
+HAS_DIFF=$(git diff --cached HEAD)
+
+
+if [ "$IS_AMEND" -eq 0 ] && [ -z "$HAS_DIFF" ]; then
+  echo "可能是 amend 操作"
+  exit 0
+fi
+
+
+# 运行 lint-staged
+if pnpm lint-staged; then
+  # 检查 Git 暂存区是否有变化
+  if [ -z "$(git diff --cached)" ]; then
+    # 暂存区为空，输出警告信息
+    echo "\n${RED}❌ Commit 失败，请检查以下可能原因：\n"
+    echo "\t1. lint-staged 修复后代码与上次提交一致，无新变更"
+    echo "\t2. 代码未添加到暂存区"
+    echo "\t3. ESLint 插件未生效，请检查插件状态"
+    echo "\n请检查代码，并重新 add 后再尝试提交。 ${RESET}\n"
+    exit 1
+  else
+    # 暂存区有变化，可继续提交
+    echo "\n${GREEN}✅ ESLint 校验成功，可以继续提交${RESET}\n"
+  fi
+else
+  # lint-staged 失败
+  echo "${BOLD}${RED}🥴 ESLint 校验失败，请尝试修复错误后再重新执行 add、commit。${RESET}\n"
+  exit 1
+fi

.vscode/extensions.json

@@ -1,6 +1,7 @@
 {
   "recommendations": [
     "vue.volar",
+    "antfu.iconify",
     "dbaeumer.vscode-eslint",
     "stylelint.vscode-stylelint"
   ]

.vscode/settings.json

@@ -1,18 +1,38 @@
 {
-  "stylelint.validate": [
+  "editor.formatOnSave": false,
+
+  // Auto fix
+
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never",
+		"source.fixAll.stylelint": "explicit"
+  },
+  "eslint.run": "onType",
+  "eslint.format.enable": true,
+	"stylelint.validate": [
     "vue",
 		"scss"
   ],
   "css.validate": false,
 	"less.validate": false,
 
-	"editor.formatOnSave": false,
-	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": "explicit",
-		"eslint.autoFixOnSave": "explicit",
-		"source.fixAll.stylelint": "explicit"
-	},
 	"files.autoSaveDelay": 500,
-	"typescript.tsdk": "node_modules/typescript/lib",
-	"vue.codeActions.enabled": false,
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "gql",
+    "graphql"
+  ]
 }

README.md

@@ -11,7 +11,7 @@
 
 ## 简介
 
-🗂️ 一个基于 Vite5 + Vue3 + Naive UI + TS + ESLint(v9) 的 Tab 切换选项卡演示项目，其内部抽象出了一个**比较贴近实战**的**项目管理系统**的业务场景，虽不涉及特别复杂的业务逻辑但也不失灵活，旨在更好地理解和展示如何使用 Tab 标签页组件，项目基于原子化 UnoCSS 框架配置主题，还自带一个模块化的组件开发环境，使页面组件、路由组件、状态管理和样式等模块可以根据 Modules 目录进行解耦，它是一个开箱即用的解决方案，也适合作为快速开发中后台前端，可用于学习和参考
+🗂️ 一个基于 Vite5 + Vue3 + Naive UI + Pinia + TS + ESLint(v9) + Unplugin + Husky 的 Tab 切换选项卡演示项目，其内部抽象出了一个**比较贴近实战**的**项目管理系统**的业务场景，虽不涉及特别复杂的业务逻辑但也不失灵活，旨在更好地理解和展示如何使用 Tab 标签页组件，项目基于原子化 UnoCSS 框架配置主题，还自带一个模块化的组件开发环境，使页面组件、路由组件、状态管理和样式等模块可以根据 Modules 目录进行解耦，它是一个开箱即用的解决方案，也适合作为快速开发中后台前端，可用于学习和参考
 
 
 __[🌈 Live Demo 在线体验](https://pdsuwwz.github.io/vue3-tab-demo)__
@@ -21,10 +21,12 @@ __[🌈 Live Demo 在线体验](https://pdsuwwz.github.io/vue3-tab-demo)__
 
 * Naive UI 2.x
 * Vue 3.4.x
-* Vite 5.x
+* Vite 5.x + Vitest
 * Pinia 2.x
-* TypeScript 5.x 
+* TypeScript 5.x
 * ESLint 9.x + Stylistic
+* Husky + lint-staged
+* Lodash
 * VueUse
 * Unplugin + UnoCSS
 
@@ -234,7 +236,9 @@ export interface WorkTab {
 
 * Vue 组件名称需要与对应路由名称保持一致，否则 Keep Alive 将会失效
 * 由于 Tab 组件自身解耦了所有的业务逻辑，所以涉及到路由一级动态 ID 这种跟业务路由强耦合的地方都需要再自行传入，嫌麻烦的可以直接修改源码中的所有 `dynamicCacheSpacePrefixKey` 字段或将相关 hook 二次封装一下。具体参考这两个位置：[源码1](src/widgets/WorkTabs/store.ts#L85) 和 [源码2](src/hooks/useTabRouter.ts#L50) 
-* 推荐使用本项目进行二次改造和开发实际的业务项目
+* 若 Husky 未生效，可能是由于未完成初始化，执行 `pnpm run prepare` 进行初始化再尝试
+* 推荐使用本项目进行二次开发和定制实际的业务项目
+
 
 
 ## 说明
@@ -247,9 +251,9 @@ export interface WorkTab {
 
 * 如有问题请直接在 Issues 中提, 或者您发现问题并有非常好的解决方案, 欢迎 PR 👍
 
-* 推荐一个 Vue3 + TS + Element Plus 开源入门项目, 对 Element Plus UI 库感兴趣的朋友可以去看看。[地址在这里](https://github.com/pdsuwwz/vite-ts-starter)
+* 推荐一个 Vite5 + Vue3 + TS + Element Plus 开源入门项目, 对 Element Plus UI 库感兴趣的朋友可以去看看。[地址在这里](https://github.com/pdsuwwz/vite-ts-starter)
 
-* 另外一个 Vue3 + Naive UI + TS 的入门项目, 比当前项目简洁很多, 非常适合入门练习和二次开发。[地址在这里](https://github.com/pdsuwwz/vite-naive-template)
+* 另外一个 Vite5 + Vue3 + Naive UI + TS 的入门项目, 比当前项目简洁很多, 非常适合入门练习和二次开发。[地址在这里](https://github.com/pdsuwwz/vite-naive-template)
 
 
 ## License

lint-staged.config.js

@@ -0,0 +1,3 @@
+export default {
+  '*.{js,ts,vue}': 'eslint --quiet --fix'
+}

package.json

@@ -15,7 +15,8 @@
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
     "stylelint": "stylelint .scss, .vue ./src",
-    "stylelint:fix": "stylelint --fix .scss, .vue ./src"
+    "stylelint:fix": "stylelint --fix .scss, .vue ./src",
+    "prepare": "husky"
   },
   "engines": {
     "node": ">= 16.15.x",
@@ -98,8 +99,10 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-vue": "^9.25.0",
     "globals": "^15.0.0",
+    "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "^24.0.0",
+    "lint-staged": "^15.2.2",
     "postcss": "^8.4.38",
     "postcss-html": "^1.6.0",
     "postcss-scss": "^4.0.9",