在開始一個(gè)新專案時(shí)，有一種在 React 開發(fā)人員中很常見的經(jīng)驗(yàn)。您開始對(duì)程式碼的乾淨(jìng)和可讀性感到滿意，只是編寫了一些函數(shù)或元件，然後慢慢地看著您的程式碼庫陷入混亂。您發(fā)現(xiàn)自己從上到下、從左到右滾動(dòng)，反覆重讀程式碼行，並從一個(gè)檔案移動(dòng)到另一個(gè)檔案。完成某個(gè)功能後，您希望永遠(yuǎn)不必再次開啟該文件，因?yàn)槟勒业絾我缓瘮?shù)或變數(shù)需要多長(zhǎng)時(shí)間，更不用說編輯或更改該功能了。

在本文中，我們將研究格式化在使程式碼庫乾淨(jìng)且可讀方面所扮演的角色。我們還將探索實(shí)現(xiàn)一致格式的行業(yè)標(biāo)準(zhǔn)和最佳實(shí)踐。

為什麼要格式化你的程式碼？

格式對(duì)於程式碼的可讀性和可維護(hù)性至關(guān)重要。但如何呢？

格式良好的程式碼有助於在視覺上分隔程式碼的不同部分，從而更容易遵循邏輯流程。正確的縮排突顯了父元件、子元件、元素或選擇器之間的關(guān)係。一致的格式可以增強(qiáng)您快速偵錯(cuò)、修復(fù)和維護(hù)程式碼的能力。當(dāng)與遵循相同格式規(guī)則的團(tuán)隊(duì)成員合作時(shí)，可以更輕鬆地理解彼此的程式碼而不會(huì)混淆。

減少精神負(fù)擔(dān)是良好格式化的另一個(gè)好處。乾淨(jìng)的程式碼需要更少的腦力去理解，讓您能夠更專注於解決新問題，而不是破解格式不良的程式碼區(qū)塊。

當(dāng)團(tuán)隊(duì)堅(jiān)持一致的風(fēng)格時(shí)，每個(gè)人都可以做出貢獻(xiàn)，而無需浪費(fèi)時(shí)間重新格式化程式碼區(qū)塊以滿足個(gè)人喜好。良好的格式也為程式碼庫帶來了紀(jì)律和專業(yè)精神。

最後，工具相容性是一個(gè)顯著的優(yōu)勢(shì)。開發(fā)人員使用依賴一致格式的 linter、插件和 IDE。為了充分利用這些工具並從自動(dòng)完成和錯(cuò)誤突出顯示等功能中受益，您的程式碼庫需要正確的格式。但如何實(shí)現(xiàn)這一目標(biāo)呢？

格式化程式碼庫涉及什麼？

當(dāng)談到格式化程式碼庫時(shí)，我們通常指幾個(gè)面向：縮排、行長(zhǎng)、命名約定、間距、大括號(hào)和圓括號(hào)、引號(hào)的一致使用、分號(hào)的使用、檔案和資料夾結(jié)構(gòu)以及適當(dāng)?shù)氖褂迷u(píng)論?，F(xiàn)在讓我們了解如何使用和實(shí)施這些標(biāo)準(zhǔn)的行業(yè)標(biāo)準(zhǔn)。

1. 縮排
   縮排是使用空格以直覺方式將程式碼組織成層次結(jié)構(gòu)。這裡的行業(yè)標(biāo)準(zhǔn)是使用 2 或 4 個(gè)空格並避免使用製表符。根據(jù) Airbnb 的 JavaScript 和 React 風(fēng)格指南，您應(yīng)該使用 2 個(gè)空格。這是因?yàn)樗３至艘恢碌那短讓蛹?jí)並提高了程式碼的整體可讀性。

2. 線長(zhǎng)度
   這裡的行長(zhǎng)度是指您在一行上編寫的程式碼應(yīng)該延伸多遠(yuǎn)。這裡的行業(yè)標(biāo)準(zhǔn)是將一行保持在 80 到 100 個(gè)字元之間。很多指南，特別是 PEP 8 和 prettier 推薦 80 個(gè)字元。這是因?yàn)樗梢苑乐顾綕L動(dòng)，並且通常在不同的螢?zāi)怀叽缟隙寄芎芎玫毓ぷ?。但這是否意味著在編碼時(shí)必須進(jìn)行計(jì)數(shù)？不，至少當(dāng)您使用像 vscode 這樣的程式碼編輯器時(shí)不會(huì)。下圖顯示如何判斷特定行上有多少個(gè)字元。下圖顯示您位於第 44 行，第 93 個(gè)字元。如果您還沒有觸及預(yù)設(shè)設(shè)置，您可以在 vsCode 編輯器的右下角找到它。

