1.引言

工作中，我們是否經(jīng)常遇到以下情況：pRt28資訊網(wǎng)——每日最新資訊28at.com

• 我們是否發(fā)現(xiàn)接手其他同事的代碼非常痛苦，比如：縮進(jìn)，換行等等代碼風(fēng)格這些一度讓人渾身難受
• 某個(gè)同事提了經(jīng)常提語(yǔ)法報(bào)錯(cuò)的代碼，語(yǔ)法報(bào)錯(cuò)只能用肉眼一個(gè)個(gè)review代碼，完全沒(méi)有提示
• 同事每個(gè)人寫(xiě)的commit風(fēng)格都不一樣，也有偷懶的，一個(gè)單詞搞定的，但是也不描述本次更改是屬于什么范疇？比如：是加功能？是代碼優(yōu)化？還是修復(fù)bug？還是修改webpack配置？還是修改工具鏈等等
• 如果是monorepo的倉(cāng)庫(kù)，里面有很多項(xiàng)目，commit一頓亂寫(xiě)，完全不管改的哪個(gè)項(xiàng)目，是不是很崩潰？

關(guān)于代碼語(yǔ)法檢查、代碼格式化、commit注釋規(guī)范、代碼編譯等等這些工作量繁雜且巨大的苦力活，除非你不想把人當(dāng)馬用，那還是交給機(jī)器去做，是嗎？pRt28資訊網(wǎng)——每日最新資訊28at.com

前端領(lǐng)域早已不是以前的純js、jquery 時(shí)代，模塊化、工程化也成為了前端領(lǐng)域的追求，這樣才能保證前端程序的可讀性，可維護(hù)性，健壯性等等pRt28資訊網(wǎng)——每日最新資訊28at.com

2.背景

前端工程化已經(jīng)發(fā)展了有些年月了，大量提高效率的包如雨后春筍般涌出。所以作為小前端的我也忍不住去探索一番，畢竟誰(shuí)也不想瘋狂加班，被當(dāng)作馬使，也想下早班開(kāi)啟簡(jiǎn)單開(kāi)心的生活pRt28資訊網(wǎng)——每日最新資訊28at.com

本文旨在記錄探索前端基本工程化的實(shí)踐過(guò)程，方便自己以后翻閱，請(qǐng)輕噴(ps: 這篇文章聚焦代碼檢查，代碼美化，commit規(guī)范，其中有借助chatgpt)pRt28資訊網(wǎng)——每日最新資訊28at.com

項(xiàng)目基本技術(shù)選型為：react + ts，所以將以此為基礎(chǔ)展開(kāi)前端工程化基本配置pRt28資訊網(wǎng)——每日最新資訊28at.com

3.Git鉤子：husky

husky 是一個(gè)用于在 Git 鉤子中運(yùn)行命令的工具，它能夠在代碼提交或推送等特定事件中自動(dòng)觸發(fā)指定的命令。通過(guò) husky，你可以在代碼提交前、提交后、推送前等場(chǎng)景下運(yùn)行腳本，以進(jìn)行代碼風(fēng)格檢查、單元測(cè)試、構(gòu)建等操作pRt28資訊網(wǎng)——每日最新資訊28at.com

安裝如下：pRt28資訊網(wǎng)——每日最新資訊28at.com

1. 下載husky的npm包
2. 初始化husky
3. 配置npm install時(shí)自動(dòng)初始化husky

用快捷命令完成上面的安裝步驟pRt28資訊網(wǎng)——每日最新資訊28at.com

# npmnpx husky-init && npm install# yarnyarn dlx husky-init --yarn2 && yarn#pnpmpnpm dlx husky-init && pnpm install

4.文件過(guò)濾工具：lint-staged

lint-staged是一個(gè)用于在 git 暫存文件上運(yùn)行指定命令的工具。它可以幫助你在提交代碼前，只對(duì)即將提交的文件進(jìn)行代碼風(fēng)格檢查、格式化、靜態(tài)分析等操作，以便在代碼提交之前保持代碼的質(zhì)量和一致性pRt28資訊網(wǎng)——每日最新資訊28at.com

基本使用如下：pRt28資訊網(wǎng)——每日最新資訊28at.com

1. 安裝依賴

# npmnpm install lint-staged --save-dev#yarn yarn add lint-staged --dev#pnpmpnpm add lint-staged --save-dev

2. 修改package.json文件如下：

