vue3代码规范管理；基于vite和vue3、 eslint、prettier、stylelint、husky规范；git触发eslint校验

前言

为提高前端代码格式化和规范开发。主要使用eslint、prettier、husky完成对git提交commit信息校验和代码eslint格式化校验，不符合要求的代码，提交不到仓库。

---

参考链接1
参考链接2

一、效果图

1.git提交触发eslint规范校验

2.版本与分支名不一致校验

3.commit提交不规范校验

4.代码提交规范相关介绍

代码格式规范相关：

• eslint：代码格式校验
• prettier：prettier 主要是为了格式化代码，而在没有 prettier 之前，是用 eslint —fix和 编辑器自带代码格式来进行代码格式化的。
• stylelint：css样式格式校验

代码提交规范相关：

• lint-staged：一个在git暂存文件上运行linters的工具，检查本次修改更新的代码，并自动修复并且可以添加到暂存区
• husky: 是一个Git Hook 工具。将其安装到所在仓库的过程中它会自动在 .git/ 目录下增加相应的钩子实现对应的功能，这里我们通过使用husky来监测commit-msg钩子，完成提交信息校验；监测 pre-commit 钩子，完成代码校验。
• pre-commit：git hooks的钩子，在代码提交前检查代码是否符合规范，不符合规范将不可被提交
• commit-msg：git hooks的钩子，在代码提交前检查commit信息是否符合规范
• commitizen：git的规范化提交工具，帮助你填写commit信息，符合约定式提交要求
• commitlint：用于检测提交的信息。

文档：

• 规范提交文档

二、Prettier准备

1.安装Prettier

Prettier是一个代码格式化工具，它可以自动调整代码的缩进、换行、引号等格式，使代码风格保持一致。与ESLint不同，Prettier主要关注代码的格式问题，而不是语法或逻辑错误。

npm install prettier --save-dev

package.json添加

  "scripts": {"prettier": "npx prettier . --write",},

2.安装对应插件

3.配置

.prettierignore忽略文件

