前端工程化小记

1.引言

工作中，我们是否经常遇到以下情况：

• 我们是否发现接手其他同事的代码非常痛苦，比如：缩进，换行等等代码风格这些一度让人浑身难受
• 某个同事提了经常提语法报错的代码，语法报错只能用肉眼一个个review代码，完全没有提示
• 同事每个人写的commit风格都不一样，也有偷懒的，一个单词搞定的，但是也不描述本次更改是属于什么范畴？比如：是加功能？是代码优化？还是修复bug？还是修改webpack配置？还是修改工具链等等
• 如果是monorepo的仓库，里面有很多项目，commit一顿乱写，完全不管改的哪个项目，是不是很崩溃？

关于代码语法检查、代码格式化、commit注释规范、代码编译等等这些工作量繁杂且巨大的苦力活，除非你不想把人当马用，那还是交给机器去做，是吗？

前端领域早已不是以前的纯js、jquery 时代，模块化、工程化也成为了前端领域的追求，这样才能保证前端程序的可读性，可维护性，健壮性等等

2.背景

前端工程化已经发展了有些年月了，大量提高效率的包如雨后春笋般涌出。所以作为小前端的我也忍不住去探索一番，毕竟谁也不想疯狂加班，被当作马使，也想下早班开启简单开心的生活

本文旨在记录探索前端基本工程化的实践过程，方便自己以后翻阅，请轻喷(ps: 这篇文章聚焦代码检查，代码美化，commit规范，其中有借助chatgpt)

项目基本技术选型为：react + ts，所以将以此为基础展开前端工程化基本配置

3.Git钩子：husky

husky 是一个用于在 Git 钩子中运行命令的工具，它能够在代码提交或推送等特定事件中自动触发指定的命令。通过 husky，你可以在代码提交前、提交后、推送前等场景下运行脚本，以进行代码风格检查、单元测试、构建等操作

安装如下：

用快捷命令完成上面的安装步骤

# npm
npx husky-init && npm install

# yarn
yarn dlx husky-init --yarn2 && yarn

#pnpm
pnpm dlx husky-init && pnpm install

4.文件过滤工具：lint-staged

lint-staged是一个用于在 git 暂存文件上运行指定命令的工具。它可以帮助你在提交代码前，只对即将提交的文件进行代码风格检查、格式化、静态分析等操作，以便在代码提交之前保持代码的质量和一致性

基本使用如下：

# npm
npm install lint-staged --save-dev

#yarn 
yarn add lint-staged --dev

#pnpm
pnpm add lint-staged --save-dev

{
  "scripts": {
    "lint": "eslint src"
  },
  "lint-staged": {
    "src/**/*.{ts,tsx}": [
      "npm run lint", // 运行自定义的 lint 脚本
      "git add" // 添加修复后的文件到暂存区
    ]
  }
}

以上配置表示：对于 src 目录下的所有后缀为 ts 和 tsx 的文件，在提交前会运行 npm run lint 命令来进行语法检查，然后将修复后的文件添加到暂存区

实际开发时，lint-staged 一般会配合 pre-commit 钩子进行 commit 之前的动作，所以我们替换 pre-commit 钩子内容如下：

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

npx lint-staged

5.commit注释规范：commitlint

commitlint 是一个用于规范化 Git 提交消息的工具。它帮助团队确保每个提交消息都符合统一的规范，以提高代码仓库的可读性和可维护性

这里直接展示commitlint搭配husky一起使用

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

  # yarn
  yarn add @commitlint/cli @commitlint/config-conventional --dev

  # pnpm
  pnpm add @commitlint/cli @commitlint/config-conventional --save-dev

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

{
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ],
    "rules": {
      "type-enum": [
        2,
        "always",
        [
          "build",
          "chore",
          "ci",
          "docs",
          "feat",
          "fix",
          "perf",
          "refactor",
          "revert",
          "style",
          "test",
          "ui",
          "version"
        ]
      ]
    }
  }
}

commitlint提供的11注释类型解释如下：

• build: 编译相关的修改, 例如：发布版本、项目构建工具改动等(例如：glup、rollup、webpack、vite、turbo等工具)
• chore: 杂项修改(例如：改变构建流程、增加依赖库等)
• ci: 持续集成相关修改(例如: github-action、gitlab-ci/cd等)
• docs: 文档修改
• feat: 新增功能
• fix: 修复bug
• perf: 优化(例如: 提升性能、体验等)
• refactor: 代码重构
• revert: 回滚版本
• style: 代码格式修改
• test: 测试用例修改

6.代码检查

代码检查借助了eslint, typescript-eslint

eslint是一个用于检查和修复 JavaScript 代码错误、风格和质量问题的工具。它可以帮助开发人员和团队在编码过程中遵循一致的编码规范，提高代码可读性、可维护性和质量

typescript-eslint是一个用于对 TypeScript 代码进行检查和修复的工具。它基于eslint，提供了一套规则和插件，可以检查和修复 TypeScript 代码中的错误、风格和质量问题

综上所诉，需要开发环境下安装如下包：

# npm
npm install eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

# yarn
yarn add eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

# pnpm
pnpm add eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

eslint基本使用步骤如下：

typescript-eslint基本使用步骤如下：

#npm 
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

# yarn
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

#pnpm
pnpm add @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

eslint配置文件如下(以.eslintrc为例)：

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    '@typescript-eslint/ban-ts-comment': 'off'
  }
}

以下为结合 lint-staged 配置的代码检查命令：

{
  "scripts": {
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "lint:fix": "eslint . --ext ts,tsx --fix",
  },
  "lint-staged": {
    "*.(ts|tsx)": [
      "eslint --quiet"
    ]
  }
}

7.代码美化：prettier

prettier是一个代码格式化工具，它可以自动调整代码的格式，使其符合统一的风格规范

基本使用如下：

# npm 
npm install prettier --save-dev

# yarn
yarn add prettier --dev

#pnpm
pnpm add prettier --save-dev

{
  "prettier": {
    "trailingComma": "all",
    "arrowParens": "always",
    "printWidth": 120
  }
}

实际应用时会在 commit 之前进行美化代码，以下为结合 lint-staged 配置的代码检查+代码美化命令：

{
  "prettier": {
    "trailingComma": "all",
    "arrowParens": "always",
    "printWidth": 120
  },
  "lint-staged": {
    "*.(ts|tsx)": [
      "eslint --quiet"
    ],
    "*.(ts|tsx|json|html)": [
      "prettier --write"
    ]
  }
}