【git】如何实现规范git commit -m的格式

.husky/commit-msg

javascript 复制代码
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn commitlint --edit $1

.vscode/settings.json

javascript 复制代码
 		"ahooks",
        "aliyuncs",
        "antd",
        "commitlint", // 新增
        "deadcode",
        "denormalize",
        "echarts",
        "EDITMSG", // 新增
        "favicons",
        "iconfont",
        "IIFE",

commitlint.config.ts

javascript 复制代码
import type { UserConfig } from '@commitlint/types';
import { RuleConfigSeverity } from '@commitlint/types';
import dotenv from 'dotenv';
import fs from 'fs';
import path from 'path';

dotenv.config({ path: path.resolve(__dirname, '.env.local') });

const Configuration: UserConfig = {
    extends: ['@commitlint/config-conventional'],
    rules: {
        'type-case': [RuleConfigSeverity.Error, 'always', ['lower-case']],
        'type-enum': [RuleConfigSeverity.Error, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'chore', 'revert']],
        'subject-rule': [RuleConfigSeverity.Error, 'always']
    },
    plugins: [
        {
            rules: {
                'type-enum': ({ type }) => {
                    const typeList = ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'chore', 'revert'];
                    return [typeList.includes(type || ''), `类型错误,只允许提交类型为【${typeList}】的 commit, 例如:feat: 【1112223334445556667】xxx`];
                },
                'subject-rule': ({ type, subject }) => {
                    let _subject = subject || '';
                    const regRex = /^【[0-9]{19}】(?!\s*$).+/;

                    if (process.env.TASK_NO && !regRex.test(_subject)) {
                        const commitEditMsgPath = path.resolve(process.cwd(), '.git', 'COMMIT_EDITMSG');
                        const commitMsgContent = fs.readFileSync(commitEditMsgPath, 'utf-8');

                        const lines = commitMsgContent.split('\n');

                        _subject = `【${process.env.TASK_NO}】${subject}`;

                        if (lines.length > 0) {
                            lines[0] = `${type}: ${_subject}`;
                        }

                        fs.writeFileSync(commitEditMsgPath, lines.join('\n'));
                    }

                    return [regRex.test(_subject), '提交格式不符合规范,需要包含19位任务ID,且包含基础的 commit 信息, 例如:feat: 【1112223334445556667】xxx'];
                }
            }
        }
    ]
};

export default Configuration;

package.json

javascript 复制代码
"devDependencies": {
        "@commitlint/cli": "^17.8.1", // 新增
        "@commitlint/config-conventional": "^17.8.1", // 新增
        "@types/lodash": "^4.14.202",
        "@types/node": "^20.11.6",
        "@types/react": "^18.0.33",
        "@types/react-dom": "^18.0.11",
        "chalk": "^4.1.2",
        "cross-env": "^7.0.3",
        "dotenv": "^16.4.5", // 新增
        "eslint": "^8.54.0",
        "eslint-config-prettier": "^9.0.0",
        "eslint-import-resolver-alias": "^1.1.2",
        ...
}

.env.local

javascript 复制代码
# .env 的本地版本,这里配置的环境变量会覆盖 .env 中的变量。
APP_ENV=sz-test1
# APP_ENV=sz-dev
# TASK_NO=1788498654317685432
TASK="[{"release/2024-07-18" : "1807622818796223578"}]"

.env

javascript 复制代码
# 对应测试环境,值从 config/server.ts 中的 key 中选
# 开发时请在本地根目录新建一个 `.env.local` 文件,自行修改为需要的开发环境
# APP_ENV=sz-test

# 多语言相关接口的域名。
# 各环境统一走 生产jk.cc.cn 域名(环境由接口的env参数做区分)
# 这个值基本不会动,除非服务端需要调试特定环境的多语言接口。
# 在使用时:
#   1. 当 APP_ENV=production 时,不使用当前变量,固定走生产的域名 jk.cc.cn。
#   2. 测试环境用当前变量指定的域名,而不是随环境对应的域名。
#   3. 本地开发会忽略该变量,走本地开发域名以mock本地语料

