前端代码git工程化和格式化规范-EW帮帮网

- 摘要
- 安装husky
- commitlint提交信息相关包安装
- 安装 conventional-log conventional-changelog-cli
- 安装standard-version
- 安装eslint，prettier，styleint及其相关配置包
- - eslint
  - prettier
  - stylelint
  - 新建配置文件
  - 添加eslint，prettier，styleint等npm script
- 安装lint-staged并配置
- VSCode安装eslint，prettier，stylelint插件

摘要

项目git提交工程化（钩子，提交信息commit message），npm修改版本，代码eslint，prettier，stylelint等需要涉及到的包：

husky，允许在git钩子中执行不同的脚步，如commitlint，eslint，prettier，lint-staged各种工具
@commitlint/cli,@commitlint/config-conventional,commitizen，cz-conventional-changelog, 验证commit信息，以及采取的规范，以及帮助生产commit message的工具
changelog-cli,changelog-conventional,生成CHANGELOG.md文件，以及根据什么规范来生成CHANGELOG.md
standard-version，生成CHANGELOG.md，修改package.json的version，commit其新增的文件，最后的git push和npm publish需要自己手动敲。
eslint,@eslint/js,eslint代码质量检验核心包，@eslint/js包含了内置的一些规则。
prettier,eslint-config-prettier,eslint-plugin-prettier,prettier代码风格格式化包，eslint-config-prettier关闭eslint中和prettier冲突的代码风格化规则，eslint-plugin-prettier将prettier作为eslint的插件执行，当执行eslint命令的时候会同时执行prettier
先贴一份包的版本。
stylelint,styleling-config-standard,stylelint-config-recess-order,stylelint-config-prettier,分别是css等样式规则格式化包，css格式化的规范包，css属性排序的包，关闭和prettier冲突的规则包（stylelint15以上不需要，因为15以上的版本已经移除了css代码风格规则）
lint-staged,只校验 git add 暂存的文件而不是所有文件，配置在 git 的 pre-commit 钩子中

{
  "name": "commit-lint",
  "version": "1.3.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prepare": "husky",
    "commit": "cz",
    "commitlint": "commitlint --edit",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
    "release": "standard-version",
    "eslint": "eslint -c ./eslint.config.mjs --fix ./src/**/*.{js,ts} ",
    "prettier": "prettier src/**/*.{js,css} --write",
    "stylelint": "stylelint \"src/**/*.{css,scss}\" --fix",
    "lint": "npm run styelint && npm run prettier && npm run eslint",
    "lint-staged": "lint-staged"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@commitlint/cli": "^19.6.0",
    "@commitlint/config-conventional": "^19.6.0",
    "@commitlint/prompt-cli": "^19.6.0",
    "@eslint/js": "^9.16.0",
    "commitizen": "^4.3.1",
    "conventional-changelog": "^6.0.0",
    "conventional-changelog-cli": "^5.0.0",
    "cz-conventional-changelog": "^3.3.0",
    "eslint": "^9.16.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "globals": "^15.13.0",
    "husky": "^9.1.7",
    "lint-staged": "^15.2.10",
    "oxlint": "^0.13.2",
    "prettier": "^3.4.2",
    "standard-version": "^9.5.0",
    "stylelint": "^16.11.0",
    "stylelint-config-recess-order": "^5.1.1",
    "stylelint-config-standard": "^36.0.1"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "lint-staged": {
    "*.js": [
      "prettier --write",
      "eslint -c ./eslint.config.mjs --fix"
    ],
    "*.{css,scss,less}": [
      "stylelint --fix",
      "prettier --write"
    ]
  }
}

安装husky

安装

npm i husky -D

package.json 添加脚本 prepare:husky，该版本的只需要husky，husky install命令已废弃

执行
在根目录生成 .husky 文件夹

npm run prepare

添加 .husky/commit-msg

# npm run commitlint 这里会报错 node 找不到，只能通过这种来暂时解决
./node_modules/.bin/commitlint --edit

在这里插入图片描述

commitlint提交信息相关包安装

npm i @commitlint/cli @commitlint/config-conventional -D

配置 commintlint.config.js 使用 @commitlint/config-conventional 校验信息
添加 commitlint 脚本 "commitlint": "commitlint --edit"
这样就会在 git commit -m "xxx"的时候校验，可以通过 --no-verify 选项来跳过校验
安装 commitizen 来帮助生成 commit 信息

npm i commitzen -D

初始化项目使用 cz-conventional-changelog 该commit规范，该命令会安装该包并且在 package.json 中新增配置
或者可以自己手动添加

# npm
commitizen init cz-conventional-changelog --save-dev --save-exact

# yarn
commitizen init cz-conventional-changelog --yarn --dev --exact

# pnpm
commitizen init cz-conventional-changelog --pnpm --save-dev --save-exact

在这里插入图片描述
此时，就可以通过 npx cz 或者配置好 sciript.comit:cz在来获取 commit 提示

