代码提交规范工具

husky（githooks）

git使用的挂钩, git在特定事件(pre-commit commit-msg push receive)之后执行脚本功能

1. 安装husky

npm install husky -D

2. 在package.json配置husky钩子

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
    }
  }
}

commitlint无效 commit-msg不执行——解决办法： 在.husky文件夹配置

// 初始化husky
npx husky-init

// 新建.husky文件夹下commit-msg文件
npx husky add .husky/commit-msg

// 在commit-msg文件中添加内容
npx --no-install commitlint --edit $1

// 新建.husky文件夹下pre-commit文件
npx husky add .husky/pre-commit

// 在pre-commit文件中添加内容
npx lint-staged

lint-staged

lint-staged 在我们提交代码时，对正则选定的文件进行检查，修复，以保证提交的代码符合规范

1. 安装lint-staged

npm install lint-staged -D

2. 添加.lintstagedrc配置文件

{
  "*.{js,ts,vue}": ["npm run lint"],
  "*.{html,vue,css,scss,sass,less}": ["stylelint --fix"]
}

3. 在package.json配置lint-staged

{
"lint-staged"：{
	  "*.{js,ts,vue}": ["npm run lint"],
	  "*.{html,vue,css,scss,sass,less}": ["stylelint --fix"]
	}
}

commitlint

commitlint git提交规范工具

1. 安装commitlint

npm install @commitlint/cli @commitlint/config-converntional -D

2. 添加commitlint.config.js配置文件

module.exports = { 
  extends: ['@commitlint/config-conventional'],
    rules: {
      'type-enum': [ 2, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore']],
    };
}

// feat: 新功能
// fix: 修补bug
// docs: 文档（documentation）
// style: 样式/格式（不影响代码运行的变动）
// refactor: 重构（即不是新增功能，也不是修改bug的代码变动）
// test: 增加测试
// chore: 构建过程或辅助工具的变动

3. 提交格式

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

git commit -m feat(login): 新增登录功能
git commit -m feat: 新增登录功能

Eslint

ESLint是JavaScript的代码检查工具

1. 安装eslint

npm install eslint -D

2. 新建 .eslintrc.js 文件

• 规则：https://eslint.bootcss.com/docs/rules/

module.exports = {
    "extends": "eslint:recommended",
    "env": {
        "browser": true,
        "node": true
    }
    "plugins": [
        "react"
    ],
    "globals": {
        "var1": "writable",
        "var2": "readonly"
    }
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

3. 在package.json添加命令

{
    "script": {
        "eslint": "eslint --fix '/src/*'"
    }
}

4. 片段禁用规则

/* eslint-disable */
var map = new Amap()

stylelint

css样式代码检查工具

1. 安装stylelint

npm isntall -d stylelint
npm isntall -d stylelint-config-standard
npm isntall -d stylelint-order

2. 新建 .stylelintrc.js文件

• 规则：http://stylelint.docschina.org/user-guide/rules/

module.exports = {
  processors: [],
  plugins: [
      "stylelint-order" // CSS属性排序插件
  ],
  extends: "stylelint-config-standard", // 这是官方推荐的方式
  rules: {
    "at-rule-empty-line-before": "always"|"never",
    "at-rule-name-case": "lower"|"upper",
    "block-no-empty": true,
    "block-no-empty": null,
  }
}

4. 片段禁用规则

/* stylelint-disable */
.cropper_topContainer .img-preview {
    border: none;
}