{  "scripts": {    "lint": "eslint src"  },  "lint-staged": {    "src/**/*.{ts,tsx}": [      "npm run lint", // 運(yùn)行自定義的 lint 腳本      "git add" // 添加修復(fù)后的文件到暫存區(qū)    ]  }}

以上配置表示：對(duì)于 src 目錄下的所有后綴為 ts 和 tsx 的文件，在提交前會(huì)運(yùn)行 npm run lint 命令來(lái)進(jìn)行語(yǔ)法檢查，然后將修復(fù)后的文件添加到暫存區(qū)pRt28資訊網(wǎng)——每日最新資訊28at.com

實(shí)際開(kāi)發(fā)時(shí)，lint-staged 一般會(huì)配合 pre-commit 鉤子進(jìn)行 commit 之前的動(dòng)作，所以我們替換 pre-commit 鉤子內(nèi)容如下：pRt28資訊網(wǎng)——每日最新資訊28at.com

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

5.commit注釋規(guī)范：commitlint

commitlint 是一個(gè)用于規(guī)范化 Git 提交消息的工具。它幫助團(tuán)隊(duì)確保每個(gè)提交消息都符合統(tǒng)一的規(guī)范，以提高代碼倉(cāng)庫(kù)的可讀性和可維護(hù)性pRt28資訊網(wǎng)——每日最新資訊28at.com

這里直接展示commitlint搭配husky一起使用pRt28資訊網(wǎng)——每日最新資訊28at.com

1. 安裝相關(guān)依賴

# 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

2. 使用 husky 增加 commit-msg 鉤子

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

3. 在package.json文件里面commitlint信息，默認(rèn)使用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注釋類型解釋如下：pRt28資訊網(wǎng)——每日最新資訊28at.com

• build: 編譯相關(guān)的修改, 例如：發(fā)布版本、項(xiàng)目構(gòu)建工具改動(dòng)等(例如：glup、rollup、webpack、vite、turbo等工具)
• chore: 雜項(xiàng)修改(例如：改變構(gòu)建流程、增加依賴庫(kù)等)
• ci: 持續(xù)集成相關(guān)修改(例如: github-action、gitlab-ci/cd等)
• docs: 文檔修改
• feat: 新增功能
• fix: 修復(fù)bug
• perf: 優(yōu)化(例如: 提升性能、體驗(yàn)等)
• refactor: 代碼重構(gòu)
• revert: 回滾版本
• style: 代碼格式修改
• test: 測(cè)試用例修改

6.代碼檢查

代碼檢查借助了eslint, typescript-eslintpRt28資訊網(wǎng)——每日最新資訊28at.com

eslint是一個(gè)用于檢查和修復(fù) JavaScript 代碼錯(cuò)誤、風(fēng)格和質(zhì)量問(wèn)題的工具。它可以幫助開(kāi)發(fā)人員和團(tuán)隊(duì)在編碼過(guò)程中遵循一致的編碼規(guī)范，提高代碼可讀性、可維護(hù)性和質(zhì)量pRt28資訊網(wǎng)——每日最新資訊28at.com

typescript-eslint是一個(gè)用于對(duì) TypeScript 代碼進(jìn)行檢查和修復(fù)的工具。它基于eslint，提供了一套規(guī)則和插件，可以檢查和修復(fù) TypeScript 代碼中的錯(cuò)誤、風(fēng)格和質(zhì)量問(wèn)題pRt28資訊網(wǎng)——每日最新資訊28at.com

綜上所訴，需要開(kāi)發(fā)環(huán)境下安裝如下包：pRt28資訊網(wǎng)——每日最新資訊28at.com

1. eslint
2. eslint-plugin-react-hooks
3. eslint-plugin-react-refresh
4. @typescript-eslint/parser
5. @typescript-eslint/eslint-plugin

# npmnpm install eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev# yarnyarn add eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev# pnpmpnpm add eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

eslint基本使用步驟如下：pRt28資訊網(wǎng)——每日最新資訊28at.com

1. 安裝eslint：在項(xiàng)目根目錄下運(yùn)行命令 npm install eslint --save-dev 或 yarn add eslint --dev 或 pnpm add eslint --save-dev，將eslint作為開(kāi)發(fā)依賴安裝到項(xiàng)目中
2. 初始化eslint配置文件：在項(xiàng)目根目錄下運(yùn)行命令 eslint --init，根據(jù)提示選擇配置選項(xiàng)，配置文件（通常為.eslintrc或.eslintrc.json）將會(huì)自動(dòng)生成
3. 添加規(guī)則和插件：在生成的配置文件中，可以根據(jù)項(xiàng)目需要添加或修改規(guī)則，以及引入需要的插件
4. 運(yùn)行eslint：在命令行中運(yùn)行 eslint yourfile.js 或 eslint . ，其中yourfile.js為需要檢查的文件名或目錄。eslint將會(huì)根據(jù)配置文件對(duì)代碼進(jìn)行檢查，并輸出錯(cuò)誤或警告信息
5. 自動(dòng)修復(fù)：運(yùn)行 eslint --fix yourfile.js 或 eslint --fix . 可以嘗試自動(dòng)修復(fù)一部分可修復(fù)的問(wèn)題

typescript-eslint基本使用步驟如下：pRt28資訊網(wǎng)——每日最新資訊28at.com

1. 安裝typescript-esLint：在項(xiàng)目根目錄下運(yùn)行以下命令

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

2. 配置eslint和@typescript-eslint插件：在生成的eslint配置文件中，需要指定解析器為@typescript-eslint/parser，并使用@typescript-eslint/eslint-plugin提供的規(guī)則和插件

eslint配置文件如下(以.eslintrc為例)：pRt28資訊網(wǎng)——每日最新資訊28at.com

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'  }}

以下為結(jié)合 lint-staged 配置的代碼檢查命令：pRt28資訊網(wǎng)——每日最新資訊28at.com

{  "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是一個(gè)代碼格式化工具，它可以自動(dòng)調(diào)整代碼的格式，使其符合統(tǒng)一的風(fēng)格規(guī)范pRt28資訊網(wǎng)——每日最新資訊28at.com

基本使用如下：pRt28資訊網(wǎng)——每日最新資訊28at.com

1. 安裝依賴

# npm npm install prettier --save-dev# yarnyarn add prettier --dev#pnpmpnpm add prettier --save-dev

2. 配置prettier，可以使用 .prettierrc 文件或 package.json 文件中的 prettier 字段，下面以 package.json 為例：

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

實(shí)際應(yīng)用時(shí)會(huì)在 commit 之前進(jìn)行美化代碼，以下為結(jié)合 lint-staged 配置的代碼檢查+代碼美化命令：pRt28資訊網(wǎng)——每日最新資訊28at.com

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

pRt28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-10452-0.html前端工程化小記

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： Serverless vs Containers：哪個(gè)適合您的業(yè)務(wù)？

下一篇： 算法和數(shù)據(jù)結(jié)構(gòu)：解析與應(yīng)用