# 自动添加任务编号到 Commit, TASK_NO 根据自己要求填写
# TASK_NO=1803607484162225644

README.md

markup 复制代码
# 运营平台前端项目

## yarn

- 统一使用 yarn 作为包管理工具

## 配置本地开发环境

- 切换环境请按 `.env` 中关于 `APP_ENV` 的注释,在`.env.local` 中配置 `APP_ENV` 变量区分连接的环境。
- `yarn install` 时会自动创建一个空白的 `.env.local` 文件

## 代码校验

macos用户,需要在 `yarn install`之后,于项目目录下执行下面两行命令。使 husky 生效。

```sh
chmod ug+x .husky/*
chmod ug+x .git/hooks/*
UI库
  • 依赖antd 4.24.x版本,但是不要直接从antd引入, UI相关的组件从核心库引入
js 复制代码
// 错误引入方式:
import { Button } from 'antd';

// 正确引入方式
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
txt 复制代码
172.22.3.196  im.jk.cn

不同环境 ip 不同

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

其他

参考umi开发文档 Umi

styled-components 使用方法
基础
typescript 复制代码
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #BF4F74;
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component -- except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);
根据属性进行调整
typescript 复制代码
const Button = styled.button<{ $primary?: boolean; }>`
  /* Adapt the colors based on primary prop */
  background: ${props => props.$primary ? "#BF4F74" : "white"};
  color: ${props => props.$primary ? "white" : "#BF4F74"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #BF4F74;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button $primary>Primary</Button>
  </div>
);
扩展样式
typescript 复制代码
// The Button from the last section without the interpolations
const Button = styled.button`
  color: #BF4F74;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #BF4F74;
  border-radius: 3px;
`;

// A new component based on Button, but with some override styles
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);
伪元素、伪选择器和嵌套
typescript 复制代码
const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`
  color: blue;

  &:hover {
    color: red; // <Thing> when hovered
  }

  & ~ & {
    background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it
  }

  & + & {
    background: lime; // <Thing> next to <Thing>
  }

  &.something {
    background: orange; // <Thing> tagged with an additional CSS class ".something"
  }

  .something-else & {
    border: 1px solid; // <Thing> inside another element labeled ".something-else"
  }
`

render(
  <React.Fragment>
    <Thing>Hello world!</Thing>
    <Thing>How ya doing?</Thing>
    <Thing className="something">The sun is shining...</Thing>
    <div>Pretty nice day today.</div>
    <Thing>Don't you think?</Thing>
    <div className="something-else">
      <Thing>Splendid.</Thing>
    </div>
  </React.Fragment>
);
强制样式提升
typescript 复制代码
const Thing = styled.div`
   && {
     color: blue;
   }
 `

 const GlobalStyle = createGlobalStyle`
   div${Thing} {
     color: red;
   }
 `

 render(
   <React.Fragment>
     <GlobalStyle />
     <Thing>
       I'm blue, da ba dee da ba daa
     </Thing>
   </React.Fragment>
 )
复制代码
相关推荐
Smile丶凉轩9 小时前
微服务即时通讯系统的实现(服务端)----(1)
c++·git·微服务·github
和你一起去月球18 小时前
TypeScript - 函数(下)
javascript·git·typescript
我不是程序猿儿19 小时前
【GIT】TortoiseGit的变基(Rebase)操作
git
yyycqupt1 天前
git使用(一)
git
Kkooe1 天前
GitLab|数据迁移
运维·服务器·git
Beekeeper&&P...1 天前
git bash是什么,git是什么,git中的暂存区是什么,git中的本地仓库是什么,git中工作目录指的是什么
开发语言·git·bash
Stara05111 天前
Git推送+拉去+uwsgi+Nginx服务器部署项目
git·python·mysql·nginx·gitee·github·uwsgi
lsswear1 天前
GIT 操作
git