团队协作开发之prettier,eslint,husky,commitlint

目录

一、prettier

1）作用

2）使用

二、Eslint

1）作用

2）使用

三、husky

1）作用

2）使用

四、commitlint

1）作用

2）使用

3）commitlint提交规范，推荐使用config-conventional 配置去写 commit

---

前言：最近在搭项目框架的时候完整的配置了一遍流程，记录下来防止下次配置的时候忘记了

一、prettier

1）作用

格式化工具，可以在各种编辑器找到实现它的插件，如vscode,atom,webstom等，用它统一代码格式化的规则，在代码提交前做代码格式化，防止不同的人开发由于编辑器格式化的规则不同导致代码冲突

2）使用

1. 安装依赖：yarn add prettier -D
2. 在项目下创建文件.prettierrc.js

module.exports = {
  tabWidth: 2,// tab缩进大小,默认为2
  useTabs: false,// 使用tab缩进，默认false
  semi: true,// 使用分号, 默认true
  singleQuote: true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
  trailingComma: 'all',
  // 行尾逗号,默认none,可选 none|es5|all
  // es5 包括es5中的数组、对象
  // all 包括函数对象等所有可选
  bracketSpacing: true,
  // 对象中的空格 默认true
  // true: { foo: bar }
  // false: {foo: bar}

  
  jsxBracketSameLine: false,

  // JSX标签闭合位置 默认false
  // false: <div
  //          className=""
  //          style={{}}
  //       >
  // true: <div
  //          className=""
  //          style={{}} >

  
  arrowParens: 'avoid',
  // 箭头函数参数括号 默认avoid 可选 avoid| always
  // avoid 能省略括号的时候就省略 例如x => x
  // always 总是有括号
};

二、Eslint

1）作用

代码检查工具，eslint也可以负责一部分代码格式检查的工作，但是有prettier检查代码格式就可以了，所以只让eslint对代码错误进行检查即可

2）使用

1. 安装eslint、eslint-config-prettier(关闭所有不必要或可能跟prettier产生冲突的规则，即prettier和eslint规则产生冲突时去prettier的规则)      yarn add eslint eslint-config-prettier -D
2. 在项目下创建.eslintrc.js

module.exports = {
  root: true,// 标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找

  env: { //运行环境
    node: true,
    browser: true, // 浏览器环境
  },
   
  parser: 'babel-eslint'

  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],//规则继承

  parserOptions: {//解析器配置项
    "sourceType": "module",//指定JS代码来源的类型，script(script标签引入) | module（es6的 module模块），默认为script。为什么vue的会使用script呢？因为vue是通过babel-loader编译的，而babel编译后的代码就是script方式
    "ecmaVersion": 6,     // 支持的ES语法版本，默认为5
    "experimentalObjectRestSpread": true, //启用对对象的扩展
    "jsx": true,         //启用jsx语法
    "globalReturn":true,          //允许return在全局使用  
  },
  
  rules: {},//自定义规则

  // 定义额外的全局
  globals: {
    process: true,
  },
  plugins: [ //插件
    'vue'
  ],
  
  overrides: [
   {
   'files': ['bin/*.js', 'lib/*.js'],
   'excludedFiles': '*.test.js',
   'rules': {
    'quotes': [2, 'single']
    }
  }
 ]  //针对特定文件进行特定的eslint检测
}

三、husky

1）作用

GitHook工具（下一篇会详细介绍GitHook）husky会在你提交前，调用pre-commit钩子，执行lint-staged,如果代码不符合prettier配置的规则，会进行格式化；然后再用eslint的规则进行检查，如果有不符合规则的且无法自动修复的，就会停止提交。

什么?lint-staged是什么？

lint-staged能够让lint只检测暂存区的文件，即当前提交的文件，这样可以加快速度

2）使用

1、yarn add husky lint-staged -D

2、在根目录下生成.husky目录 npx husky install

3、然后在.husky目录下生成pre-commit

npx husky add .husky/pre-commit

4、最后修改这个文件内容

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run pre-commit

5、修改package.json

"gitHooks": {
    "pre-commit": "lint-staged"
},


"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
    }
},

"lint-staged": {
  "*.{js,jsx,vue}": [ //文件后缀匹配根据自己实际需求写
    "prettier --write ./src",
    "eslint --fix .src"
  ]
}

配置完后再改动文件，提交就可以对改动的代码进行校验了

四、commitlint

1）作用

在代码提交前，对commit提交的信息说明进行校验，如果不符合规范则不给提交

2）使用

1、npm install --save-dev @commitlint/config-conventional @commitlint/cli

2、生成配置文件commitlint.config.js或.commitlintrc.js

echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

3、配置package.json

 

 配置说明：在当前项目执行git commit -m '提交说明' 时，会去触发commit-msg事件钩子并通知husky，从而执行commitlint -E HUSKY_GIT_PARAMS命令，若检验不通过，则不给提交

3）commitlint提交规范，推荐使用config-conventional 配置去写 commit

提交格式：

git commit -m <type>[optional scope]: <description>

• <type>常用的type类型：

build	编译相关的修改，例如发布版本、对项目构建或者依赖的改动
chore	其他修改, 比如改变构建流程、或者增加依赖库、工具等
ci	持续集成修改
docs	文档修改
feat	新特性、新功能
fix	修改bug
perf	优化相关，比如提升性能、体验
refactor	代码重构
revert	回滚到上一个版本
style	代码格式修改, 注意不是 css 修改
test	测试用例修改

• 示例：

git commit -m 'fix: 修改xxxbug'