1. 命名約定
   
   這是指以一致的方式命名事物的一組規(guī)則。清晰、有意義且精確的命名對(duì)於編寫易於閱讀、理解和維護(hù)的程式碼至關(guān)重要。變數(shù)和函數(shù)最受歡迎的命名約定是使用駝峰命名法（一種透過將每個(gè)單字的第一個(gè)字母大寫而不使用空格來分隔短語中的單字的方法）。對(duì)於 React 元件，應(yīng)該使用 PascalCase，特別是因?yàn)樵牡谝粋€(gè)字母應(yīng)該要大寫，如 React 文件中所述，對(duì)於常數(shù)，建議使用大寫蛇形大小寫。本節(jié)沒有做到命名公正。如果我要深入命名這篇文章會(huì)變得太長(zhǎng)。如果您有興趣了解更多信息，請(qǐng)查看這篇有關(guān)命名約定的文章。

2. 間距
   為了清晰起見，建議在運(yùn)算符周圍添加空格，特別是因?yàn)槟承┻\(yùn)算符在組合使用時(shí)會(huì)執(zhí)行不同的操作。也建議使用空白行來分隔程式碼的邏輯部分。嘗試對(duì)函數(shù)宣告和邏輯進(jìn)行分組並使用空行空間變數(shù)宣告和賦值。

3. 大括號(hào)與括號(hào)
   根據(jù) Airbnb 風(fēng)格指南，不應(yīng)有懸空大括號(hào)，這意味著您應(yīng)將所有右大括號(hào)或括號(hào)與相應(yīng)的左大括號(hào)或括號(hào)正確對(duì)齊。

4. 一致的報(bào)價(jià)
   使用引號(hào)時(shí)，建議在整個(gè)專案中使用單引號(hào) '' 或雙引號(hào) ""，同時(shí)盡量避免不必要地使用兩者的組合。

5. 分號(hào)
   就像使用引號(hào)一樣，您決定要么使用分號(hào)來結(jié)束表達(dá)式、賦值和程式碼行，要么根本不使用分號(hào)，但無論您的決定是什麼，請(qǐng)堅(jiān)持並保持一致。我個(gè)人建議使用分號(hào)以避免自動(dòng)分號(hào)插入帶來的問題。

6. 檔案與資料夾結(jié)構(gòu)
   對(duì)於文件和資料夾結(jié)構(gòu)，項(xiàng)目大小和技術(shù)堆疊等因素主要決定文件和資料夾的結(jié)構(gòu)，但有 2 個(gè)一般規(guī)則需要遵循。 1 將相關(guān)文件分組在一起。 2 使用有意義的檔案名稱。

7. 評(píng)論
   程式碼庫很容易與程式碼聚集在一起，因此不要因過度使用註解而使情況變得更糟。如果您有良好的命名約定並編寫沒有反模式的乾淨(jìng)程式碼，那麼您通常應(yīng)該能夠避免使用註解。就像羅伯特·C.馬丁說“註釋本質(zhì)上並不是壞事”，但它們通常是“未能在代碼本身中表達(dá)意圖的標(biāo)誌”。註解確實(shí)在程式碼中佔(zhàn)有一席之地，它們顯示了程式碼存在的原因，而不是程式碼區(qū)塊的工作原理，因此如果您的程式碼涉及不明顯的決定或解決方法，則應(yīng)使用註解。因此，避免反模式可以消除解釋程式碼的方式的需要，並避免解釋程式碼已經(jīng)表達(dá)的內(nèi)容。

以下是一些行業(yè)設(shè)定風(fēng)格指南的連結(jié)

Airnbnb Javascript 風(fēng)格指南。
StandardJs 風(fēng)格指南
更漂亮的預(yù)設(shè)值
.

所以總而言之，正確格式化你的程式碼不僅僅是為了美觀。它大大提高了程式碼庫的可讀性、可維護(hù)性和可擴(kuò)展性，並且透過採用流行的行業(yè)標(biāo)準(zhǔn)，您可以確保程式碼的一致性和乾淨(jìng)

以上是從混亂到清晰：格式化 React 程式碼以獲得乾淨(jìng)可讀的程式碼庫的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！