git的分享

懒懒子
352 阅读6分钟

git的原理

1、git 分为4个区

  • 工作区（working area)
  • 暂存区（stage）
  • 本地仓库（local repository)
  • 远程仓库（remote respository)

2、5种状态 以上4个区，进入每一个区成功之后会产生一个状态，再加上最初始化的一个状态，以共是5个

3、.git文件下面的内容

（1） config文件：包含项目特有的配置选项；

（2）info目录: 保存了一份不希望在.gitignore文件中管理的忽略模式的全局可执行文件；

（3）hooks目录：保存了客户端与服务器端钩子脚本；

（4）HEAD文件：指向当前git分支；

（5）object目录：存储所有数据内容；

（6）refs目录：存储指向数据分支的提交对象的指针；

（7）index文件：保存了暂存区域信息，快照索引。

git的提交规范附加eslint的代码规范实践

git提交规范

git commit提交规范，我下面举例的是angular的提交规范，这是目前使用最广的写法，比较合理和系统化，并且有配套的工具。

规范commit提交信息的好处：

1、可读性好，清晰，不必深入看代码即可了解当前commit的作用
2、为 Code Reviewing做准备
3、提高项目的整体质量，提高个人工程素质

每次提交，Commit message 都包括三个部分：header，body 和 footer,我这里只讲header部分，个人认为header部分写清楚了就差不多了，过多反而会让这件事变的复杂

header的格式

<type>(<scope>): <subject>

（1）type（必需）:

  • feat： 新增 feature
  • fix: 修复 bug
  • docs: 仅仅修改了文档，比如 README, CHANGELOG, CONTRIBUTE等等
  • style: 仅仅修改了空格、格式缩进、逗号等等，不改变代码逻辑
  • refactor: 代码重构，没有加新功能或者修复 bug
  • perf: 优化相关，比如提升性能、体验
  • test: 测试用例，包括单元测试、集成测试等
  • chore: 改变构建流程、或者增加依赖库、工具等
  • revert: 回滚到上一个版本
  • build：修改项目的的构建系统（xcodebuild、webpack、glup等）的提交
  • ci: 更改持续集成软件的配置文件和package中的scripts命令，例如scopes: Travis, Circle等

（2）scope（可选）：用于说明 commit 影响的范围，可以是模块，也可以是组件

（3）subject(必需）：subject是 commit 目的的简短描述，不超过50个字符。

工具

利用 commitizen 和 husky 来规范代码库的 commit

安装以下依赖：

npm install @commitlint/cli @commitlint/config-conventional husky  -D

@commitlint/cli是校验工具

@commitlint/config-conventional是符合angular的校验规则

然后在项目下面创建文件commitlint.config.js用于书写校验规则,这个也可以写一些自定义的规则，和eslint的很像

module.exports = {
    extends: ["@commitlint/config-conventional"],
};

在 package.json 中增加 husky 字段。

{
    "husky": {
        "hooks": {
            "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
        }
    },
}

husky 是 git hook 工具，使用 husky，我们可以方便的在 package.json 中配置 git hook 脚本，例如: pre-commit、 pre-push、 commit-msg 等的。这里我们使用了commit-msg钩子，我们还可以在pre-commit钩子里面用eslint检测代码，确保commit的代码是符合规范的

此时你随便提交一个东西就会作出检测了

cz-conventional-changelog

安装了cz-conventional-changelog 可以自动为你生成符合规范的commit信息， 安装完用cz-conventional-changelog包，就可以用git cz来替换git commit，使用git cz会以交互的形式来让你输入正确格式的commit提交信息

lint-staged

只检测本次有修改的文件，因为我发现如果在pre-commit钩子里面用eslint检测所有文件代码会有点慢， 相应的也要有对应的配置

 "lint-staged": {
    "*.js": [
      "eslint --fix"
    ]
  },

2、分支的命名

(1)功能分支：feat-tbId-日期-人名-功能简述

(2)bug分支：bugfix-issueId-日期-人名-bug简述

(3)紧急线上bug分支： hotfix-日期-人名-bug简述

eslint修正代码格式

eslint的基本介绍

ESLint 的原理就是一款插件化的javascript代码静态检查工具，其核心是对代码解析得到的 AST （Abstract Syntax Tree 抽象语法树）进行模式匹配，定位不符合约定规范的代码。ESLint 是完全插件化的。每一个规则都是一个插件并且可以在运行时添加更多的规则

ESLint就是用一系列规则（extends， rules）来规范化你的代码，但是由于代码里面会出现全局变量，比如es6的Promise，Set，浏览器里面的window等，这些就需要env或者global来配置，最后eslint是默认只会检测js代码，如果你要扩展它的功能，如果要用typescript，vue，react那就要plugin，extends，parser， parserOption来配置

eslint的使用

1、使用步骤：

  • 先安装依赖

    npm install eslint --save-dev

  • 用命令eslint --init生成配置文件或者直接手动生成一个配置文件.eslintrc.js

2、eslint的配置文件

使用 JavaScript、JSON 或者 YAML 文件为整个目录（处理你的主目录）和它的子目录指定配置信息。可以配置一个独立的 .eslintrc.* 文件，或者直接在 package.json 文件里的 eslintConfig 字段指定配置，ESLint 会查找和自动读取它们

module.exports = {
  parser: {},  //定义ESLint的解析器
  parserOption: {} // 解析器选项
  extends: [], // 定义文件继承的子规范
  plugins: [], // 定义了该eslint文件所依赖的插件
  env: {},     // 指定脚本的运行环境
  rules: {}    // 规则,
  global: {}   //脚本在执行期间访问的额外的全局变量
};

3、各个配置项的解释

  • parser（解析器）, parserOption（解析选项）

    • ESLint默认使用Espree作为其解析器，你也可以设置自定义解析器，eslint支持下面的三个自定义解析器
      • Esprima
      • babel-ESLint - 一个对Babel解析器的包装，使其能够与 ESLint 兼容。
      • @typescript-eslint/parser - 将 TypeScript 转换成与 estree 兼容的形式，以便在ESLint中使用
    • 注意，在使用自定义解析器时，为了让 ESLint 在处理非 ECMAScript 5 特性时正常工作，配置属性 parserOptions 仍然是必须的。解析器会被传入 parserOptions，但是不一定会使用它们来决定功能特性的开关
    • parserOption
      • ecmaVersion - 指定你想要使用的 ECMAScript 版本,可以使用 6、7、8、9 或 10。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10)
      • sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
      • ecmaFeatures - 这是个对象，表示你想使用的额外的语言特性

  • extends 提供 eslint 现有规则的一系列预设。

    • “extends”除了可以引入推荐规则，还可以以文件形式引入其它的自定义规则，然后在这些自定义规则的基础上用rules去定义个别规则，从而覆盖掉”extends”中引入的规则。
{
 extends: [
 	'standard',
    'eslint:recommended',
 ]
}

  • env 配置需要启动的环境

        env: {"browser": true,"node": true} 启用了browser和node的环境

    如果这里不开启es6，就算解析器里面的ecmaVersion设置为2019（10），在项目里面使用Promise，Set等ES6全局变量也会爆红，

    如果你的项目是使用jquery的，你可以在这里开启jquery，这样使用$就不会爆红了

    开启browser，可以让eslint认识window，document等

    所以一般PC端的项目的env：

    env: {
     'browser': true,
     'es6': true, 
     'node': true,
     'jquery': true,  //这个视情况而定
 },

  • plugins

    • 插件名称可以省略 eslint-plugin- 前缀

git管理的实践

avatar
文章
阅读
粉丝