直屏旗艦來了 iQOO 12和K70 Pro同臺競技
旗艦機(jī)基本上使用的都是雙曲面屏幕，這就讓很多喜歡直屏的愛好者在苦等一款直屏旗艦，這次，你們等到了。據(jù)博主數(shù)碼閑聊站帶來的最新爆料稱，Redmi下代旗艦K70 Pro和iQOO 12兩款手
工作中，我們是否經(jīng)常遇到以下情況：
關(guān)于代碼語法檢查、代碼格式化、commit注釋規(guī)范、代碼編譯等等這些工作量繁雜且巨大的苦力活，除非你不想把人當(dāng)馬用，那還是交給機(jī)器去做，是嗎？
前端領(lǐng)域早已不是以前的純js、jquery 時(shí)代，模塊化、工程化也成為了前端領(lǐng)域的追求，這樣才能保證前端程序的可讀性，可維護(hù)性，健壯性等等
前端工程化已經(jīng)發(fā)展了有些年月了，大量提高效率的包如雨后春筍般涌出。所以作為小前端的我也忍不住去探索一番，畢竟誰也不想瘋狂加班，被當(dāng)作馬使，也想下早班開啟簡單開心的生活
本文旨在記錄探索前端基本工程化的實(shí)踐過程，方便自己以后翻閱，請輕噴(ps: 這篇文章聚焦代碼檢查，代碼美化，commit規(guī)范，其中有借助chatgpt)
項(xiàng)目基本技術(shù)選型為：react + ts，所以將以此為基礎(chǔ)展開前端工程化基本配置
husky 是一個(gè)用于在 Git 鉤子中運(yùn)行命令的工具，它能夠在代碼提交或推送等特定事件中自動觸發(fā)指定的命令。通過 husky，你可以在代碼提交前、提交后、推送前等場景下運(yùn)行腳本，以進(jìn)行代碼風(fēng)格檢查、單元測試、構(gòu)建等操作
安裝如下：
用快捷命令完成上面的安裝步驟
# npmnpx husky-init && npm install# yarnyarn dlx husky-init --yarn2 && yarn#pnpmpnpm dlx husky-init && pnpm installlint-staged是一個(gè)用于在 git 暫存文件上運(yùn)行指定命令的工具。它可以幫助你在提交代碼前，只對即將提交的文件進(jìn)行代碼風(fēng)格檢查、格式化、靜態(tài)分析等操作，以便在代碼提交之前保持代碼的質(zhì)量和一致性
基本使用如下：
# npmnpm install lint-staged --save-dev#yarn yarn add lint-staged --dev#pnpmpnpm add lint-staged --save-dev{ "scripts": { "lint": "eslint src" }, "lint-staged": { "src/**/*.{ts,tsx}": [ "npm run lint", // 運(yùn)行自定義的 lint 腳本 "git add" // 添加修復(fù)后的文件到暫存區(qū) ] }}以上配置表示：對于 src 目錄下的所有后綴為 ts 和 tsx 的文件，在提交前會運(yùn)行 npm run lint 命令來進(jìn)行語法檢查，然后將修復(fù)后的文件添加到暫存區(qū)
實(shí)際開發(fā)時(shí)，lint-staged 一般會配合 pre-commit 鉤子進(jìn)行 commit 之前的動作，所以我們替換 pre-commit 鉤子內(nèi)容如下：
#!/usr/bin/env sh. "$(dirname -- "$0")/_/husky.sh"npx lint-stagedcommitlint 是一個(gè)用于規(guī)范化 Git 提交消息的工具。它幫助團(tuán)隊(duì)確保每個(gè)提交消息都符合統(tǒng)一的規(guī)范，以提高代碼倉庫的可讀性和可維護(hù)性
這里直接展示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-devnpx 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注釋類型解釋如下：
代碼檢查借助了eslint, typescript-eslint
eslint是一個(gè)用于檢查和修復(fù) JavaScript 代碼錯誤、風(fēng)格和質(zhì)量問題的工具。它可以幫助開發(fā)人員和團(tuán)隊(duì)在編碼過程中遵循一致的編碼規(guī)范，提高代碼可讀性、可維護(hù)性和質(zhì)量
typescript-eslint是一個(gè)用于對 TypeScript 代碼進(jìn)行檢查和修復(fù)的工具。它基于eslint，提供了一套規(guī)則和插件，可以檢查和修復(fù) TypeScript 代碼中的錯誤、風(fēng)格和質(zhì)量問題
綜上所訴，需要開發(fā)環(huán)境下安裝如下包：
# 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-deveslint基本使用步驟如下：
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-deveslint配置文件如下(以.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' }}以下為結(jié)合 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" ] }}prettier是一個(gè)代碼格式化工具，它可以自動調(diào)整代碼的格式，使其符合統(tǒng)一的風(fēng)格規(guī)范
基本使用如下：
# npm npm install prettier --save-dev# yarnyarn add prettier --dev#pnpmpnpm add prettier --save-dev{ "prettier": { "trailingComma": "all", "arrowParens": "always", "printWidth": 120 }}實(shí)際應(yīng)用時(shí)會在 commit 之前進(jìn)行美化代碼，以下為結(jié)合 lint-staged 配置的代碼檢查+代碼美化命令：
{ "prettier": { "trailingComma": "all", "arrowParens": "always", "printWidth": 120 }, "lint-staged": { "*.(ts|tsx)": [ "eslint --quiet" ], "*.(ts|tsx|json|html)": [ "prettier --write" ] }}本文鏈接：http://m.rrqrq.com/showinfo-26-10452-0.html前端工程化小記
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號