Giter Club home page Giter Club logo

frontend-workflow's Introduction

前端工作流

  • 代码管理 Git
    • 配置
      • 用户名 git config --[local/global/system] user.name "wangzhijie"
      • 邮箱 git config --[local/global/system] user.name "[email protected]"
      • 记住密码 git config --[local/global/system] credential.helper store
  • 分支管理 GitFlow
  • 包管理工具
    • only-allow
      • 限制项目使用 npm|yarn|cnpm|pnpm
      • 查看 npm|yarn|cnpm|pnpm 的 hooks
  • 提交规范
    • Commitizen
      • npm install commitizen --save-dev
      • npx commitizen init <adapterName:cz-customizable> --save-dev --save-exact
      • 自定义 npm install cz-customizable -D
        • 配置 .cz-config.js
    • ChangeLog
      • npm install conventional-changelog-cli --save-dev
      • 配置 changelog-options.js
        • 在之前 CHANGELOG.md 基础上叠加,更新最近一个 tag 的 commit msg
          • conventional-changelog -p angular -i CHANGELOG.md -s
        • 更新全部 commit msg, 覆盖 CHANGELOG.md
          • conventional-changelog -p angular -i CHANGELOG.md -s -r 0
    • CommitLint 提交信息检查
      • npm install @commitlint/cli @commitlint/config-conventional --save-dev
      • 配置 commitlint.config.js
        • echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
  • Git Hooks
    • husky 使用 git hooks
      • npm install husky --save-dev
      • npx husky install
      • npx husky add .husky/pre-commit "npm run pre-commit"
      • npx husky add .husky/pre-commit "npm run commit-msg"
    • prepare-commit-msg: 启动提交信息编辑器之前
      • "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true"
    • pre-commit:执行 commit 前?
      • CodeLint 代码规范校验
        • eslint: 规范并校验 ECMAScript/JavaScript code的编写
        • tslint: 规范并校验 TypeScript code的编写
        • stylelint: 规范并校验css/scss/less code的编写
        • prettier 或 beautifyjs 统一代码排版格式
        • lint-staged: 只检测暂存区的文件,提升速度
        • changelog: 生成changelog(也可以配置在 tag 或 release 时)
    • commit-msg: 启动提交信息编辑器之前
      • CommitLint 提交规范校验
    • git push
// package.json
{
  "scripts": {
    "preinstall": "npx only-allow npm",
    "commit": "cz",
    "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
    "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",
    "config": {
      "commitizen": {
        // "path": "cz-conventional-changelog"
        "path": "./node_modules/cz-customizable"
      }
    }
  }
}
// .cz-config.js
module.exports = {
  // type 类型(定义之后,可通过上下键选择)
  types: [
    { value: "feat ", name: "✨ Features | 新功能" },
    { value: "fix", name: "🐛 Bug Fixes | Bug 修复" },
    { value: "docs", name: "docs:📝 Documentation | 文档" },
    { value: "style", name: "💄 Styles | 风格" },
    { value: "refactor", name: "♻ Code Refactoring | 代码重构" },
    { value: "perf", name: "⚡ Performance Improvements | 性能优化" },
    { value: "test", name: "✅ Tests | 测试" },
    { value: "build", name: "👷‍ Build System | 构建" },
    { value: "ci", name: "🔧 Continuous Integration | CI 配置" },
    { value: "chore", name: "Chores | 其他更新(不影响源文件、测试用例等)" },
    { value: "revert", name: "⏪ Reverts | 回退" },
  ],
  // scope 类型(定义之后,可通过上下键选择)
  scopes: [
    ["components", "组件相关"],
    ["hooks", "hook 相关"],
    ["utils", "utils 相关"],
    ["element-ui", "对 element-ui 的调整"],
    ["styles", "样式相关"],
    ["deps", "项目依赖"],
    ["auth", "对 auth 修改"],
    ["other", "其他修改"],
    // 如果选择 custom,后面会让你再输入一个自定义的 scope。也可以不设置此项,把后面的 allowCustomScopes 设置为 true
    ["custom", "以上都不是?我要自定义"],
  ].map(([value, description]) => {
    return {
      value,
      name: `${value.padEnd(30)} (${description})`,
    };
  }),

  // 是否允许自定义填写 scope,在 scope 选择的时候,会有 empty 和 custom 可以选择。
  // allowCustomScopes: true,

  // allowTicketNumber: false,
  // isTicketNumberRequired: false,
  // ticketNumberPrefix: 'TICKET-',
  // ticketNumberRegExp: '\\d{1,5}',

  // 针对每一个 type 去定义对应的 scopes,例如 fix
  /*
  scopeOverrides: {
    fix: [
      { name: 'merge' },
      { name: 'style' },
      { name: 'e2eTest' },
      { name: 'unitTest' }
    ]
  },
  */

  // 交互提示信息
  messages: {
    type: "确保本次提交遵循 Angular 规范!\n选择你要提交的类型:",
    scope: "\n选择一个 scope(可选):",
    // 选择 scope: custom 时会出下面的提示
    customScope: "请输入自定义的 scope:",
    subject: "填写简短精炼的变更描述:\n",
    body: '填写更加详细的变更描述(可选)。使用 "|" 换行:\n',
    breaking: "列举非兼容性重大的变更(可选):\n",
    footer: "列举出所有变更的 ISSUES CLOSED(可选)。 例如: #31, #34:\n",
    confirmCommit: "确认提交?",
  },

  // 设置只有 type 选择了 feat 或 fix,才询问 breaking message
  allowBreakingChanges: ["feat", "fix"],

  // 跳过要询问的步骤
  skipQuestions: ["body", "footer"],

  // subject 限制长度
  subjectLimit: 100,
  breaklineChar: "|", // 支持 body 和 footer
  // footerPrefix : 'ISSUES CLOSED:'
  // askForBreakingChangeFirst : true,
};
// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'], // 基于 @commitlint/config-conventional 扩展
  // parserPreset: 'conventional-changelog-conventionalcommits', // commit 信息的格式解析器
  // rules: {
  //   'scope-empty': [0], // scope非必填
  //   'subject-case': [
  //     2,
  //     'always',
  //     [
  //       'lower-case', // default
  //       'upper-case', // UPPERCASE
  //       'camel-case', // camelCase
  //       'kebab-case', // kebab-case
  //       'pascal-case', // PascalCase
  //       'sentence-case', // Sentence case
  //       'snake-case', // snake_case
  //       'start-case', // Start Case
  //     ],
  //   ],
  //   'subject-full-stop': [2, 'never', '.'],
  //   'type-enum': [
  //     2,
  //     'always',
  //     [
  //       'build',
  //       'ci',
  //       'chore',
  //       'docs',
  //       'feat',
  //       'fix',
  //       'perf',
  //       'refactor',
  //       'revert',
  //       'style',
  //       'test'
  //     ]
  //   ]
  // }
}

frontend-workflow's People

Contributors

wangzhije avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.