每个前端组长必须会的项目管理技能

每个前端组长必须会的项目管理技能

所在团队招聘信息

juejin.cn/post/702030…

背景

在一次兢兢业业的搬砖作业中,碰到一个了常见的问题:

项目CI流程中配置的tslint,在我的一溜包含bug的代码git push之后自动触发,可恨的是它竟然遭遇了阻击。被tsLint无情拦截。

困境出现

此时我的困境出现了:

  • tsLint提示code style出现问题!需要返工
  • 本地vscode与tslint的配置并不相符,项目本地也没有配置合理的.prettierrc,或.eslintrc
  • 返工的时间节点略晚

面临抉择

其实此时我可以有3个选择

  1. 本地修复:把本地vscode的prettier工具暂时关闭,就地修改文件code style,直到检查通过;
  2. 配置本地工具:花点时间,把本地prettier工具配置好,配置的和tslint的要求一致;
  3. 配置团队工具:配置自动格式化工具,保证该项目每次提交时会自动优化code style

经过考量,打算优化成团队工具,方便略过已有的tslint,并且可以辅助大家规范lint;

我认为此方案的优势有如下几点

  1. 在git commit时就可发现code style潜在问题,不需要在push后返工
  2. 自动格式化
  3. 配置可共享

团队角度思考

  1. 保证下线:可保障团队code style下线,保证代码风格最低程度的统一。(利用eslint提供的丰富代码风格管控方案,也可直接利用现有风格库)
  2. 本地化:配置项目化,npm install可自带解决项目管理的方案
  3. msg更实用:对齐提交标准,每次commit时,语义化更好。让更多有意义的message存在项目中

下面看一下使用到的工具:

工具列表:

  • husky
  • lint-staged
  • eslint
  • commitlint

先在项目中添加一个a.js;用于之后的测试;

let a=1;
let b=2;
复制代码

husky使用

这边使用4.2.5版本的husky。

npm i husky@4.2.5 -D
复制代码

在pacakge.json中配置信息

{
  "name": "projectName",
  "description": "",
	"husky": {
    "hooks": {
      "pre-commit": "echo 111",
    }
  }
}
复制代码

此时尝试 git commit -am 'husy test'时,可以看到命令控制台有 输出111;

表示husky注册git hooks成功!


lint-staged

工具安装,该工具可以对正则选定的文件进行处理。

比如,在提交的所有文件中,我对css和js有不同的lint操作,可以用*.js或者*.css进行区分

yarn add lint-staged -D
复制代码

在package.json文件中添加配置

{
	"lint-staged": {
    "*.js": "echo 222"
  }
}
复制代码

尝试新增文件a.js,执行git commit -am 'lint-staged'操作,

image.png pre commit钩子的输出&对js的操作已成功;

eslint

这一步就很简单了。

yarn add eslint -D
复制代码

再做一下eslint的初始化

eslint --init
复制代码

image.png

此时修改我们的package.json

{
  "name": "autolint-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "lint": "eslint --fix"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^7.32.0",
    "husky": "4.2.5",
    "lint-staged": "^11.2.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "npm run lint"
  }
}
复制代码

运行commit 提交命令;可以看到a.js文件中对应地方会被eslint所提示;

装个airbnb的code style

安装:

npx install-peerdeps --dev eslint-config-airbnb-base
复制代码

.eslintrc.js配置:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: "airbnb-base",
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  rules: {},
};
复制代码

至此,提交时,已可以进行自动eslint 格式化~

加个提交规范工具

安装:

yarn add  @commitlint/config-conventional @commitlint/cli -D
复制代码

本地配置文件 commitlint.config.js

module.exports = { extends: ['@commitlint/config-conventional'] };
复制代码

安装完后后提交,发现此时提交被拒;

image.png 因为提交时需要符合响应规范;

规范地址:www.npmjs.com/package/@co…

执行

git commit -am 'feat:  new commit for new commit lint'
复制代码

至此,一个可被规范的项目已完成;

分类:
前端