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

·  阅读 1015
作者:天圣_sxyengene
原文链接:https://juejin.cn/post/7015378212368695304
复制代码

背景

在一次兢兢业业的搬砖作业中,碰到一个了常见的问题: 项目CI流程中配置的tslint,在我的一溜包含bug的代码git push之后自动触发,可恨的是它竟然遭遇了阻击。被tsLint无情拦截。 ​

困境出现

此时我的困境出现了:

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

面临抉择

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

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

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

工具列表:

  • husky —— 劫持git hooks工具
  • 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'
复制代码

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

分类:
开发工具
分类:
开发工具
收藏成功!
已添加到「」, 点击更改