【git】怎样实现规范git commit -m的格式

.husky/commit-msg

1. #!/usr/bin/env sh
2. . "$(dirname -- "$0")/_/husky.sh"
4. yarn commitlint --edit $1

复制代码

.vscode/settings.json

1.                 "ahooks",
2.         "aliyuncs",
3.         "antd",
4.         "commitlint", // 新增
5.         "deadcode",
6.         "denormalize",
7.         "echarts",
8.         "EDITMSG", // 新增
9.         "favicons",
10.         "iconfont",
11.         "IIFE",

复制代码

commitlint.config.ts

1. import type { UserConfig } from '@commitlint/types';
2. import { RuleConfigSeverity } from '@commitlint/types';
3. import dotenv from 'dotenv';
4. import fs from 'fs';
5. import path from 'path';
7. dotenv.config({ path: path.resolve(__dirname, '.env.local') });
9. const Configuration: UserConfig = {
10.     extends: ['@commitlint/config-conventional'],
11.     rules: {
12.         'type-case': [RuleConfigSeverity.Error, 'always', ['lower-case']],
13.         'type-enum': [RuleConfigSeverity.Error, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'chore', 'revert']],
14.         'subject-rule': [RuleConfigSeverity.Error, 'always']
15.     },
16.     plugins: [
17.         {
18.             rules: {
19.                 'type-enum': ({ type }) => {
20.                     const typeList = ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'chore', 'revert'];
21.                     return [typeList.includes(type || ''), `类型错误，只允许提交类型为【${typeList}】的 commit， 例如：feat: 【1112223334445556667】xxx`];
22.                 },
23.                 'subject-rule': ({ type, subject }) => {
24.                     let _subject = subject || '';
25.                     const regRex = /^【[0-9]{19}】(?!\s*$).+/;
27.                     if (process.env.TASK_NO && !regRex.test(_subject)) {
28.                         const commitEditMsgPath = path.resolve(process.cwd(), '.git', 'COMMIT_EDITMSG');
29.                         const commitMsgContent = fs.readFileSync(commitEditMsgPath, 'utf-8');
31.                         const lines = commitMsgContent.split('\n');
33.                         _subject = `【${process.env.TASK_NO}】${subject}`;
35.                         if (lines.length > 0) {
36.                             lines[0] = `${type}: ${_subject}`;
37.                         }
39.                         fs.writeFileSync(commitEditMsgPath, lines.join('\n'));
40.                     }
42.                     return [regRex.test(_subject), '提交格式不符合规范，需要包含19位任务ID，且包含基础的 commit 信息， 例如：feat: 【1112223334445556667】xxx'];
43.                 }
44.             }
45.         }
46.     ]
47. };
49. export default Configuration;

复制代码

package.json

1. "devDependencies": {
2.         "@commitlint/cli": "^17.8.1", // 新增
3.         "@commitlint/config-conventional": "^17.8.1", // 新增
4.         "@types/lodash": "^4.14.202",
5.         "@types/node": "^20.11.6",
6.         "@types/react": "^18.0.33",
7.         "@types/react-dom": "^18.0.11",
8.         "chalk": "^4.1.2",
9.         "cross-env": "^7.0.3",
10.         "dotenv": "^16.4.5", // 新增
11.         "eslint": "^8.54.0",
12.         "eslint-config-prettier": "^9.0.0",
13.         "eslint-import-resolver-alias": "^1.1.2",
14.         ...
15. }

复制代码

.env.local

1. # .env 的本地版本，这里配置的环境变量会覆盖 .env 中的变量。
2. APP_ENV=sz-test1
3. # APP_ENV=sz-dev
4. # TASK_NO=1788498654317685432
5. TASK="[{"release/2024-07-18" : "1807622818796223578"}]"

复制代码

.env

1. # 对应测试环境，值从 config/server.ts 中的 key 中选
2. # 开发时请在本地根目录新建一个 `.env.local` 文件，自行修改为需要的开发环境
3. # APP_ENV=sz-test
5. # 多语言相关接口的域名。
6. # 各环境统一走 生产jk.cc.cn 域名（环境由接口的env参数做区分）
7. # 这个值基本不会动，除非服务端需要调试特定环境的多语言接口。
8. # 在使用时：
9. #   1. 当 APP_ENV=production 时，不使用当前变量，固定走生产的域名 jk.cc.cn。
10. #   2. 测试环境用当前变量指定的域名，而不是随环境对应的域名。
11. #   3. 本地开发会忽略该变量，走本地开发域名以mock本地语料
13. # 自动添加任务编号到 Commit， TASK_NO 根据自己要求填写
14. # TASK_NO=1803607484162225644

复制代码

README.md

