前端工程化小記
1.引言
工作中，我們是否經常遇到以下情況：
- 我們是否發現接手其他同事的代碼非常痛苦，比如：縮進，換行等等代碼風格這些一度讓人渾身難受
- 某個同事提了經常提語法報錯的代碼，語法報錯只能用肉眼一個個review代碼，完全沒有提示
- 同事每個人寫的commit風格都不一樣，也有偷懶的，一個單詞搞定的，但是也不描述本次更改是屬于什么范疇？比如：是加功能？是代碼優化？還是修復bug？還是修改webpack配置？還是修改工具鏈等等
- 如果是monorepo的倉庫，里面有很多項目，commit一頓亂寫，完全不管改的哪個項目，是不是很崩潰？
關于代碼語法檢查、代碼格式化、commit注釋規范、代碼編譯等等這些工作量繁雜且巨大的苦力活，除非你不想把人當馬用，那還是交給機器去做，是嗎？
前端領域早已不是以前的純js、jquery 時代，模塊化、工程化也成為了前端領域的追求，這樣才能保證前端程序的可讀性，可維護性，健壯性等等
2.背景
前端工程化已經發展了有些年月了，大量提高效率的包如雨后春筍般涌出。所以作為小前端的我也忍不住去探索一番，畢竟誰也不想瘋狂加班，被當作馬使，也想下早班開啟簡單開心的生活
本文旨在記錄探索前端基本工程化的實踐過程，方便自己以后翻閱，請輕噴(ps: 這篇文章聚焦代碼檢查，代碼美化，commit規范，其中有借助chatgpt)
項目基本技術選型為：react + ts，所以將以此為基礎展開前端工程化基本配置
3.Git鉤子：husky
husky 是一個用于在 Git 鉤子中運行命令的工具，它能夠在代碼提交或推送等特定事件中自動觸發指定的命令。通過 husky，你可以在代碼提交前、提交后、推送前等場景下運行腳本，以進行代碼風格檢查、單元測試、構建等操作
安裝如下：
- 下載husky的npm包
- 初始化husky
- 配置npm install時自動初始化husky
用快捷命令完成上面的安裝步驟
# npm
npx husky-init && npm install
# yarn
yarn dlx husky-init --yarn2 && yarn
#pnpm
pnpm dlx husky-init && pnpm install4.文件過濾工具：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- 修改package.json文件如下：
{
"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-staged5.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- 使用 husky 增加 commit-msg 鉤子
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'- 在package.json文件里面commitlint信息，默認使用commitlint提供的11注釋類型(ps: 你可以自定義，比如下方的ui、version)
{
"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 代碼中的錯誤、風格和質量問題
綜上所訴，需要開發環境下安裝如下包：
- eslint
- eslint-plugin-react-hooks
- eslint-plugin-react-refresh
- @typescript-eslint/parser
- @typescript-eslint/eslint-plugin
# 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-deveslint基本使用步驟如下：
- 安裝eslint：在項目根目錄下運行命令 npm install eslint --save-dev 或 yarn add eslint --dev 或 pnpm add eslint --save-dev，將eslint作為開發依賴安裝到項目中
- 初始化eslint配置文件：在項目根目錄下運行命令 eslint --init，根據提示選擇配置選項，配置文件（通常為.eslintrc或.eslintrc.json）將會自動生成
- 添加規則和插件：在生成的配置文件中，可以根據項目需要添加或修改規則，以及引入需要的插件
- 運行eslint：在命令行中運行 eslint yourfile.js 或 eslint . ，其中yourfile.js為需要檢查的文件名或目錄。eslint將會根據配置文件對代碼進行檢查，并輸出錯誤或警告信息
- 自動修復：運行 eslint --fix yourfile.js 或 eslint --fix . 可以嘗試自動修復一部分可修復的問題
typescript-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和@typescript-eslint插件：在生成的eslint配置文件中，需要指定解析器為@typescript-eslint/parser，并使用@typescript-eslint/eslint-plugin提供的規則和插件
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，可以使用 .prettierrc 文件或 package.json 文件中的 prettier 字段，下面以 package.json 為例：
{
"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"
]
}
}
