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