vue代码规范管理

前言

提示：全文内容待补充，步骤可以正常执行

主要使用eslint、prettier、husky完成对git提交的格式化校验，不符合要求的代码，提交不到仓库

---

一、效果图

1.版本不一致校验

2.commit提交不规范校验

3.eslint规范校验

二、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:
这个文件的配置，具体可以看文章最后的 五、支持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版本是否一致

详细单独配置版本检查看此篇
版本和分支提交不一致的效果图：

新增内容：

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