.github
.husky
.vscode
/public/**
/node_modules/**
**/*.svg
**/*.sh

.prettierrc.cjs配置文件

module.exports = {printWidth: 200,tabWidth: 2,useTabs: false,semi: false,trailingComma: "none",singleQuote: false,bracketSpacing: true,jsxBracketSameLine: false,endOfLine: "auto",arrowParens: "avoid",singleAttributePerLine: false,htmlWhitespaceSensitivity: "ignore"
}

4.配置格式化

在vscode 的设置里面 找到代码格式化设置，设置为使用 prettier格式化代码

5.保存自动格式化代码设置

三、eslint准备

1.安装eslint插件

2.勾选

3.安装eslint依赖

pnpm add @eslint/js@9.8.0 eslint@9.8.0 eslint-plugin-vue@9.27.0 globals@15.8.0 --save-dev

4.根添加配置

.eslintignore

*.sh
*.md
*.woff
*.ttf
.vscode
.husky
.githubnode_modules
dist

eslint.config.js: 添加这个文件后才可以支持eslnt触发校验
这个文件的配置，具体可以看文章最后的 五、支持eslint.config.js的解析 内容

import globals from "globals"
import pluginJs from "@eslint/js"
import pluginVue from "eslint-plugin-vue"export default [{ files: ["**/*.{js,mjs,cjs,vue}"] }, // 注意范围{ languageOptions: { globals: { ...globals.browser, ...globals.node } } },pluginJs.configs.recommended,...pluginVue.configs["flat/essential"],{files: ["**/*.vue"],rules: {"vue/html-self-closing": "off","vue/multi-word-component-names": "off","vue/max-attributes-per-line": "off","vue/singleline-html-element-content-newline": "off","max-lines": ["error", { max: 500, skipBlankLines: true, skipComments: true }]}},{ignores: ["node_modules/*", "dist/*", "public/*"]}
]

5.package.json添加校验命令

5.1命令

  "scripts": {"prettier": "npx prettier . --write","lint": "npx eslint ."},

5.2执行npm run lint就会触发eslint的校验,看到eslint报错。

5.3同时页面应该也可以看到eslint的报错了。

• 如果此时vscode看不到具体的页面的eslint报错，那就关闭项目，重启vscode。
• 如果发现做了上述操作之后，还是没触发，那就把vscode的 eslint、prettier 扩展插件 卸载了重新安装，然后重启vscode，就可以解决了
  

四、git检查提交分支和package.json的version版本是否一致

详细单独配置版本检查看此篇

husky	操作git钩子的工具
lint-staged	在提交前进行eslint校验，并使用prettier格式化暂存区的代码
@commitlint/cli	校验提交信息
@commitlint/config-conventional	Angular 的提交规范
commitizen	生成标准化的commit message
cz-git	轻量级、高度自定义。输出标准格式的commitize 适配器

新增内容：

1.安装命令husky和lint-staged

npm install husky@9.1.4 lint-staged@15.2.9 --save-dev

2.初始化

npx husky-init && pnpm install

生成 .husky 目录及 pre-commit 钩子文件

3.创建校验脚本‌

在项目根目录新建 scripts/check-version.js：

import fs from "fs"
import { execSync } from "child_process"// 获取packageJson内容
const packageJson = JSON.parse(fs.readFileSync("package.json", "utf8"))// 获取当前分支名
const branchName = execSync("git rev-parse --abbrev-ref HEAD").toString().trim()if (!branchName.includes(packageJson.version)) {console.error(`版本 ${packageJson.version} 与分支名称 ${branchName} 不一致，不允许提交`)process.exit(1)
}

4.配置ckage.json

配置lint-staged‌，添加校验：
注意此时仅仅校验版本，没有校验eslint

  "scripts": {"prepare": "husky install"},"lint-staged": {"*.{js,jsx,ts,tsx}": ["prettier --write"],"*.vue": ["prettier --write"]}

5.更新 Husky 钩子‌

修改 .husky/pre-commit：

npx lint-staged
node scripts/check-version.js

6.测试版本不一致的提交效果

五、支持eslint.config.js的解析

1.原生语法解析（无就jsx、无ts）

import globals from "globals"
import pluginJs from "@eslint/js"
import pluginVue from "eslint-plugin-vue"export default [{ files: ["**/*.{js,mjs,cjs,vue}"] }, // 注意范围{ languageOptions: { globals: { ...globals.browser, ...globals.node } } },pluginJs.configs.recommended,...pluginVue.configs["flat/essential"],{files: ["**/*.vue"],rules: {"vue/html-self-closing": "off","vue/multi-word-component-names": "off","vue/max-attributes-per-line": "off","vue/singleline-html-element-content-newline": "off","max-lines": ["error", { max: 500, skipBlankLines: true, skipComments: true }]}},{ignores: ["node_modules/*", "dist/*", "public/*"]}
]

2.有jsx无ts

报错：jsx报错Parsing error: Unexpected token <eslint

安装依赖

npm install vue-eslint-parser --save-dev

import globals from "globals"
import pluginJs from "@eslint/js"
import pluginVue from "eslint-plugin-vue"
import babelParser from "vue-eslint-parser"; // 显式导入解析器对象-否则引入报错export default [{files: ["**/*.{js,jsx,vue}"], // 注意范围languageOptions: {// 正确引用解析器对象（非字符串）parser: babelParser,parserOptions: {ecmaVersion: "latest",sourceType: "module",ecmaFeatures: { jsx: true }},globals: { ...globals.browser, ...globals.node }}},pluginJs.configs.recommended,...pluginVue.configs["flat/essential"],{files: ["**/*.vue"],rules: {"vue/html-self-closing": "off","vue/multi-word-component-names": "off","vue/max-attributes-per-line": "off","vue/singleline-html-element-content-newline": "off","max-lines": ["error", { max: 500, skipBlankLines: true, skipComments: true }]}},{ignores: ["node_modules/*", "dist/*", "public/*"]}
]

3.有jsx有ts

• 我的这里比较特殊，最初有jsx和ts代码时候，没有安装@typescript-eslint/parser和@typescript-eslint/eslint-plugin这两个插件时候，ts的代码是会报Parsing error: Unexpected token {的eslint问题。
• 但是当我安装下面两个依赖后，eslint.config.js继续使用2.有jsx无ts的配置时，发现ts的报错也没了。。。
• 原因：files: ["**/*.{js,jsx,ts,tsx,vue}"],漏了写ts,tsx
• 正确解决问题的方式如下

安装依赖

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

注意：project: "./tsconfig.json"的路径

import globals from "globals";
import pluginJs from "@eslint/js";
import pluginVue from "eslint-plugin-vue";
import vueParser from "vue-eslint-parser";
import tsParser from "@typescript-eslint/parser"; // 导入 TS 解析器
import tsEslintParser from "@typescript-eslint/eslint-plugin"; // 导入 TS 解析器export default [// 核心配置{files: ["**/*.{js,jsx,ts,tsx,vue}"], // 注意范围languageOptions: {// 主解析器：处理 Vue 文件parser: vueParser,parserOptions: {// 子解析器：处理非 Vue 文件（TS/JS）parser: {js: tsParser, // 处理 JS/JSXts: tsParser, // 处理 TS/TSXjsx: tsParser,tsx: tsParser},ecmaVersion: "latest",sourceType: "module",ecmaFeatures: { jsx: true },// 关联 tsconfig.json（路径根据实际项目调整）project: "./tsconfig.json" // 【【【【【【【【【【【【【【【【【【【【【【【【【【【【【【【【【【注意这里路径调整,没有ts配置文件就注释掉该行】】】】】】】】】】】】】】】】】】】】】】】】】】】】】】】】】】】】】},globals: { ...globals.browser, ...globals.node }}},// 应用推荐规则pluginJs.configs.recommended,// Vue3 配置...pluginVue.configs["flat/essential"],// TypeScript 配置{plugins: {"@typescript-eslint": tsEslintParser},rules: {// "@typescript-eslint/no-unused-vars": "warn" // 示例规则}},// 自定义规则{files: ["**/*.vue"],rules: {"vue/html-self-closing": "off","vue/multi-word-component-names": "off","vue/max-attributes-per-line": "off","vue/singleline-html-element-content-newline": "off","max-lines": ["error", { max: 500, skipBlankLines: true, skipComments: true }]}},// 忽略文件{ignores: ["node_modules/*", "dist/*", "public/*"]}
]

