當前位置：首頁 > 科技 > 軟件

前端工程化小記

來源：責編：時間：2023-09-18 21:41:19 363觀看

導讀1.引言工作中，我們是否經常遇到以下情況：我們是否發現接手其他同事的代碼非常痛苦，比如：縮進，換行等等代碼風格這些一度讓人渾身難受某個同事提了經常提語法報錯的代碼，語法報錯只能用肉眼一個個review代碼，完全沒有提示同事

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

用快捷命令完成上面的安裝步驟

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

4.文件過濾工具：lint-staged

lint-staged是一個用于在 git 暫存文件上運行指定命令的工具。它可以幫助你在提交代碼前，只對即將提交的文件進行代碼風格檢查、格式化、靜態分析等操作，以便在代碼提交之前保持代碼的質量和一致性

基本使用如下：

安裝依賴

# npmnpm install lint-staged --save-dev#yarn yarn add lint-staged --dev#pnpmpnpm 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-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

使用 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

# 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基本使用步驟如下：

安裝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# yarnyarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev#pnpmpnpm 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# yarnyarn add prettier --dev#pnpmpnpm 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"    ]  }}

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Serverless vs Containers：哪個適合您的業務？

下一篇：算法和數據結構：解析與應用

標簽：

熱門焦點

對標蘋果的靈動島華為帶來實況窗功能

繼蘋果的靈動島之后，華為也在今天正式推出了“實況窗”功能。據今天鴻蒙OS 4.0的現場演示顯示，華為的實況窗可以更高效的展現出實時通知，比如鎖屏上就能看到外賣、打車、銀行
直屏旗艦來了 iQOO 12和K70 Pro同臺競技

旗艦機基本上使用的都是雙曲面屏幕，這就讓很多喜歡直屏的愛好者在苦等一款直屏旗艦，這次，你們等到了。據博主數碼閑聊站帶來的最新爆料稱，Redmi下代旗艦K70 Pro和iQOO 12兩款手
紅魔電競平板評測：大屏幕硬實力

前言：三年的疫情因為要上網課的原因激活了平板市場，如今網課的時代已經過去，大家的生活都恢復到了正軌，這也就意味著，真正考驗平板電腦生存的環境來了。也就是面對著這種殘酷的
天貓精靈Sound Pro體驗：智能音箱沒有音質？來聽聽我的

這幾年除了手機作為智能生活終端最主要的核心之外，第二個可以成為中心點的產品是什么？——是智能音箱。手機在執行命令的時候有兩種操作方式，手和智能語音助手，而智能音箱只
六大權益！華為8月服務日開啟：手機免費貼膜、維修免人工費

8月5日消息，一年一度的華為開發者大會2023（Together）日前在松山湖拉開帷幕，與此同時，華為8月服務日也式開啟，到店可享六大專屬權益。華為用戶可在華為商城Ap
不容錯過的MSBuild技巧，必備用法詳解和實踐指南

一、MSBuild簡介MSBuild是一種基于XML的構建引擎，用于在.NET Framework和.NET Core應用程序中自動化構建過程。它是Visual Studio的構建引擎，可在命令行或其他構建工具中使用
自動化在DevOps中的力量：簡化軟件開發和交付

自動化在DevOps中扮演著重要角色，它提升了DevOps的效能。通過自動化工具和方法，DevOps團隊可以實現以下目標：消除手動和重復性任務。簡化流程。在整個軟件開發生命周期中實現更
小米MIX Fold 3配置細節曝光：搭載領先版驍龍8 Gen2+罕見5倍長焦

這段時間以來，包括三星、一加、榮耀等等有不少品牌旗下的最新折疊屏旗艦都得到了不少爆料，而小米新一代折疊屏旗艦——小米MIX Fold 3此前也屢屢被傳
支持aptX Lossless無損傳輸 iQOO TWS 1賽道版發布限時優惠價369元

2023年7月4日，“無損音質，聲動人心”iQOO TWS 1正式發布，支持aptX Lossless無損傳輸，限時優惠價369元。iQOO TWS 1耳機率先支持端到端aptX Lossless無

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

前端工程化小記

1.引言

2.背景

3.Git鉤子：husky

4.文件過濾工具：lint-staged

5.commit注釋規范：commitlint

6.代碼檢查

7.代碼美化：prettier

對標蘋果的靈動島華為帶來實況窗功能

直屏旗艦來了 iQOO 12和K70 Pro同臺競技

紅魔電競平板評測：大屏幕硬實力

天貓精靈Sound Pro體驗：智能音箱沒有音質？來聽聽我的

六大權益！華為8月服務日開啟：手機免費貼膜、維修免人工費

不容錯過的MSBuild技巧，必備用法詳解和實踐指南

自動化在DevOps中的力量：簡化軟件開發和交付

小米MIX Fold 3配置細節曝光：搭載領先版驍龍8 Gen2+罕見5倍長焦

支持aptX Lossless無損傳輸 iQOO TWS 1賽道版發布限時優惠價369元

最新推薦

猜你喜歡

熱門推薦

相關資訊