安装 conventional-log conventional-changelog-cli

npm i conventional-log conventional-changelog-cli  -D

初次生成可以使用命令 conventional-changelog -p angular -i CHANGELOG.md -s -r 0
后续只往 CHANGELOG.md 文件append内容 conventional-changelog -p angular -i CHANGELOG.md -s
在这里插入图片描述

安装standard-version

安装包并添加脚本，可以通过npx standard-verion 【参数】来或者 npm run release -- 【参数】来生成 CHANGELOG.md,提交新增和修改的文件，修改本项目的 version 以及 git tag 打标签

npm i standard-version

在这里插入图片描述
参数

npm run release -- --first-release
npm run release -- --prerelease alpha # 1.0.1-alpha.0
npm run release # 默认增加patch版本号
npm run release -- --release-as minor
npm run release -- --release-as 1.1.0
npm run release -- --no-verify # 不触发git钩子，如commit-msg钩子
npm run release -- --dry-run # 只显示命令，不执行
npm run release -- -t vv # 自定义 git tag 时的标签前缀，-t不加参数，默认是v前缀

在这里插入图片描述
如果使用了 standard-version，那么CHANGELOG.md就可以由他帮我们生成，底层也是用的conventional-changelog，最后 git push 和 npm publish要自己去执行， standard-version不做此操作。

npm version patch -m “提交的信息” ,npm自带的该命令就是来修改 version 同时如果项目有git仓库，也会提交信息。

安装eslint，prettier，styleint及其相关配置包

eslint

npm init @eslint/config@latest

npm i eslint-config-prettier eslint-plugin-prettier -D

prettier

npm i prettier -D

stylelint

npm i stylelint stylelint-config-recess-order stylelint-config-standard-D

新建配置文件

在项目根目录新建这三个包的配置文件

在这里插入图片描述
eslint.config.mjs

import globals from 'globals'
import pluginJs from '@eslint/js'
import eslintConfigPrettier from 'eslint-config-prettier'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'

/** @type {import('eslint').Linter.Config[]} */
export default [
    { languageOptions: { globals: { ...globals.browser, ...globals.commonjs /** commonjs 的全局变量 */ } } },
    pluginJs.configs.recommended,
    eslintConfigPrettier, // 关闭eslint中和prettier冲突的规则
    {
        rules: {
            // 'no-unused-vars': "off",
            'arrow-body-style': ['error', 'always'],
            eqeqeq: ['error', 'always'], // 强制使用 === 和 !==
            'no-else-return': ['error', { allowElseIf: true }],
        },
    },
    eslintPluginPrettierRecommended, // 将prettier作为eslint的插件执行，调用eslint命令时也会执行prettier命令格式化
]

prettier.config.js

/** @type {import("prettier").Config} */
const config = {
  printWidth: 120, // 一行的最长宽度
  singleQuote: true, // 单引号
  semi: false, // 是否加分号
  tabWidth: 2, // 缩进宽度
  trailingComma: 'es5', // 尾随逗号
  endOfLine: 'crlf', // 行尾符号
}
module.exports = config

stylelint.config.js

/** @type {import('stylelint').Config} */
const config = {
    extends: ['stylelint-config-standard', 'stylelint-config-recess-order' /**排序插件 */],
}
module.exports = config

添加eslint，prettier，styleint等npm script

{
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prepare": "husky",
    "commit": "cz",
    "commitlint": "commitlint --edit",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
    "release": "standard-version",
    "eslint": "eslint -c ./eslint.config.mjs --fix ./src/**/*.{js,ts} ",
    "prettier": "prettier src/**/*.{js,css} --write",
    "stylelint":"stylelint \"src/**/*.{css,scss}\" --fix",
    "lint": "npm run styelint && npm run prettier && npm run eslint",
    "lint-staged": "lint-staged"
  }
}

安装lint-staged并配置

在这里插入图片描述

npm i lint-staged -D

在package.json中配置lint-staged

{
  "lint-staged": {
    "src/**/*.js": [
      "prettier --write", // --write表示修复
      "eslint -c ./eslint.config.mjs --fix" // --fix 修复
    ],
    "src/**/*.{css,scss,less}": [
      "stylelint --fix",
      "prettier --write"
    ]
  }
}

在 git 钩子中配置 lint-staged

# 此处建议是只检查当前 git add 暂存的文件,完整检查通过 npm script 来进行
# ./node_modules/.bin/eslint -c ./eslint.config.mjs  "src/**/*.js"

./node_modules/.bin/lint-staged

当执行git commit -m 的时候就会触发自动lint-staged执行eslint，prettier，stylelint

VSCode安装eslint，prettier，stylelint插件

编辑器的插件跟node_modules里的包在区别在于，编辑器插件可以直接对当前修改的文件进行lint操作。
在这里插入图片描述

常见问题,prettier的endOfLine可能会报错:Insert CR…,将prettier.config.js中的endOfLine配置成crlf。

前端代码git工程化和格式化规范

目录

摘要