vite + vue3 + eslint + prettier + husky + lint-staged + commitlint + editorconfig 配置
Eslint 代码检查
npm i eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin vite-plugin-eslint -D
新建 .eslintrc.js 文件,内容如下,具体规则Eslint 规则文档
// .eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended",
],
overrides: [
{
env: {
node: true,
},
files: [".eslintrc.{js,cjs}"],
parserOptions: {
sourceType: "script",
},
},
{
files: ["*.vue"],
rules: {
"vue/multi-word-component-names": "off",
},
},
],
parserOptions: {
ecmaVersion: "latest",
parser: "@typescript-eslint/parser",
sourceType: "module",
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"vue/multi-word-component-names": "off", // 允许单字组件名称
},
};
新建 .eslintignore 文件,添加忽略校验的文件
# .eslintignore
*.sh
node_modules
lib
*.md
*.scss
*.woff
*.ttf
.vscode
.idea
dist
mock
public
bin
build
config
index.html
prettier 代码风格
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
新建 .prettierrc 文件,具体配置内容查看文档prettier 配置文档
// .prettierrc
{
"semi": false,
"tabWidth": 2,
"trailingComma": "none",
"singleQuote": true,
"arrowParens": "avoid"
}
新建 .prettierignore 文件,添加忽略校验的文件
# .prettierignore
.DS_Store
node_modules
dist
dist-ssr
*.local
.npmrc
*.md
新增 .eslintrc.js 配置
// .eslintrc.js
module.exports = {
extends: [
// ...原有配置
// 解决ESlint和Prettier冲突
"plugin:prettier/recommended",
],
};
配置 husky + lint-staged
# Windows
npm i lint-staged husky -D
配置 package.json 文件,prepare 会在 npm install 安装依赖的时候自动执行
// package.json
{
"scripts": {
"prepare": "husky install"
},
"lint-staged": {
"*.{js,jsx,ts,tsx,vue}": ["eslint --fix", "prettier --write"],
"*.{scss,html}": ["prettier --write"]
}
}
手动初始化husky
npm run husky
在.husky文件夹下,新建 pre-commit 文件,内容如下
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
配置 commitlint
- 安装
# Windows
npm i @commitlint/config-conventional @commitlint/cli @commitlint/cz-commitlint -D
配置 package.json 文件
// package.json
{
"scripts": {
"commit": "git add .&& git-cz"
},
"config": {
"commitizen": {
"path": "@commitlint/cz-commitlint"
}
}
}
- 在
.husky文件夹下,新建commit-msg文件,内容如下
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no -- commitlint --edit
在项目文件夹下新建文件commitlint.config.js,文件内容如下
// commitlint.config.js
export default {
extends: ["@commitlint/config-conventional"], // 自定义规则
rules: {
// 提交类型枚举,git提交type必须是以下类型
"type-enum": [
2,
"always",
[
"feat", // 新增功能
"fix", // 产生diff修复问题
"docs", // 文档变更
"style", // 代码格式(不影响功能,例如空格、分号等格式修正)
"refactor", // 代码重构(不包括 bug 修复、功能新增)
"perf", // 性能优化
"test", // 添加疏漏测试或已有测试改动
"build", // 构建流程、外部依赖变更(如升级 npm 包、修改 webpack 配置等)
"ci", // 修改 CI 配置、脚本
"revert", // 回滚 commit
"chore", // 对构建过程或辅助工具和库的更改(不影响源文件、测试用例)
"merge", // 代码合并
"sync", // 同步主线或分支的 Bug
],
],
"subject-case": [0], // 不执行任何大小写检查
},
prompt: {
settings: {},
messages: {
skip: ":skip",
max: "上限 %d 个字符",
min: "至少 %d 个字符",
emptyWarning: "不能为空",
upperLimitWarning: "超出限制",
lowerLimitWarning: "低于限制",
},
questions: {
type: {
description: "请选择提交类型:",
enum: {
feat: {
description: "新功能",
title: "Features",
// emoji: '✨',
},
fix: {
description: "bug修复",
title: "Bug Fixes",
// emoji: '🐛',
},
docs: {
description: "文档变更",
title: "Documentation",
// emoji: '📚',
},
style: {
description: "代码格式(不影响代码运行的变动)",
title: "Styles",
// emoji: '💎',
},
refactor: {
description: "重构(既不是增加feature,也不是修复bug)",
title: "Code Refactoring",
// emoji: '📦',
},
perf: {
description: "性能优化",
title: "Performance Improvements",
// emoji: '🚀',
},
test: {
description: "增加测试",
title: "Tests",
// emoji: '🚨',
},
build: {
description: "改变构建系统或者外部依赖",
title: "Builds",
// emoji: '🛠',
},
ci: {
description: "改变ci配置和脚本",
title: "Continuous Integrations",
// emoji: '⚙️',
},
chore: {
description: "修改src或测试文件以外的文件",
title: "Chores",
// emoji: '♻️',
},
revert: {
description: "回退",
title: "Reverts",
// emoji: '🗑',
},
merge: {
description: "代码合并",
title: "Merge",
},
sync: {
description: "同步主线或分支的 Bug",
title: "Sync Bug",
},
},
},
scope: {
description: "请输入修改范围(可选): (e.g. 功能模块)",
},
subject: {
description: "请简要描述提交(必填)",
},
body: {
description: "请输入详细描述(可选)",
},
isBreaking: {
description: "是否存在重大变化?",
},
breakingBody: {
description: "一个破坏性的提交需要一个主体. 请对提交进行一个详细的描述",
},
breaking: {
description: "描述重大更改",
},
isIssueAffected: {
description: "此更改是否影响任何未决问题?",
},
issuesBody: {
description: "如果问题被关闭. 请对提交进行一个详细的描述",
},
issues: {
description: '增加问题的引用 (e.g. "fix #123", "re #123".)',
},
},
},
};
在.eslintignore、.prettierignore 配置过滤内容: commitlint.config.js
commitlint.config.js
后面的 git 提交可以通过commit进行代码提交
npm run commit
配置 editorconfig
- 对应 IDE 需要安装
editorconfig,例如vscode的 editorconfig 插件
在项目文件夹下新建文件.editorconfig,文件内容如下
# vscode 请安装插件:CTRL+SHIFT+X 搜索 EditorConfig 并安装
# https://editorconfig.org
# 表明是最顶层的配置文件
root = true
# 正则*匹配所有文件
[*]
# 编码格式
charset = utf-8
# 定义换行符
end_of_line = lf
# 缩进空格数
indent_size = 2
# 缩进方式
indent_style = space
# 文件是否以空白行结尾
insert_final_newline = true
# 是否去处行首行尾的空白字符
trim_trailing_whitespace = true
# 正则匹配以.md结尾的文件
[*.md]
# 保存文件时是否在结尾添加一个新行
insert_final_newline = false
# 在新行之前是否移除所有的空格字符
trim_trailing_whitespace = false
Powered by Waline v2.15.8