可以看到保存的时候ref这行被提到了最前面的一行 要求内置库放在组件的前面称为auto fix，数组new arry改成了字面量，这就是我们配置的规范
- js规范使用的是airbnb规范
- 模块使用的是antfu 组合prettier&eslint
antfu 组合规范：
效果图：
模块的引入顺序修复 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-plus
stylistic: true,
// eslint-plugin-format
formatters: true,
// unocss 检测&格式化 暂时注释 等配置了unocss再开放为true
// unocss: true,
// vue的eslint配置
vue: true,
// 保存删除未引入的代码
// isInEditor: false,
// 9x版本 忽略文件这种配置方式 废弃掉eslintignore
ignores: [
'*.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
- 解析html文件构建dom树，解析css文件构建cssom
- 结合dom树和cssom生成渲染树
- 根据渲染树进行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 test
npm 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 包含以下部分：
- 类型 (
type)：用于描述 commit 的性质，例如feat(新功能)、fix(修复)、docs(文档更改) 等。 - 作用域 (
scope)：可选，说明 commit 影响了哪个模块或组件。 - 主题 (
subject)：简短描述 commit 的内容。 - 正文 (
body)：可选，详细解释 commit 内容。 - 脚注 (
footer)：可选，比如引用 issue 号码等。
输入正确的commit再次提交即可正常提交
fix(auth): 修正用户登录时密码验证不一致的问题
//这里空一行
- 更新了 passwordValidator 函数，确保前后端密码校验逻辑一致。
Fixes #123
扫一扫
2081
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
