本週，我擴展了對軟體開發(fā)中程式碼格式化重要性的了解。正如我們依靠具有拼字檢查功能的文字處理軟體來識別和糾正拼字錯誤一樣，開發(fā)人員應(yīng)該利用提供格式化和 linting 功能的程式碼編輯器來維護程式碼品質(zhì)。

為什麼要使用靜態(tài)分析工具

為了提高程式碼品質(zhì)並減少開發(fā)時間，程式設(shè)計師使用靜態(tài)分析工具至關(guān)重要。當(dāng)與多個貢獻者合作專案時，遵守編碼標(biāo)準(zhǔn)變得至關(guān)重要，因為它可以讓其他人更輕鬆地閱讀和理解程式碼。這種必要性導(dǎo)致了針對不同程式語言量身定制的各種工具的出現(xiàn)。對於本週的項目，我選擇為我的 JavaScript 程式碼庫實作 Prettier。除了格式化工具之外，linter 也是必不可少的。 linter 可協(xié)助開發(fā)人員識別被忽略的錯誤，這些錯誤可能不會影響程式的執(zhí)行，但如果不加以檢查，可能會導(dǎo)致程式碼中出現(xiàn)重大問題。為此，我選擇了 ESLint。

更漂亮

為了使用 Prettier，我使用以下命令將其本地安裝在我的專案中：

npm install --save-dev --save-exact prettier

接下來，我建立了兩個設(shè)定檔：.prettierrc 和 .prettierignore：

• .prettierrc：此設(shè)定檔包含格式化規(guī)則。

我將其保留為空對象，因為我想使用預(yù)設(shè)的 Prettier 設(shè)定而不覆寫任何規(guī)則。

• .prettierignore：此文件列出了 Prettier 不應(yīng)格式化的文件或目錄。

我包含了所有我不希望 Prettier 接近的文件和文件夾。其中大部分是設(shè)定檔和自行產(chǎn)生的檔案。

註解：

• 這兩個檔案都必須放在專案的根目錄下。
• 安裝後，我可以透過運行來測試 Prettier 的功能：

npx 更漂亮。 --寫

• 為了更輕鬆地運行該命令，我製作了一個將在命令列中運行的腳本。在 package.json 檔案中，我新增了一個名為 format 的新腳本。

要使用它，您只需輸入以下命令：

npm 運行格式

除了本機安裝和命令列使用之外，Prettier 還可以透過擴充功能整合到程式碼編輯器（例如 VSCode）中。安裝後，它會在儲存檔案時自動格式化程式碼。

短絨

ESLint 是一款旨在識別和報告 ECMAScript/JavaScript 程式碼中的模式的工具，旨在增強程式碼一致性並最大限度地減少錯誤。您可以使用以下命令安裝和設(shè)定 ESLint：

npm init @eslint/config@latest

執(zhí)行此命令後，一系列問題將引導(dǎo)您完成終端中的設(shè)置，並將建立一個名為 .eslint.config.mjs 的新設(shè)定檔。由於我使用的是 ESLint 版本 9.x，因此所有配置都將在此文件中指定。我還列出了 ESLint 不需要的檔案和資料夾，以便使用忽略屬性來忽略。

為了簡化 linting 流程，我在 package.json 中加入了一個腳本以便於執(zhí)行。

要執(zhí)行腳本，只需鍵入以下命令：

npm run lint

編輯器集成

雖然上述設(shè)定足以滿足單一專案的需求，但確保所有貢獻者擁有統(tǒng)一的開發(fā)環(huán)境在協(xié)作環(huán)境中至關(guān)重要。因此，我在根目錄中建立了一個 .vscode 資料夾，其中包含兩個檔案：

• extensions.json：該文件列出了開發(fā)者在開啟專案時應(yīng)安裝的必要擴展，並在專案啟動時提供提示。

• settings.json：此配置可確保：

  • 編輯器使用 Prettier 在儲存時格式化程式碼。
  • ESLint 自動修正儲存時的 linting 問題。
  • ESLint 驗證 JavaScript 檔案。
  • Prettier 需要一個設(shè)定檔來格式化程式碼。

透過使用settings.json和extensions.json建立.vscode資料夾，我確保所有貢獻者共享一致的開發(fā)環(huán)境，並將Prettier和ESLint無縫整合到Visual Studio Code。此設(shè)定有助於根據(jù)專案的配置自動進行程式碼格式化和 linting，從而簡化程式碼品質(zhì)和一致性的維護。

解決格式問題

• 運行 Prettier 後，我發(fā)現(xiàn)了一些需要手動調(diào)整的文件，主要是在物件的最後一個元素中添加逗號。

• 在 ESLint 運行之後，我發(fā)現(xiàn)了 13 個問題，其中大部分是由於使用了不需要初始化的全域物件進程造成的。為了解決這個問題，我在受影響的文件頂部添加了以下註釋：

/* eslint-disable no-undef */

此外，還有一些導(dǎo)入的值沒有被使用；對於這些情況，我只是將它們刪除。

結(jié)論

透過對靜態(tài)分析工具的探索，我對它們的重要性有了更深入的了解，特別是在協(xié)作專案中。這些工具的主要目標(biāo)是促進團隊合作並保持高程式碼質(zhì)量，我現(xiàn)在了解如何有效地建立專案來從一開始就整合這些基本工具。

以上是超越拼字檢查：靜態(tài)分析工具如何增強編碼協(xié)作的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！