前端项目开发规范(分支管理、git提交、eslint代码检查) -- elpis全栈项目笔记

elpis全栈项目实践笔记 – 项目初始化

关于项目创建的一些开发规范，其实适用于所有的前端项目

一、 Git分支管理规范(GitFlow)

• master：用于生产环境
• develop 是开发环境
• feature 基于开发环境，用做开发阶段新增功能的开发，开发完成之后要合并到develop
• hotfix 基于生产环境，用做线上bug的修复，最后要合并到master、develop

二、 commit提交规范

2.1 规范

2.2 示例

<type>(<scope>): <subject>
type：
	提交 commit 的类型，包括以下几种 
	feat: 新功能
	fix: 修复问题
	docs: 修改文档
	style: 修改代码格式，不影响代码逻辑
	refactor: 重构代码，理论上不影响现有功能
	perf: 提升性能
	test: 增加修改测试用例
	chore: 修改工具相关（包括但不限于文档、代码生成等）
	deps: 升级依赖

简单一点就是：

• feat: 项目初始化
• fix: 修改xxxbug

2.3 commit规范验证插件

validate-commit-msg
 

更详细参考：

三、 代码提交时，自动进行elint检查、commit规范检查

如何自动进行elint检查、验证commit是否符合规范、不符合规范不能提交？

3.1 elsint相关插件

3.2 .eslintrc文件（代码规范的相关配置文件）：

{
  "extends": [
    "plugin:vue/base",
    "plugin:vue/recommended",
  ],
  "plugins": [
    "vue"
  ],
  "env": {
    "browser": true,
    "node": true
  },
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 2017,
    "sourceType": "module"
  },
  "rules": {
    "no-unused-vars": [
      2,
      {
        "args": "none"
      }
    ],
    "strict": "off",
    "valid-jsdoc": "off",
    "jsdoc/require-param-description": "off",
    "jsdoc/require-param-type": "off",
    "jsdoc/check-param-names": "off",
    "jsdoc/require-param": "off",
    "jsdoc/check-tag-names": "off",
    "linebreak-style": "off",
    "array-bracket-spacing": "off",
    "prefer-promise-reject-errors": "off",
    "comma-dangle": "off",
    "newline-per-chained-call": "off",
    "no-loop-func": "off",
    "no-empty": "off",
    "no-else-return": "off",
    "no-unneeded-ternary": "off",
    "no-eval": "off",
    "prefer-destructuring": "off",
    "no-param-reassign": "off",
    "max-len": "off",
    "no-restricted-syntax": "off",
    "no-plusplus": "off",
    "no-useless-escape": "off",
    "no-nested-ternary": "off",
    "radix": "off",
    "arrow-body-style": "off",
    "arrow-parens": "off",
    "vue/multi-word-component-names": "off",
    "vue/valid-v-for": "off",
    "vue/no-multiple-template-root": "off"
  },
  "globals": {
    "$": true,
    "axios": true,
    "Vue": true
  }
}

3.3 .elintignore文件（elint检查要忽略掉的目录配置文件）

node_modules/
public/

另外有个问题，运行elint检查的时候，虽然.elintignore文件配置的是对的，但是node_modules文件夹里的文件，还是被扫描检查出错误了。是node版本的问题，我用的node v12的版本，但是切换到v18版本就没问题了。感觉应该是elint插件的版本和node版本不匹配吧。

3.4 手动进行elint检查：

1. 在package.json中,可配置scripts命令 "lint": "eslint --quiet --ext js,vue ."，在终端运行npm run lint。如下图：
   
2. elint检查到有错误是这样的，变量a定义了但没有被使用
   

3.5 使用ghooks插件自动进行elint检查和commit规范检查：

安装ghooks、在package.json中配置config

 "config": {
    "ghooks": {
      "commit-msg": "validate-commit-msg",
      "pre-commit": "npm run lint"
    }
  }

ps：不符合的情况示例：
提交代码时会自动进行检查：代码是提交不上去的
 

elint 检查没通过：

全文特别鸣谢哲玄大佬
注：抖音 “哲玄前端”，《大前端全栈实践课》