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

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

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

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

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

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

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

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

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

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

1. 縮排
   縮排是使用空格以直覺方式將程式碼組織成層次結(jié)構(gòu)。這裡的行業(yè)標(biāo)準(zhǔn)是使用 2 或 4 個空格並避免使用製表符。根據(jù) Airbnb 的 JavaScript 和 React 風(fēng)格指南，您應(yīng)該使用 2 個空格。這是因為它保持了一致的嵌套層級並提高了程式碼的整體可讀性。

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

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

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

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

4. 一致的報價
   使用引號時，建議在整個專案中使用單引號 '' 或雙引號 ""，同時盡量避免不必要地使用兩者的組合。

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

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

7. 評論
   程式碼庫很容易與程式碼聚集在一起，因此不要因過度使用註解而使情況變得更糟。如果您有良好的命名約定並編寫沒有反模式的乾淨(jìng)程式碼，那麼您通常應(yīng)該能夠避免使用註解。就像羅伯特·C.馬丁說“註釋本質(zhì)上並不是壞事”，但它們通常是“未能在代碼本身中表達(dá)意圖的標(biāo)誌”。註解確實在程式碼中佔(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)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！