本周，我擴(kuò)展了對(duì)軟件開(kāi)發(fā)中代碼格式化重要性的了解。正如我們依靠具有拼寫(xiě)檢查功能的文字處理軟件來(lái)識(shí)別和糾正拼寫(xiě)錯(cuò)誤一樣，開(kāi)發(fā)人員應(yīng)該利用提供格式化和 linting 功能的代碼編輯器來(lái)維護(hù)代碼質(zhì)量。

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

為了提高代碼質(zhì)量并減少開(kāi)發(fā)時(shí)間，程序員使用靜態(tài)分析工具至關(guān)重要。當(dāng)與多個(gè)貢獻(xiàn)者合作項(xiàng)目時(shí)，遵守編碼標(biāo)準(zhǔn)變得至關(guān)重要，因?yàn)樗梢宰屍渌烁p松地閱讀和理解代碼。這種必要性導(dǎo)致了針對(duì)不同編程語(yǔ)言定制的各種工具的出現(xiàn)。對(duì)于本周的項(xiàng)目，我選擇為我的 JavaScript 代碼庫(kù)實(shí)現(xiàn) Prettier。除了格式化工具之外，linter 也是必不可少的。 linter 可幫助開(kāi)發(fā)人員識(shí)別被忽視的錯(cuò)誤，這些錯(cuò)誤可能不會(huì)影響程序的執(zhí)行，但如果不加以檢查，可能會(huì)導(dǎo)致代碼中出現(xiàn)重大問(wèn)題。為此，我選擇了 ESLint。

更漂亮

為了使用 Prettier，我使用以下命令將其本地安裝在我的項(xiàng)目中：

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

接下來(lái)，我創(chuàng)建了兩個(gè)配置文件：.prettierrc 和 .prettierignore：

• .prettierrc：此配置文件包含格式化規(guī)則。

我將其保留為空對(duì)象，因?yàn)槲蚁胧褂媚J(rèn)的 Prettier 設(shè)置而不覆蓋任何規(guī)則。

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

我包含了所有我不希望 Prettier 接近的文件和文件夾。其中大部分是配置文件和自行生成的文件。

注釋：

• 這兩個(gè)文件都必須放在項(xiàng)目的根目錄下。
• 安裝后，我可以通過(guò)運(yùn)行來(lái)測(cè)試 Prettier 的功能：

npx 更漂亮。 --寫(xiě)

• 為了更輕松地運(yùn)行該命令，我制作了一個(gè)將在命令行中運(yùn)行的腳本。在 package.json 文件中，我添加了一個(gè)名為 format 的新腳本。

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

npm 運(yùn)行格式

除了本地安裝和命令行使用之外，Prettier 還可以通過(guò)擴(kuò)展集成到代碼編輯器（例如 VSCode）中。安裝后，它會(huì)在保存文件時(shí)自動(dòng)格式化代碼。

短絨

ESLint 是一款旨在識(shí)別和報(bào)告 ECMAScript/JavaScript 代碼中的模式的工具，旨在增強(qiáng)代碼一致性并最大限度地減少錯(cuò)誤。您可以使用以下命令安裝和配置 ESLint：

npm init @eslint/config@latest

執(zhí)行此命令后，一系列問(wèn)題將引導(dǎo)您完成終端中的設(shè)置，并將創(chuàng)建一個(gè)名為 .eslint.config.mjs 的新配置文件。由于我使用的是 ESLint 版本 9.x，因此所有配置都將在此文件中指定。我還列出了 ESLint 不需要的文件和文件夾，以便使用忽略屬性來(lái)忽略。

為了簡(jiǎn)化 linting 過(guò)程，我在 package.json 中添加了一個(gè)腳本以便于執(zhí)行。

要運(yùn)行腳本，只需鍵入以下命令：

npm run lint

編輯器集成

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

• extensions.json：該文件列出了開(kāi)發(fā)者在打開(kāi)項(xiàng)目時(shí)應(yīng)安裝的必要擴(kuò)展，并在項(xiàng)目啟動(dòng)時(shí)提供提示。

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

  • 編輯器使用 Prettier 在保存時(shí)格式化代碼。
  • ESLint 自動(dòng)修復(fù)保存時(shí)的 linting 問(wèn)題。
  • ESLint 驗(yàn)證 JavaScript 文件。
  • Prettier 需要一個(gè)配置文件來(lái)格式化代碼。

通過(guò)使用settings.json和extensions.json建立.vscode文件夾，我確保所有貢獻(xiàn)者共享一致的開(kāi)發(fā)環(huán)境，并將Prettier和ESLint無(wú)縫集成到Visual Studio Code中。此設(shè)置有助于根據(jù)項(xiàng)目的配置自動(dòng)進(jìn)行代碼格式化和 linting，從而簡(jiǎn)化代碼質(zhì)量和一致性的維護(hù)。

解決格式問(wèn)題

• 運(yùn)行 Prettier 后，我發(fā)現(xiàn)了一些需要手動(dòng)調(diào)整的文件，主要是向?qū)ο蟮淖詈笠粋€(gè)元素添加逗號(hào)。

• 在 ESLint 運(yùn)行之后，我發(fā)現(xiàn)了 13 個(gè)問(wèn)題，其中大部分是由于使用了不需要初始化的全局對(duì)象進(jìn)程造成的。為了解決這個(gè)問(wèn)題，我在受影響的文件頂部添加了以下注釋?zhuān)?/p>

/* eslint-disable no-undef */

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

結(jié)論

通過(guò)對(duì)靜態(tài)分析工具的探索，我對(duì)它們的重要性有了更深入的了解，特別是在協(xié)作項(xiàng)目中。這些工具的主要目標(biāo)是促進(jìn)團(tuán)隊(duì)合作并保持高代碼質(zhì)量，我現(xiàn)在了解如何有效地建立一個(gè)項(xiàng)目來(lái)從一開(kāi)始就集成這些基本工具。

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