侧边栏壁纸
博主头像
woku博主等级

学可以无术,但不能不博。 术可以无量,但不能不专。

  • 累计撰写 4 篇文章
  • 累计创建 11 个标签
  • 累计收到 2 条评论

编程规范-ESLint+GitHooks

woku
2022-11-19 / 0 评论 / 0 点赞 / 46 阅读 / 1,849 字

eslint配合prettier完成代码规范化

eslint负责检测代码规范,prettier负责格式化代码统一风格。
在vue脚手架中,默认配置了eslint.

  1. 为了版本统一,安装eslint与perttier相关插件(工程存在eslint也可执行安装下面统一插件)
npm i 
eslint 
babel-eslint 
eslint-config-standard 
eslint-friendly-formatter 
eslint-plugin-import 
eslint-plugin-node 
eslint-plugin-promise 
eslint-plugin-standard 
eslint-plugin-vue 
prettier 
prettier-eslint 
eslint-config-prettier -D
  1. 单独安装eslint-loader(eslint-loader版本必须在3.0.0以上)
npm i eslint-loader -D
  1. 单独安装eslint-plugin-prettier(eslint-plugin-prettier版本号建议 < 4)
npm i eslint-plugin-prettier@3.1.4 -D

prettier相关插件说明

  • eslint-plugin-prettier:为了eslint跟prettier可以联合使用
  • eslint-config-prettier:eslint跟prettier兼容,关闭prettier跟eslint 冲突的rules
  1. 根目录下创建.prettierrc文件
{
  "printWidth": 1000,
  "tabWidth": 2,
  "semi": true,
  "endOfLine": "auto",
  "trailingComma": "none"
}

  1. 调整.eslintrc的配置
module.exports = {
  root: true,
  env: {
    node: true
  },
  plugins: ["vue", "prettier"],
  extends: ["plugin:vue/vue3-essential", "@vue/standard", "prettier"],
  parserOptions: {
    parser: "@babel/eslint-parser"
  },
  rules: {
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
        trailingComma: "none"
      }
    ],
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  }
};

  1. 添加指令
{
   "scripts": {
    "format": "prettier --write \"src/**/*.{js,vue,less,sass}\"",
    "lint2": "eslint --fix \"src/**/*.{js,vue,less,sass}\""
  },
}

进入工程,执行npm run format可以格式化代码风格。执行npm run lint2检查前端语法,只能修复部分问题,不能修复的需要手动修改。

git规范化提交

约定式提交

为了规范git提交日志,本项目采用Angular 团队的 Git 约定式提交
格式如下:

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LIKE>
<footer>
  1. 提交的类型(必选)
  2. 影响的范围(可选)
  3. 简单描述(必选)
  4. 正文(可选)
  5. 脚注(可选)

按照此规范,我们的提交应该写成下面这样:

feat(login.vue): 修改了登录按钮文案
将登录按钮的文案从登录改为立即登录
第188个ISSUE

commitizen简化提交过程

当使用commitizen进行代码提交时,commitizen会提交你在提交时所填写的所有必需提交字段。
从git commit -m ‘xxx’ 转变为git cz 进行提交

  1. 全局安装commitizen
npm install -g commitizen@4.2.4
  1. 本项目安装并配置cz-customizable插件
    • npm 下载 cz-customizable
npm install cz-customizable@6.3.0 -D
  • 添加以下配置到package.json
...
"config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
}
  • 根目录创建.cz-config.js自定义提示文件
module.exports = {
  // 可选类型
  types: [
    { value: "feat", name: "feat:     新功能" },
    { value: "fix", name: "fix:      修复" },
    { value: "docs", name: "docs:     文档变更" },
    { value: "style", name: "style:    代码格式(不影响代码运行的变动)" },
    {
      value: "refactor",
      name: "refactor: 重构(既不是增加feature,也不是修复bug)"
    },
    { value: "perf", name: "perf:     性能优化" },
    { value: "test", name: "test:     增加测试" },
    { value: "chore", name: "chore:    构建过程或辅助工具的变动" },
    { value: "revert", name: "revert:   回退" },
    { value: "build", name: "build:    打包" }
  ],
  // 消息步骤
  messages: {
    type: "请选择提交类型:",
    customScope: "请输入修改范围(可选):",
    subject: "请简要描述提交(必填):",
    body: "请输入详细描述(可选):",
    footer: "请输入要关闭的issue(可选):",
    confirmCommit: "确认使用以上信息提交?(y/n/e/h)"
  },
  // 跳过问题
  skipQuestions: ["body", "footer"],
  // subject文字长度默认是72
  subjectLimit: 72
};

