前端各项校验规则配置
一、ESlint配置
1、安装eslint
npm i eslint -D
2、vscode配置
安装eslint插件，并在setting.json中配置(注释部分，如无eslint配置开启自动格式化)
// "editor.formatOnSave": true, // 保存时是否自动格式化
// "eslint.enable": true, // 开启eslint检查
// "eslint.format.enable": true, // 是否启用 ESLint 对代码进行格式化
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit", // 保存使用eslint项目配置进行修复
},
"eslint.validate": [
// eslint校验文件类型
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue"
],
注意：如果不想在vscode中整体配置，也可以在.vscode中新增setting文件独对项目配置
3、生成eslint项目配置文件
npm eslint --init
根据项目情况选择，普通情况下如下：
(1) How would you like to use ESLint?
选择：To check syntax and find problems
(2) What type of modules does your project use?
选择：JavaScript modules (import/export)
(3) Which framework does your project use?
选择：Vue.js
(4) Does your project use TypeScript?
选择：Yes/No
(5) Where does your code run?
选择：Browser
(6) What format do you want your config file to be in?
选择：JavaScript
(7) Would you like to install them now?
选择：Yes
(8) Which package manager do you want to use?
选择：npm
完成后会生成.eslintrc.js|cjs|mjs文件,进入文件如有报错添加
env: {
node: true,
},
4、完善rules并配置命令
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn', // 禁止console
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',// 禁止debugger
'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
'vue/comment-directive': 'off', // 关闭index.html文件报clear错误
'comma-dangle': ['error', 'always-multiline'], // 对象结尾逗号，always-multiline表示一定要
semi: ['error', 'always'], // 分号，一直要
},
package.json文件中新增命令(根据实际编写需要检验的文件类型)
"scripts": {
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
}
校验规则是否需要根据实际项目来
完整配置实例
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'@vue/eslint-config-prettier/skip-formatting',
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn', // 禁止console
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',// 禁止debugger
'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
'vue/comment-directive': 'off', // 关闭index.html文件报clear错误
'comma-dangle': ['error', 'always-multiline'], // 对象结尾逗号，always-multiline表示一定要
semi: ['error', 'always'], // 分号，一直要
},
};
5、新建忽略文件
根目录新建.eslintignore文件(根据实际项目配置)
node_modules
dist
.gitignore
package.json
package-lock.json
二、.prettier配置
#### 1、安装prettier
npm i prettier -D
2、新建格式化规则
根目录新建.prettierrc.yaml文件
singleQuote: true # 单引号
semi: true # 分号
printWidth: 100 # 单行字符宽度
实际其他配置请参阅官网，配置文件类型也可为js,使用方式为module.exports，其余类型请参照官网
3、添加命令
"scripts": {
"format": "prettier --write \"**/*.{js,cjs,mjs,ts,json,tsx,css,less,scss,vue,html,md}\"",
}
根据实际情况增减格式化文件类型
4、vscode安装prettier插件
安装插件后配置prettier规则
{
// 保存的时候自动格式化,配合eslint,此句可注释
// "editor.formatOnSave": true,
// 默认格式化工具选择prettier
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
5、解决冲突
在实际开发中eslint与prettier格式化方案是有冲突的，所以我们需要防止冲突的发生。
目前有两种方案
eslint-plugin-prettier：基于 prettier 代码风格的 eslint 规则，即eslint使用pretter规则来格式化代码。
eslint-config-prettier：禁用所有与格式相关的 eslint 规则，解决 prettier 与 eslint 规则冲突，确保将其放在 extends 队列最后，这样它将覆盖其他配置
vue中使用@vue/eslint-config-prettier,安装插件后在.eslintrc.cjs添加配置
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'@vue/eslint-config-prettier/skip-formatting',
],
// skip-formatting 是一种注释语法，用于告诉 ESLint 或 Prettier 跳过某段代码的格式化。
// 如自动格式化失效可删除skip-formatting
6、配置忽略文件
根目录新建.prettierignore文件
dist
LICENSE.md
tsconfig.json
tsconfig.*.json
根据实际项目增减
三、配置stylelint
如果不需要高强度校验，上面的配置已经够了，以下内容可以跳过
1、安装依赖
npm i stylelint stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-scss stylelint-config-standard-vue -D
如果使用less,将scss拼接的插件直接更换为less拼接即可
stylelint: css样式lint工具
stylelint-config-recess-order: 样式书写顺序校验
stylelint-config-recommended-scss:scss的推荐可共享配置规则，详细可查看官方文档
stylelint-config-standard:Stylelint的标准可共享配置规则，详细可查看官方文档
stylelint-config-standard-scss:scss样式lint
stylelint-config-standard-vue:lint.vue文件的样式配置
2、配置检验规则
新建.stylelintrc.cjs文件
// @see https://stylelint.bootcss.com/
module.exports = {
extends: [
'stylelint-config-standard', // 配置stylelint拓展插件
'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
'stylelint-config-standard-scss', // 配置stylelint scss插件
'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
// 'stylelint-config-prettier', // 配置stylelint和prettier兼容, 注意stylelint大于等于v15是已经不需要此插件
],
overrides: [
{
files: ['**/*.(scss|css|vue|html)'],
customSyntax: 'postcss-scss',
},
{
files: ['**/*.(html|vue)'],
customSyntax: 'postcss-html',
},
],
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts', '**/*.json', '**/*.md', '**/*.yaml'],
/**
* null => 关闭该规则
* always => 必须
*/
rules: {
'font-family-no-missing-generic-family-keyword': null,
'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
'no-empty-source': null, // 关闭禁止空源码
'selector-class-pattern': null, // 关闭强制选择器类名的格式
'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
'scss/dollar-variable-pattern': null,
'scss/at-mixin-pattern': null,
'selector-pseudo-class-no-unknown': [
// 不允许未知的选择器
true,
{
ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改element默认样式的时候能使用到
},
],
},
};
3、配置忽略文件
新建.stylelintignore文件
dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md
src/assets
stats.html
4、创建命令
在package.json中配置运行命令
"scripts": {
"lint:stylelint": "stylelint \"**/*.{css,scss,vue,html}\" --fix",
}
四、配置git提交强校验
在开发中，可能会有开发人员未安装校验插件及格式化配置，为了保证所有提交皆为符合规则的代码，故添加提交时进行代码校验，不通过的报错拦截，并提醒开发人员进行更改
1、安装husky以及lint-staged
npm i husky lint-staged -D
husky自动化运行钩子，能够在git提交时自动运行配置的相关命令及操作，一般用于自动化格式校验、单元测试及版本号新增
lint-staged配置式校验，普通配置命令是对全代码进行校验lint-staged为对有改动的文件进行校验
2、配置lint-staged
在package.json中配置命令,确认需要进行lint的文件,可根据实际情况修改校验文件类型及执行命令
"scripts": {
"lint:lint-staged": "lint-staged",
},
"lint-staged": {
"*.{ts,tsx,js,jsx,cjs,mjs,vue,html,json}": [
"eslint --fix"
],
"*.{vue,css,scss,less,styl,html}": [
"stylelint --fix"
],
"*.{ts,tsx,js,jsx,cjs,mjs,vue,css,scss,less,styl,md,html,json}": [
"prettier --write"
]
},
"dependencies":.......
3、配置并初始化husky
在package.json中配置,确认新项目执行npm i 时自动运行
"scripts": {
"prepare": "husky",
}
运行命令npx husky init或npm run prepare此时会在根目录生成一个.husky文件夹
4、生成校验执行文件及命令
执行命令,或手动在.husky文件夹下新建pre-commit文件
echo "npm run lint:lint-staged" > .husky/pre-commit
生成文件后查看pre-commit文件,发现只有如下命令，可根据实际情况增减其他命令
npm run lint:lint-staged
五、配置commit格式校验
开发一个项目，其他人要快速了解一个项目近期都干了什么最快的方式就是查看commit记录，但是如果不做限制，commit记录就会五花八门，看不出多少有用的东西。
标准的commit记录格式为（其中类型和主题是必须的）
<type>(<scope>): <subject>
<body>
<footer>
<类型>(<范围>): <主题>
<主体内容>
<脚注>
1、安装commitlint
npm i @commitlint/cli @commitlint/config-conventional -D
2、创建校验规则
新建commitlint.config.mjs,规则可根据官网进行更改
export default {
extends: ['@commitlint/config-conventional'],
'type-enum': [
// 允许的类型
2,
'always',
[
'wip', // 开发中
'feat', // 新增功能
'merge', // 代码合并
'fix', // bug 修复
'test', // 测试
'refactor', // 重构
'build', // 构造工具、外部依赖（webpack、npm）
'docs', // 文档
'perf', // 性能优化
'style', // 代码风格（不影响代码含义）
'ci', // 修改项目继续集成流程（Travis，Jenkins，GitLab CI，Circle等）
'chore', // 不涉及 src、test 的其他修改（构建过程或辅助工具的变更）
'workflow', // 流水线
'revert', // 回退
'types', // 类型声明
'release', // 版本发布
],
],
};
3、配置命令及生成文件
运行命令
npm pkg set scripts.commitlint="commitlint --edit"
echo "npm run commitlint \${1}" > .husky/commit-msg
最终在package.json中生成
"scripts": {
"commitlint": "commitlint --edit",
}
.husky目录下生成文件commit-msg
npm run commitlint \
除命令外也可手动生成新建
4、进行测试
git commit -m '测试提交' // error
git commit -m 'test: 测试提交' // success
六、完整package.json
我的项目是基于electron创建，请自行忽略electron相关配置
{
"name": "electron-app",
"version": "1.0.0",
"description": "An Electron application with Vue",
"main": "./out/main/index.js",
"author": "example.com",
"homepage": "https://electron-vite.org",
"scripts": {
"prepare": "husky",
"format": "prettier --write \"**/*.{js,cjs,mjs,ts,json,tsx,css,less,scss,vue,html,md}\"",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
"lint:stylelint": "stylelint \"**/*.{css,scss,vue}\" --fix",
"lint:lint-staged": "lint-staged",
"commitlint": "commitlint --edit",
"start": "electron-vite preview",
"dev": "electron-vite --mode dev --watch",
"dev:test": "electron-vite --mode test --watch",
"build": "electron-vite build --mode prod",
"build:dev": "electron-vite build --mode dev",
"build:test": "electron-vite build --mode test",
"postinstall": "electron-builder install-app-deps",
"build:unpack": "npm run build && electron-builder --dir",
"build:win": "npm run build && electron-builder --win",
"build-dev:win": "npm run build:dev && electron-builder --win",
"build-test:win": "npm run build:test && electron-builder --win",
"build:mac": "npm run build && electron-builder --mac",
"build-dev:mac": "npm run build:dev && electron-builder --mac",
"build-test:mac": "npm run build:test && electron-builder --mac",
"build:linux": "npm run build && electron-builder --linux",
"build-dev:linux": "npm run build:dev && electron-builder --linux",
"build-test:linux": "npm run build:test && electron-builder --linux"
},
"lint-staged": {
"*.{ts,tsx,js,jsx,cjs,mjs,vue,html,json}": [
"eslint --fix"
],
"*.{vue,css,scss,less,styl,html}": [
"stylelint --fix"
],
"*.{ts,tsx,js,jsx,cjs,mjs,vue,css,scss,less,styl,md,html,json}": [
"prettier --write"
]
},
"dependencies": {
"@electron-toolkit/preload": "^3.0.1",
"@electron-toolkit/utils": "^3.0.0",
"axios": "^1.7.2",
"electron-updater": "^6.1.7",
"element-plus": "^2.7.7",
"i": "^0.3.7",
"npm": "^10.8.2",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.1",
"sass": "^1.77.8",
"vue-router": "^4.4.0",
"vue3-cookies": "^1.0.6",
"ws": "^8.18.0"
},
"devDependencies": {
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",
"@electron-toolkit/eslint-config": "^1.0.2",
"@iconify-json/ep": "^1.1.15",
"@rushstack/eslint-patch": "^1.10.3",
"@vitejs/plugin-vue": "^5.0.5",
"@vue/eslint-config-prettier": "^9.0.0",
"electron": "^31.0.2",
"electron-builder": "^24.13.3",
"electron-vite": "^2.3.0",
"eslint": "^8.57.0",
"eslint-plugin-vue": "^9.26.0",
"husky": "^9.1.4",
"lint-staged": "^15.2.7",
"prettier": "^3.3.2",
"stylelint": "^16.8.1",
"stylelint-config-recess-order": "^5.0.1",
"stylelint-config-recommended-scss": "^14.1.0",
"stylelint-config-standard": "^36.0.1",
"stylelint-config-standard-scss": "^13.1.0",
"stylelint-config-standard-vue": "^1.0.0",
"unplugin-auto-import": "^0.18.0",
"unplugin-icons": "^0.19.0",
"unplugin-vue-components": "^0.27.3",
"vite": "^5.3.1",
"vue": "^3.4.30"
}
}
七、husky/githook各种钩子介绍
| Git Hook | 调用时机 | 说明 |
|---|---|---|
| pre-applypatch | git am执行前 | |
| applypatch-msg | git am执行前 | |
| post-applypatch | git am执行后 | 不影响git am的结果 |
| pre-commit | git commit执行前 | 可以用git commit --no-verify绕过 |
| commit-msg | git commit执行前 | 可以用git commit --no-verify绕过 |
| post-commit | git commit执行后 | 不影响git commit的结果 |
| pre-merge-commit | git merge执行前 | 可以用git merge --no-verify绕过。 |
| prepare-commit-msg | git commit执行后，编辑器打开之前 | |
| pre-rebase | git rebase执行前 | |
| post-checkout | git checkout或git switch执行后 | 如果不使用–no-checkout参数，则在git clone之后也会执行。 |
| post-merge | git commit执行后 | 在执行git pull时也会被调用 |
| pre-push | git push执行前 | |
| pre-receive | git-receive-pack执行前 | |
| update | ||
| post-receive | git-receive-pack执行后 | 不影响git-receive-pack的结果 |
| post-update | 当 git-receive-pack对 git push 作出反应并更新仓库中的引用时 | |
| push-to-checkout | 当``git-receive-pack对git push做出反应并更新仓库中的引用时，以及当推送试图更新当前被签出的分支且receive.denyCurrentBranch配置被设置为updateInstead`时 | |
| pre-auto-gc | git gc --auto执行前 | |
| post-rewrite | 执行git commit --amend或git rebase时 | |
| sendemail-validate | git send-email执行前 | |
| fsmonitor-watchman | 配置core.fsmonitor被设置为.git/hooks/fsmonitor-watchman或.git/hooks/fsmonitor-watchmanv2时 | |
| p4-pre-submit | git-p4 submit执行前 | 可以用git-p4 submit --no-verify绕过 |
| p4-prepare-changelist | git-p4 submit执行后，编辑器启动前 | 可以用git-p4 submit --no-verify绕过 |
| p4-changelist | git-p4 submit执行并编辑完changelist message后 | 可以用git-p4 submit --no-verify绕过 |
| p4-post-changelist | git-p4 submit执行后 | |
| post-index-change | 索引被写入到read-cache.c do_write_locked_index后 |
八、项目目录结构
.husky
|-commit-msg
|-pre-commit
.vscode
|-settings.json
node_modules
src
|-main.js
.editorconfig
.env.dev
.env.test
.env.prod
.eslintignore
.eslintrc.cjs
.gitignore
.npmrc
.prettierignore
.prettierrc.yaml
.stylelintignore
.stylelintrc.cjs
commitlint.config.mjs
vite.config.mjs
package-lock.json
package.json
README.md
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
