FE-specification-template

前端开发模版 EsLint + Prettier + Husky + Commitlint + Lint-staged + Cz-customizable + Conventional Changelog

解决冲突 eslint-config-prettier eslint-plugin-prettier

EditorConfig 将负责统一各种编辑器的配置，所有和编辑器相关的配置 (行尾、缩进样式、缩进距离...) 都交给它 Prettier 作为 代码格式化 工具 其余的，也就是 代码质量 方面的语法检查，用 ESLint 来做 "eslintIntegration": true, // 解决 Eslint 默认规则冲突

parser @babel/eslint-parser @babel/core parserOptions: { sourceType: 'module', requireConfigFile: 'false', },

husky

npm i lint-staged husky -save-dev https://github.com/typicode/husky#readme

npm set-script prepare "husky install" "scripts": { "test": "echo "Error: no test specified" && exit 1", "prepare": "husky install" },

Add a hook: npx husky add .husky/pre-commit "npm test"

旧版本 husky 无法在 package 中进行配置 4.2.5 "husky": { "hooks": { "commit-msg": "commitlint -E HUSKY_GIT_PARAMS", "pre-commit": "lint-staged" } },

lint-staged

npm i lint-staged -D https://github.com/okonet/lint-staged husky 添加一个钩子 执行 list-staged npx husky add .husky/pre-commit "npx lint-staged" pre-commit 执行 npx lint-staged 指令

创建文件夹 或者是在 package 文件中添加 lint-staged 参数 .lintstagedrc // "*.{js,vue}": ["prettier --write .", "eslint --cache --fix", "git add"]

校验 commit

规范 commit message 信息 https://github.com/conventional-changelog/commitlint npm i commitlint @commitlint/config-conventional -D

Add hook

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

安装辅助提交依赖 commitizen cz-conventional-changelog https://github.com/commitizen/cz-cli npm set-script commit "git-cz" 提交 commit 方式 npx cz or as an npm script:

... "scripts": { "commit": "cz" }

安装指令和命令行的展示信息 git-cz

自定义提交规范 https://github.com/leoforfree/cz-customizable npm i -D commitlint-config-cz cz-customizable "config": { "commitizen": { "path": "node_modules/cz-customizable" } }

extends: ['@commitlint/config-conventional'], =====> extends: ['cz'],

提交规范

'💪 WIP:', // 开发中 '✨ feat:', // 新特性 '🐛 fix:', // 修补 bug '🔨 refactor:', // 重构 '📝 docs:', // 文档 '🔀 merge: ', // 合并某个分支代码 '✅ test:', // 单元测试 '📈 perf:', // 性能提升 '🗯 chore:', // 其他修改 '💄 ui:', // ui 样式修改 '🎨 style:', // 不影响代码的其他修改 （空白，格式，缺少半冒号等） '⏪ revert: ', // 版本回退 '📦 dep_up:', // 更新编译的文件或包 '🔧 CI:', // 项目结构变动 工具 ci 构建 '🚚 mv:', // 移动或重命名文件 '🚀 release:', // 发布版本或标签

`{ value: ':rocket: release', name: '🚀 release: 发布版本/发布标签', }, { value: ':construction: WIP', name: '💪 WIP: 正在进行的工作', }, { value: ':sparkles: feat', name: '✨ feat: 新的特性', }, { value: ':bug: fix', name: '🐛 fix: 修复 Bug', }, { value: ':wrench: CI', name: '🔧 CI: 目录结构变更(CI, Buiding, Tool...)', },

{
  value: ':pencil: docs',
  name: '📝  docs:     仅文档更改',
},
{
  value: ':twisted_rightwards_arrows: merge',
  name: '🔀  merge:    合并分支',
},
{
  value: 'revert',
  name: '⏪  revert:   版本回滚',
},
{
  value: ':white_check_mark: test',
  name: '✅  test:     添加缺失的测试或更正现有测试',
},
{
  value: ':chart_with_upwards_trend: perf',
  name: '📈  perf:     提高性能的代码更改',
},
{
  value: ':thought_balloon: chore',
  name: '🗯   chore:    不修改src或测试文件的更改。例如更新构建任务、包管理器',
},
{
  value: ':lipstick: ui',
  name: '💄  UI:       更新UI和样式文件。',
},
{
  value: ':art: style',
  name: '🎨  style:    不影响代码含义的更改（空白、格式、缺少分号等）',
},
{
  value: ':package: dep_up',
  name: '📦  dep_up:   更新已编译的文件或包。',
},

{
  value: ':hammer: refactor',
  name: '🔨  refactor: 既不修复错误也不添加功能的代码更改',
},
{
  value: ':truck: mv',
  name: '🚚  mv:       移动或重命名文件。',
},`

changelog

cnpm i standard-version -D

module.exports = {
  types: [
    {
      type: ':rocket: release',
      section: '🚀  release:  发布版本/发布标签',
    },
    {
      type: ':construction: WIP',
      section: '💪  WIP:      正在进行的工作',
    },
    {
      type: ':sparkles: feat',
      section: '✨  feat:     新的特性',
    },
    {
      type: ':bug: fix',
      section: '🐛  fix:      修复Bug',
    },
    {
      type: ':wrench: CI',
      section: '🔧  CI:       目结构变更(CI, Buiding, Tool...)',
    },

    {
      type: ':pencil: docs',
      section: '📝  docs:     仅文档更改',
    },
    {
      type: ':twisted_rightwards_arrows: merge',
      section: '🔀  merge:    合并分支',
    },
    {
      type: 'revert',
      section: '⏪  revert:   版本回滚',
    },
    {
      type: ':white_check_mark: test',
      section: '✅  test:     添加缺失的测试或更正现有测试',
    },
    {
      type: ':chart_with_upwards_trend: perf',
      section: '📈  perf:     提高性能的代码更改',
    },
    {
      type: ':thought_balloon: chore',
      section:
        '🗯   chore:    不修改src或测试文件的更改。例如更新构建任务、包管理器',
    },
    {
      type: ':lipstick: ui',
      section: '💄  UI:       更新UI和样式文件。',
    },
    {
      type: ':art: style',
      section: '🎨  style:     不影响代码含义的更改（空白、格式、缺少分号等）',
    },
    {
      type: ':package: dep_up',
      section: '📦  dep_up:   更新已编译的文件或包。',
    },

    {
      type: ':hammer: refactor',
      section: '🔨  refactor: 既不修复错误也不添加功能的代码更改',
    },
    {
      type: ':truck: mv',
      section: '🚚  mv:       移动或重命名文件。',
    },
  ],
};

typescript yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

https://www.npmjs.com/package/standard-version