1. # 运营平台前端项目
3. ## yarn
5. - 统一使用 yarn 作为包管理工具
7. ## 配置本地开发环境
9. - 切换环境请按 `.env` 中关于 `APP_ENV` 的注释，在`.env.local` 中配置 `APP_ENV` 变量区分连接的环境。
10. - `yarn install` 时会自动创建一个空白的 `.env.local` 文件
12. ## 代码校验
14. macos用户，需要在 `yarn install`之后，于项目目录下执行下面两行命令。使 husky 生效。
16. ```sh
17. chmod ug+x .husky/*
18. chmod ug+x .git/hooks/*

复制代码

UI库

• 依赖antd 4.24.x版本，但是不要直接从antd引入， UI相关的组件从焦点库引入
  

1. // 错误引入方式：
2. import { Button } from 'antd';
4. // 正确引入方式
5. import { Button } from '@/component';

复制代码

权限

• 抛弃umi的authority配置。菜单直接在路由里面配置权限code，具体权限code是什么，需要找后端
  

开发须知

• 请运行：git config --global core.autocrlf false 去除 git 进入暂存区时自动转换为 crlf
  
• 请运行：git config --global core.ignorecase false 去除 git 忽略巨细写
  
• 编辑器必须开启 eslint 检测和保存自动修复功能（具体配置具体看：编辑器配置 Eslint）
  
• master 是主分支，feature+版本号是开发分支，release+版本号是预发布分支
  
• 统一使用 yarn 作为包管理工具
  

野火本地开发

• 修改 hosts
  

1. 172.22.3.196  im.jk.cn

复制代码

差别环境 ip 差别
   business 和 test 服务修改 hosts 即可乐成毗连本地联调只有 workdev 环境可毗连乐成 ( 请求头 Origin 为 localhost 造成毗连失败, 毗连非 dev 的服务毗连会被拒绝 )
  其他

参考umi开发文档 Umi
styled-components 使用方法

基础

1. // Create a Title component that'll render an <h1> tag with some styles
2. const Title = styled.h1`
3.   font-size: 1.5em;
4.   text-align: center;
5.   color: #BF4F74;
6. `;
8. // Create a Wrapper component that'll render a <section> tag with some styles
9. const Wrapper = styled.section`
10.   padding: 4em;
11.   background: papayawhip;
12. `;
14. // Use Title and Wrapper like any other React component – except they're styled!
15. render(
16.   <Wrapper>
17.     <Title>
18.       Hello World!
19.     </Title>
20.   </Wrapper>
21. );

复制代码

根据属性进行调解

1. const Button = styled.button<{ $primary?: boolean; }>`
2.   /* Adapt the colors based on primary prop */
3.   background: ${props => props.$primary ? "#BF4F74" : "white"};
4.   color: ${props => props.$primary ? "white" : "#BF4F74"};
6.   font-size: 1em;
7.   margin: 1em;
8.   padding: 0.25em 1em;
9.   border: 2px solid #BF4F74;
10.   border-radius: 3px;
11. `;
13. render(
14.   <div>
15.     <Button>Normal</Button>
16.     <Button $primary>Primary</Button>
17.   </div>
18. );

复制代码

扩展样式

1. // The Button from the last section without the interpolations
2. const Button = styled.button`
3.   color: #BF4F74;
4.   font-size: 1em;
5.   margin: 1em;
6.   padding: 0.25em 1em;
7.   border: 2px solid #BF4F74;
8.   border-radius: 3px;
9. `;
11. // A new component based on Button, but with some override styles
12. const TomatoButton = styled(Button)`
13.   color: tomato;
14.   border-color: tomato;
15. `;
17. render(
18.   <div>
19.     <Button>Normal Button</Button>
20.     <TomatoButton>Tomato Button</TomatoButton>
21.   </div>
22. );

复制代码

伪元素、伪选择器和嵌套

1. const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`
2.   color: blue;
4.   &:hover {
5.     color: red; // <Thing> when hovered
6.   }
8.   & ~ & {
9.     background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it
10.   }
12.   & + & {
13.     background: lime; // <Thing> next to <Thing>
14.   }
16.   &.something {
17.     background: orange; // <Thing> tagged with an additional CSS class ".something"
18.   }
20.   .something-else & {
21.     border: 1px solid; // <Thing> inside another element labeled ".something-else"
22.   }
23. `
25. render(
26.   <React.Fragment>
27.     <Thing>Hello world!</Thing>
28.     <Thing>How ya doing?</Thing>
29.     <Thing className="something">The sun is shining...</Thing>
30.     <div>Pretty nice day today.</div>
31.     <Thing>Don't you think?</Thing>
32.     <div className="something-else">
33.       <Thing>Splendid.</Thing>
34.     </div>
35.   </React.Fragment>
36. );

复制代码

强制样式提升

1. const Thing = styled.div`
2.    && {
3.      color: blue;
4.    }
5. `
7. const GlobalStyle = createGlobalStyle`
8.    div${Thing} {
9.      color: red;
10.    }
11. `
13. render(
14.    <React.Fragment>
15.      <GlobalStyle />
16.      <Thing>
17.        I'm blue, da ba dee da ba daa
18.      </Thing>
19.    </React.Fragment>
20. )

复制代码

[code][/code]
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。