在使用git cz进行提交时,会自动出现messages中列出的步骤,你可以选择和输入。
image.png

我们在上面的自定义提示文件配置中,将body和footer的提交信息跳过了,所以在git cz时候,不会提示让你输入正文和脚注。

husky+commitlint检测提交信息

上面不是使用git cz规范了提交吗,为啥还要检测提交信息呢?
我们不一定会使用git cz去提交代码,我们也可能自己git commit -m ‘xxx’,那这样提交信息是不是可以随便填啦!这样肯定是不行的,我们需求去检测这样的一个提交信息

husky: git hooks的一个工具
commitlint:用于检查提交信息
在进行commit之前,我们要使用commitlint进行提交信息的检查

commitlint安装

  1. 安装依赖
npm install @commitlint/cli@12.1.4 @commitlint/config-conventional@12.1.4 -D
  1. 根目录创建commitlint.config.js文件
module.exports = {
  extents: ["@commitlint/config-conventional"],
  // 定义规则
  rules: {
    "body-leading-blank": [1, "always"],
    "body-max-line-length": [2, "always", 100],
    "footer-leading-blank": [1, "always"],
    "footer-max-line-length": [2, "always", 100],
    "header-max-length": [2, "always", 100],
    "subject-case": [2, "never", ["sentence-case", "start-case", "pascal-case", "upper-case"]],
    "subject-empty": [2, "never"],
    "subject-full-stop": [2, "never", "."],
    "type-case": [2, "always", "lower-case"],
    "type-empty": [2, "never"],
    "type-enum": [2, "always", ["build", "chore", "docs", "feat", "fix", "perf", "refactor", "revert", "style", "test"]]
  }
};

husky安装

  1. 安装依赖
npm install husky@7.0.1 -D

如果安装报错,可尝试使用:npm install husky@7.0.1 -D -legacy-peer-deps

  1. 启动hooks,生成.husky文件夹
npx install husky

此时在项目根目录下,生成.husky文件夹
image.png

  1. 在package.json中新增指令,后执行 npm run prepare (需要npm > 7.0版本
{
  "scripts": {
    "prepare": "husky install",
  },
}

执行成功,提示
image.png

  1. 添加commitlinthookhusky中,并指令在commit-msg的hooks下执行npx --no-install commitlint --edit "$1"指令
npx husky add ./husky/commit-msg 'npx --no-install commitlint --edit "$1"'

至此,不合法规范的commit 将不可提交

pre-commit检测提交代码规范

使用eslint+prettier可以让代码规范化。但是如果我们在编写时,关闭了eslint和prettier的自动修复,那么提交上去的代码也是不合规范的。
通过husky来监测pre-commit钩子,在该钩子下执行 npx eslint --ext .js,.vue src 去检测代码规范,合法则进行代码提交。

npx husky add ./husky/pre-commit 'npx eslint --ext .js,.vue src'

.husky文件下会生成以下文件
image.png

lint-staged自动修复代码格式

npx eslint --ext .js,.vue src命令会有下面的缺陷:

  • 我们只修改了个别文件,没有必要检测所有文件的代码格式
  • 只给我们提示,我们还需要自己手动修复。

使用lint-staged可以解决上面的问题

  1. package.json新增
  "lint-staged": {
    "src/**/*.{js,vue,less,sass}": [
      "eslint --fix",
      "git add"
    ]
  },
  1. 修改./husky/pre-commit 文件内容
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

在git commit中,我们做了2方面的规范

  • commit 提交信息的规范化
  • commit 提交代码的规范化
0

评论区