526互联

项目自定义代码规范

发布时间 2023-12-26 17:54:41作者: zshNo1

2023年底了马上2024年了， 今年没写几篇文章， 事情太多。长大是痛苦的要经历很多。收～ 进入正题

今天带来一个创建项目团队合作开发的规范。跟上我的步伐，从0-1开始吧！

eslint

ESLint 是一个可配置的 JavaScript 检查器。它可以帮助你发现并修复 JavaScript 代码中的问题。问题可以指潜在的运行时漏洞、未使用最佳实践、风格问题等。

  • 安装

    npm install eslint  --save-dev

  • 配置

    在项目根目录下创建 .eslintrc 文件，配置规则。

  • 忽略配置

    在项目根目录下创建.eslintrcignore文件，配置忽略检查的文件

  • 测试

    https://zh-hans.eslint.org/docs/latest/use/command-line-interface

    // 语法
npx eslint [options] [file|dir|glob]*

//检查两个文件
npx eslint file1.js file2.js
//检查多个文件
npx eslint src/**
//检查多个文件
npx eslint --ext .js,.vue src

//修复部分规则
npx eslint --fix --ext .js,.vue src

​

prettier

prettier 的作用是对代码进行风格检查，针对的文件类型更加全面，例如js、ts、css、html、json、md等。这些可以通过配置进行检测。

  • 安装

    npm install prettier --save-dev

  • 配置

    在项目根目录下创建.prettierrc文件，配置规则

  • 忽略配置

    再羡慕根目录下创建.prettierignore文件，配置忽略检查的文件

  • 测试

    • 格式化某个文件
      npx prettier --write XX.js
    • 格式化全部文件
      npx prettier --write .
    • 检查文件是否已格式化
      npx prettier --check .

eslint-config-prettier

Turns off all rules that are unnecessary or might conflict with Prettier.

This lets you use your favorite shareable config without letting its stylistic choices get in the way when using Prettier.

Note that this config only turns rules off, so it only makes sense using it together with some other config.

  • 安装

    npm install eslint-config-prettier --save-dev

  • 配置

    eslintrc: Add "prettier" to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.

    {
  "extends": [
    "prettier"
  ]
}

husky

husky git 钩子启动

  • 安装

    npm husky-init && npm install

  • 配置

    npx husky add .husky/pre-commit

npx husky add .husky/commit-msg

    .pre-commit文件

    利用lint-staged提交前对缓存区的文件通过配置规则进行格式验证

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

npx --no-install lint-staged

    .commit-msg 文件

    对提交说明是否规范进行校验

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

npx --no -- commitlint --edit ""

commitizen

对提交说明是否规范进行校验

  • 安装

    npm install --save-dev commitizen

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

  • 配置

    执行如下命令配置config文件：

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

standard-version

自动升级版本、打 tag 和生成 changelog

  • 安装

    npm install --save-dev standard version

  • 配置

    package.json

    {
	....
	scritp:{
		release: 'standard-version'
	}
	...
}

  • 使用

    npm run release