金牛区建设和交通局网站,免费注册二级域名的网站,番禺网站推广公司,更改网站伪静态摘要#xff1a;之前开发的项目#xff0c;代码检测和提交规范都是已经配置好的#xff0c;最近自己新建的项目就记录下相关配置过程。
1. ESlint配置 2013年6月创建开源项目#xff0c;提供一个插件化的JavaScript代码检测工具#xff0c;创建项目是生成的eslintrc.js文…摘要之前开发的项目代码检测和提交规范都是已经配置好的最近自己新建的项目就记录下相关配置过程。
1. ESlint配置 2013年6月创建开源项目提供一个插件化的JavaScript代码检测工具创建项目是生成的eslintrc.js文件
//Eslint配置文件遵循commonJS的导出规则所导出的的对象就是ESLint的配置对象
//官方文档https://www.tkcnn.com/eslint/core-concepts.html
// Eslint配置文件遵循commonJS的导出规则所导出的的对象就是ESLint通的配置对象
// 文档https://eslint.bootcss.com/docs/user-guide/configuring
module.exports {// 表示当前目录即为根目录ESLint规则将被限制到该目录下root: true,// env表示启用ESLint检测的环境env: {// node环境下启动ESLint检测node: true},// ESLint中基础配置需要继承的配置extends: [plugin:vue/vue3-essential,vue/standard],// 解析器:表述需要解析的内容parserOptions: {parser: babel-eslint},// rules中需要修改的启用规则key表示启用的规则及其各自的错误级别/*** 错误级别分为三中* off或者0 - 关闭规则* warn或者1 - 开启规则使用警告级别的错误warn 不会导致程序退出* error或者2 - 开启规则使用错误界别的错误error当被触发的时候程序会退出*/rules: {no-console: process.env.NODE_ENV production ? warn : off,no-debugger: process.env.NODE_ENV production ? warn : off,space-before-function-paren: off //关闭此规则}
}
2. Prettier配置 Prettier是代码格式化工具具有开箱即用、直接集成到vscode的特点。保存时让代码直接符合ESLintprettier配置步骤如下
vscode安装prettier可以在配置prettierrc时获得一些提示根目录新增prettierrc文件配置的JSON内容如下
{//semi表示js语句结尾是否尾随分号semi: false,//singleQuote表示是否用单引号代替所有双引号singleQuote: true,//trailingComma:表示多行语法中是否需要再最后一行添加逗号有all\es5\none三个值trailingComma: none
}
注也可以使用这样的配置
module.exports {eslintIntegration: true,printWidth: 160, // 指定代码长度超出换行tabWidth: 2, // tab 键的宽度useTabs: false, // 不使用tabsemi: true, // 结尾加上分号singleQuote: true, // 使用单引号quoteProps: as-needed, // 要求对象字面量属性是否使用引号包裹trailingComma: none, // 确保对象的最后一个属性后有逗号bracketSpacing: true, // 大括号有空格 { name: rose }arrowParens: always, // 箭头函数单个参数添加括号requirePragma: false, // 是否严格按照文件顶部的特殊注释格式化代码insertPragma: false, // 是否在格式化的文件顶部插入Pragma标记以表明该文件被prettier格式化过了proseWrap: preserve, // 按照文件原样折行htmlWhitespaceSensitivity: ignore, // html文件的空格敏感度控制空格是否影响布局endOfLine: auto // 结尾是 \n \r \n\r auto
};
vscode的设置中找到save勾选Format on save; 综上实现保存后自动格式化代码的目的。此外还需要处理几处细节
vscode→首选项→设置→搜Tab Size设置制表符为两个空格2如果vscode安装了多个代码格式化工具可以右键选中『使用...格式化文档』配置默认的格式化程序ESLint和prettier之间冲突space-before-function-paren;在ESLInt的rules中配置关闭
space-before-function-paren: off
3. Git提交规范 Angular团队Conventional Commits specification约定式提交规范链接约定式提交。提交说明的结构如下所示
type[optional scope]: description
[optional body]
[optional footer(s)]
译文
类型[可选 范围]: 描述
[可选 正文]
[可选 脚注]
3.1 Commitizen 使用Commitizen进行代码提交git commit时commitizen会再提交时填写所必须提交的字段
1.全局安装Commitizen建议使用有管理员权限的终端
sudo npm install -g commitizen4.2.42.安装配置cz-customizable插件 1.使用npm下载cz-customizable
npm i cz-customizable6.3.0 --save-dev2.添加下列配置再package.json中
...
config: {commitizen: {path: node_modules/cz-customizable //commitizen的自定义配置的安装位置}
}3.根目录下创建.cz-config.js自定义提示文件
module.exports {//可选类型types: [{ value: feat, name: feat: 新功能 },{ value: fix, name: fix: 修复 },{ value: docs, name: docs: 文档变更 },{ value: style, name: style: 代码格式不影响代码运行的变动 },{ value: refactor, name: 重构即不增加feature也不修复bug },{ value: perf, name: perf: 性能优化 },{ value: test, name: test: 增加测试 },{ value: chore, name: chore: 构建过程或辅助工具的变动 },{ value: revert, name: revert: 回退 },{ value: build, name: build: 打包 }],//消息步骤messages: {type: 请选择提交的类型,customScope: 请输入修改范围可选,subject: 请简要描述提交必填,body: 请输入详细描述可选,footer: 请输入要关闭的issue可选,confirmCommit: 确认要使用以上信息提交 (y/n)},//跳过问题skipQuestions: [body, footer],//subject文字默认长度是72subjectLimit: 72
}4. 使用git cz代替git commit。使用git cz代替git commit即可看到上述提示内容
czh12czh12deiMac vue-admin % **git add .**
czh12czh12deiMac vue-admin % **git cz**
cz-cli4.2.4, cz-customizable6.3.0All lines except first will be wrapped after 100 characters.
? 请选择提交的类型 feat: 新功能
? 请输入修改范围可选 git
? 请简要描述提交必填 add commitizen
? 请输入详细描述可选 使用commitizen提交代码
? 请输入要关闭的issue可选 ###--------------------------------------------------------###
feat(git): add commitizen使用commitizen提交代码
###--------------------------------------------------------###? 确认要使用以上信息提交 (y/n) Yes running pre-commit hook: lint-staged↓ Stashing changes... [skipped]→ No partially staged files found...✔ Running tasks...
[master 5904db7] feat(git): add commitizen3 files changed, 512 insertions(), 7 deletions(-)create mode 100644 .cz-config.js
chenzh12chenzh12deiMac vue-admin % **git log**
commit 5904db74cd7128e4957dbcdcd45d33033cb4bdca (HEAD - master)
Author: zhenghuachen zhchenanhui163.com
Date: Tue Oct 31 18:00:15 2023 0800feat(git): add commitizen使用commitizen提交代码3.2 Git Hooks 上节完成了Commitizen提交的配置但是需要使用git cz替换git commit才能实现如果不使用git cz上述提交规范就没有预约效果。本节实现不符合约定式提交规范时阻止当前提交并抛出错误提示。 本节实现的功能需要借助Git hooks它是是一种在提交代码之前或之后执行特定操作的技术。本节主要借助一下两种钩子
Git Hooks调用时机说明pre-commitgit commit执行前他不接受任何参数并且在获取提交日志消息并进行提交之前被调用。脚本git commit以非零状态退出会导致命令在创建提交之前停止。可以使用 git commit —no-verify绕过commit-msggit commit执行前 、可以用于将消息规范为魔种项目标准格式。还可以用于在检查消息文件后拒绝提交可以使用 git commit —no-verify绕过
简单来说
commit-msg可以用来贵干化标准格式并且可以按需指定是否要拒绝本次提交
pre-commit会在提交前被调用并且可以按需指定是否要拒绝本次提交。
使用git hooks校验提交信息需要使用到如下工具
commitlint用于检查提交信息https://github.com/conventional-changelog/commitlint
husky 是git hooks工具https://github.com/typicode/husky
注 需要保证npm版本是7.X以上
3.2.1 commitlint安装
1. 安装依赖
npm install --save-dev commitlint/config-conventional12.1.4 commitlint/cli12.1.4
2. 创建commitlint.config.js文件。可以直接执行下面代码
echo module.exports {extends: [commitlint/config-conventional]}
commitlint.config.js也可以手动新建commitlint.config.js并输入,表示导出的对象继承了这个第三方的包
module.exports {extends: [commitlint/config-conventional]
}
3. 打开commitlint.config.js, 增加配置项
module.exports {// 继承的规则extends: [commitlint/config-conventional],// 定义规则roles: {// type 的类型定义: 表示git提交的type必须再以下类型范围type-enum: [// 当前验证的错误级别2表示错误2,// 在什么情况下进行验证always,// 泛型内容[feat, // feat: 新功能fix, // fix: 修复docs, // docs: 文档变更style, // style: 代码格式不影响代码运行的变动refactor, // 重构即不增加feature也不修复bugperf, // perf: 性能优化test, // test: 增加测试chore, // chore: 构建过程或辅助工具的变动revert, // revert: 回退build // build: 打包]],// subject 大小写不做校验subject-case: [0]}
}
3.2.2 husky安装
1. 安装依赖npx husky install
czh12czh12deiMac vue-admin % npx husky install
husky - Git hooks installed
2. 启动hooks生成.husky文件夹npx husky install
czh12czh12deiMac vue-admin % npx husky install
husky - Git hooks installed3. 再package.json中生成prepare指令需要npm7.0 可以手动添加也可以通过如下指令生成
npm set-script prepare husky install4. 执行prepare指令npm run prepare
czh12czh12deiMac vue-admin % npm run prepare vue-admin0.1.0 preparehusky installhusky - Git hooks installed
5. 添加commitlint的hooks到husky中并指令在commit-msg的hooks下执行npx —no-install commitlint —edit $1指令 通过husky监听git hooks在git hooks的commit-msg的回调的hooks里面执行commitlint来完成对应的提交代码的检测
czh12czh12deiMac vue-admin % npx husky add .husky/commit-msg npx --no-installcommitlint --edit $1
husky - created .husky/commit-msg 此时的.husky文件结构 此时不符合规范的提交将会被阻止
czh12czh12deiMac vue-admin % git add .
czh12czh12deiMac vue-admin % git commit -m test
⧗ input: test
✖ subject may not be empty [subject-empty]
✖ type may not be empty [type-empty]✖ found 2 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlinthusky - commit-msg hook exited with code 1 (error)综上代码强制规范化提交要求以配置完成不符合提交规范的代码将无法提交。
3.3 通过pre-commit检测提交时代码规范 ESLint和Prettier解决了本地代码格式问题那么如果本地没有配置提交时如何规避这种问题这就需要使用husky和ESLint配合才可以。通过husky检测pre-commit钩子在该钩子执行npx eslint —ext .js,.vue srcsrc目录下检测.js和.vue的文件指令进行相关代码格式化规范检测
1. 执行npx husky add .husky/pre-commit npx eslint —ext .js,.vue src添加commit时npx eslint —ext .js,.vue src 会在执行到该hooks是运行
2. 执行上述命令会在.husky文件夹中生成pre-commit文件其内容如下
#!/bin/sh
. $(dirname $0)/_/husky.shnpx eslint --ext .js,.vue src
3.4 通过lint-staged自动修复格式错误 上节通过pre-commit处理了检测代码提交规范的问题但是有两处需要优化。 首先若只修改个别文件没必要检测所有文件的代码格式 其次检测出错误依然需要手动修改。 lint-staged可以让代码检查值作用域本次修改的代码并自动修复并且推送。lint-staged的使用如下修改package.json中lint-staged的配置为
lint-staged: {src/**/* .(js,vue): [eslint --fix,git add]
},如上配置会在本地commit前校验提交代码是否符合ESLint规范符合则提交不符合则尝试修复修复成功则提交失败则提示。 同时还要修改pre-commit中的内容使其使用lint-staged检测提交
#!/bin/sh
. $(dirname $0)/_/husky.shnpx lint-staged 综上git提交规范配置完成。总结一下 代码格式规范通过ESLintPrettierVSCode配合进行了处理达到了保存代码自动格式化代码格式的目的。git提交规范使用了husky来检测Git hooks钩子并通过以下插件完成配置
约定式提交规范
commitizengit提交规范化工具
commitlint用于检测提交信息
pre-commit: git hooks 钩子
lint-staged只检测本次修改更新后的代码并将出现的错误自动修复并推送。