六、git提交规范化类型

规范提交文档

1.package.json添加命令和初始化husky

package.json至少要有这些配置

  "scripts": {"prettier": "npx prettier . --write","prepare": "husky install","commitlint": "commitlint --edit"},"husky": {"hooks": {"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"}},"lint-staged": {"*.{js,jsx,ts,tsx}": ["prettier --write"],"*.vue": ["prettier --write"]}

执行npm run prepare，初始化husky的文件

2.安装

npm i @commitlint/cli @commitlint/config-conventional -D

3.配置git提交类型

根目录配置：commitlint.config.js

const config = {ignores: [commit => commit.includes("init")],rules: {"header-max-length": [2, "always", 100],"scope-case": [2, "always", "lowerCase"],"subject-empty": [2, "never"],"subject-case": [2, "always", ["lower-case", "sentence-case", "start-case", "pascal-case", "upper-case"]],"subject-full-stop": [2, "never", "."],"type-empty": [2, "never"],"type-case": [2, "always", "lowerCase"],"type-enum": [2, "always", ["feat", "fix", "style", "perf", "docs", "refactor", "test"]]}
}export default config

4.添加commit-msg

在.husky/下新增commit-msg

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
commit_msg=$(cat "$1")
new_commit_msg=$(echo "$commit_msg" | sed 's/^:[^:]*: //')
echo "$new_commit_msg" > "$1"
pnpm commitlint ${1}

5.测试git提交规范

七、git提交触发eslint

注意：只是针对当前新增的缓存区文件，触发eslint；历史提交成功的文件，eslint就不校验了。可以通过npm run eslint去单独触发，单独依次修改掉

1.package.json修改

在上述所有步骤的基础上加上"eslint --fix",

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

2.测试git提交触发eslint

八、最终结构

package.json配置

{"name": "jg-risk-detection-web","private": true,"version": "develop_eslint","type": "module","scripts": {"dev": "pnpm setName && vite --mode beta --host","setName": "node auto-set-component-name.mjs","develop": "vite build --mode develop","test": "vite build --mode test","online": "vite build --mode online","build": "vite build","build:electron": "vite build --mode electron","build:prod": "pnpm test && pnpm build:electron","preview": "vite preview","prettier": "npx prettier . --write","prepare": "husky install","lint": "npx eslint .","commitlint": "commitlint --edit"},"dependencies": {"@antv/g6": "^4.8.24","@element-plus/icons-vue": "^2.3.1","@jg/jg-ui": "^0.0.1","@vueuse/core": "^10.11.1","@web/jg-plugin": "^0.0.34","@xterm/addon-fit": "^0.10.0","@xterm/xterm": "^5.5.0","axios": "^1.6.8","dayjs": "^1.11.10","echarts": "^5.4.3","element-plus": "2.8.4","element-resize-detector": "^1.2.4","fast-glob": "^3.3.2","highlight.js": "^11.10.0","lodash": "^4.17.21","pinia": "^2.1.7","pinia-plugin-persist": "1.0.0","pinia-plugin-persistedstate": "^3.2.1","sortablejs": "^1.15.6","vite-plugin-svg-icons": "^2.0.1","vue": "^3.4.21","vue-diff": "^1.2.4","vue-draggable-plus": "^0.6.0","vue-router": "4","vxe-pc-ui": "4.3.82","vxe-table": "4.9.29"},"devDependencies": {"@commitlint/cli": "^19.8.0","@commitlint/config-conventional": "^19.8.0","@eslint/js": "9.8.0","@typescript-eslint/eslint-plugin": "^8.31.0","@typescript-eslint/parser": "^8.31.0","@vitejs/plugin-vue": "^5.0.4","@vitejs/plugin-vue-jsx": "^4.0.1","eslint": "^9.8.0","eslint-plugin-vue": "^9.27.0","globals": "15.8.0","gm-crypt": "^0.0.2","gm-crypto": "^0.1.12","husky": "^9.1.4","lint-staged": "^15.2.9","prettier": "3.2.5","sass": "1.65.1","unplugin-auto-import": "^0.17.5","unplugin-vue-components": "^0.26.0","unplugin-vue-define-options": "^1.4.2","vite": "^5.2.0","vite-plugin-lazy-import": "^1.0.7","vue-eslint-parser": "^10.1.3"},"husky": {"hooks": {"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"}},"lint-staged": {"*.{js,jsx,ts,tsx}": ["eslint --fix","prettier --write"],"*.vue": ["eslint --fix","prettier --write"]}
}