28 Vue3之搭建公司级项目规范

可以看到保存的时候ref这行被提到了最前面的一行 要求内置库放在组件的前面称为auto fix，数组new arry改成了字面量，这就是我们配置的规范

• js规范使用的是airbnb规范
• 模块使用的是antfu 组合prettier&eslint

airbnb规范： https://github.com/airbnb/javascript?tab=readme-ov-file#arrow-functions

antfu 组合规范：

https://github.com/antfu/eslint-config/tree/feat/support-eslint-9

效果图：

模块的引入顺序修复 js代码修复

 nvm包管理工具

NVM全称node.js version management ，专门针对node版本进行管理的工具，通过它可以安装和切换不同版本的node.js

使用场景

我目前的公司有很多项目，其中有一些老项目用的是vue2.5左右了webpack版本也比较低，只能使用10.16.0左右的node版本，但是也有一些新项目需要使用高版本的node例如14.17.3左右的这时候就可以使用nvm切换node 版本

1.安装nvm

安装过程中会提示两个存放目录地址 选择两个不同的文件夹即可

windows 安装地址

Releases · coreybutler/nvm-windows · GitHub

 nvm list available 查看nodejs 官方的所有版本 

nvm install （版本号）下载对应的node版本号

使用node的某个版本nvm use 22.0.0

nvm list 查看现在所有安装的node版本 

使用node-v查看版本

 tips:若之前电脑安装了node版本卸载即可 或者出现node -v无法识别重启电脑即可

 项目搭建

由于vite脚手架要禁止*.cjs 和 eslint版本升级废弃rc配置文件， 故重新搭建

1 前置条件

node版本>20

node 最好>20 因为eslint9的需要 本次项目node为22.0.0

 2 初始化项目

npm init vite@latest

vsocde需安装插件

antfu 组合prettier&eslint

npm i -D eslint @antfu/eslint-config eslint-plugin-format

eslint.config.js 

根目录配置新建eslint.config.js文件 用于eslint规则校验

import antfu from '@antfu/eslint-config'export default antfu({// @stylistic/eslint-plugin-plusstylistic: true,// eslint-plugin-formatformatters: true,// unocss 检测&格式化 暂时注释 等配置了unocss再开放为true// unocss: true,// vue的eslint配置vue: true,// 保存删除未引入的代码// isInEditor: false,// 9x版本 忽略文件这种配置方式 废弃掉eslintignoreignores: ['*.sh','node_modules','*.md','*.woff','*.ttf','.idea','/public','/docs','.husky','.local','/bin','Dockerfile',],
})

VS Code support (auto fix)

.vscode目录下新建settings.json 用于保存带代码格式化

配置在这里只针对当前项目

{// Enable the ESlint flat config support"eslint.experimental.useFlatConfig": true,// Disable the default formatter, use eslint instead"prettier.enable": false,"editor.formatOnSave": false,// Auto fix"editor.codeActionsOnSave": {"source.fixAll.eslint": "explicit","source.organizeImports": "never"},// Silent the stylistic rules in you IDE, but still auto fix them"eslint.rules.customizations": [{ "rule": "style/*", "severity": "off" },{ "rule": "format/*", "severity": "off" },{ "rule": "*-indent", "severity": "off" },{ "rule": "*-spacing", "severity": "off" },{ "rule": "*-spaces", "severity": "off" },{ "rule": "*-order", "severity": "off" },{ "rule": "*-dangle", "severity": "off" },{ "rule": "*-newline", "severity": "off" },{ "rule": "*quotes", "severity": "off" },{ "rule": "*semi", "severity": "off" }],// Enable eslint for all supported languages"eslint.validate": ["javascript","javascriptreact","typescript","typescriptreact","vue","html","markdown","json","jsonc","yaml","toml"]
}

配置已完成 当文件保存的时候即可格式化

新增脚本package.json

用于整个项目文件的规则校验

"scripts": {// ..."lint": "eslint .","lint:fix": "eslint . --fix"}

eslint 不允许有console.log()

styleLint

cnpm i  postcss postcss-html postcss-scss sass stylelint stylelint-config-recess-order stylelint-config-standard -D

• stylelint-config-rational-order 处理css属性间的顺序（Stylelint 配置通过按顺序组合在一起对相关属性声明进行排序： 定位 盒子模型 排版 视觉的 动画片 杂项 ---npm介绍）

为什么使用styleLint？

css的书写顺序很重要，会影响浏览器的渲染。正确的书写可以减少浏览器的回流，提升浏览器的dom渲染。

css样式的书写顺序及原理—— 很重要！很重要！很重要！ 浏览器的渲染原理：reflow和repaint

1. 解析html文件构建dom树，解析css文件构建cssom
2. 结合dom树和cssom生成渲染树
3. 根据渲染树进行layout（布局）和paint（渲染）

在步骤3，生成渲染树的过程中，浏览器会从根节点（html节点）开始遍历每个树节点的css样式进行解析。在解析过程中，如果某个元素的定位变化影响了布局。则要倒回去重新渲染。

// 例如
.box{width: 100px; height: 100px; background-color: #ddd; position: absolute; /*当浏览器解析到position为absolute时，发现需要脱离文档流而不是在文档流中渲染时，会倒回去重新渲染*/
}

正常的顺序

 根目录新建文件stylelint.config.js

/** @type {import('stylelint').Config} */
export default {// stylelint-config-standard 基础配置// stylelint-config-recess-order 样式顺序extends: ['stylelint-config-standard', 'stylelint-config-recess-order'],// 不同文件类型用不同解析器overrides: [{files: ['**/*.(css|html|vue)'],customSyntax: 'postcss-html',},// 选less可以注释scss{files: ['*.less', '**/*.less'],customSyntax: 'postcss-less',},// 选sass可以注释上面的less{files: ['*.scss', '**/*.scss'],customSyntax: 'postcss-scss',rule: {'scss/percent-placeholder-pattern': null,'scss/at-mixin-pattern': null,},},],rules: {// 'prettier/prettier': true,'media-feature-range-notation': null,'selector-not-notation': null,'import-notation': null,'function-no-unknown': null,'selector-class-pattern': null,'selector-pseudo-class-no-unknown': [true,{ignorePseudoClasses: ['global', 'deep'],},],'selector-pseudo-element-no-unknown': [true,{ignorePseudoElements: ['v-deep', ':deep'],},],'at-rule-no-unknown': [true,{ignoreAtRules: ['tailwind','apply','variants','responsive','screen','function','if','each','include','mixin','extend','use',],},],'no-empty-source': null,'named-grid-areas-no-invalid': null,'no-descending-specificity': null,'font-family-no-missing-generic-family-keyword': null,'rule-empty-line-before': ['always',{ignore: ['after-comment', 'first-nested'],},],'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],'order/order': [['dollar-variables','custom-properties','at-rules','declarations',{type: 'at-rule',name: 'supports',},{type: 'at-rule',name: 'media',},'rules',],{ severity: 'error' },],},ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
}

新增脚本package.json

{"scripts": {// ..."lint:stylelint": "stylelint  \"**/*.{css,scss,less,vue,html}\" --fix"}
}

下载stylelint插件后配置settings.json

在settings.json中添加配置项 这里是配置的全局，也可参考配置只针对当前项目

"editor.codeActionsOnSave": {"source.fixAll.stylelint": true,"source.fixAll": true,},// stylelint配置"stylelint.enable": true,// 关闭编辑器内置样式检查（避免与stylelint冲突）"css.validate": false,"less.validate": false,"scss.validate": false,"stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"],

设置 stylelint 忽略文件 根目录新增文件.stylelintignore

/dist/*
/public/*

husky 用于代码提交

Husky

Husky 是 Git 钩子工具，可以设置在 git 各个阶段（pre-commit、commit-msg 等）触发。

官网Husky 推荐安装指令

• 1 前提条件 项目有.git 如果没有需要生成 有git的话不需要这一步

  git init

• 2 自动配置husky

  npx husky-init

• 

3 安装husky 执行npm i  

Lint-staged 增量检测提交代码

lint-staged 是一个在 git add 到暂存区的文件运行 linters (ESLint/Prettier/StyleLint) 的工具，避免在 git commit 提交时在整个项目执行。

cnpm i lint-staged -D

新建lint-staged.config.js 配置文件

/**  @type {import('lint-staged').Config} */
export default {'*.{js,jsx,ts,tsx}': ['eslint --fix'],'*.json': ['eslint --fix'],'*.vue': ['eslint --fix'],'*.{scss,less,styl,html}': ['stylelint --fix --allow-empty-input'],'*.md': ['prettier --write'],
}

新增脚本package.json

"lint:lint-staged": "lint-staged"

文件.husky/pre-commit修改提交前钩子命令

npx命令会自动执行安装过的 lint-staged插件，从而执行lint-staged.config.js配置文件

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"# npm testnpm run lint:lint-staged --allow-empty

Lint-staged测试

声明一个a变量 然后提交代码

会有一个弹窗 点击显示命令

Commitlint

Commitlint 检查您的提交消息是否符合 Conventional commit format。-- Commitlint 官网

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

根目录创建 commitlint.config.js 配置文件  

/** @type {import("@commitlint/types").UserConfig} */
export default {ignores: [commit => commit.includes('init')],extends: ['@commitlint/config-conventional'],rules: {'body-leading-blank': [2, 'always'],'footer-leading-blank': [1, 'always'],'header-max-length': [2, 'always', 108],'subject-empty': [2, 'never'],'type-empty': [2, 'never'],'subject-case': [0],'type-enum': [2,'always',['feat', // 新增功能'fix', // 修复缺陷'docs', // 文档变更'style', // 代码格式（不影响功能，例如空格、分号等格式修正）'refactor', // 代码重构（不包括 bug 修复、功能新增）'perf', // 性能优化'test', // 添加疏漏测试或已有测试改动'build', // 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）'ci', // 修改 CI 配置、脚本'revert', // 回滚 commit'chore', // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）],],},
}

执行下面命令生成 commint-msg 钩子用于 git 提交信息校验

npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"

 

commit测试

commitlint 的配置文件一般命名为 commitlint.config.js 或 .commitlintrc，并且它遵循 Angular 团队的 commit message 规范作为默认风格。该规范推荐 commit message 包含以下部分：

1. 类型 (type)：用于描述 commit 的性质，例如 feat (新功能)、fix (修复)、docs (文档更改) 等。
2. 作用域 (scope)：可选，说明 commit 影响了哪个模块或组件。
3. 主题 (subject)：简短描述 commit 的内容。
4. 正文 (body)：可选，详细解释 commit 内容。
5. 脚注 (footer)：可选，比如引用 issue 号码等。

输入正确的commit再次提交即可正常提交

fix(auth): 修正用户登录时密码验证不一致的问题

//这里空一行

- 更新了 passwordValidator 函数，确保前后端密码校验逻辑一致。

Fixes #123