如何在程式碼庫和 VSCode 中安裝 Prettier

更漂亮

Prettier 是一個固執己見的程式碼格式化程序，支援多種語言。

自從我開始使用 Prettier 以來，我不想再在沒有它的情況下編寫程式碼。儘管一開始有一些擔憂（例如強制線寬），但我愛上了預設。

安裝和配置 Prettier

安裝 Prettier 很簡單，以下是簡單的步驟。您也可以按照官方安裝指南進行操作。

首先您需要在本地安裝準確版本的 prettier。這確保每個人都將使用完全相同相同的版本來格式化專案中的程式碼。

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

接下來，您需要在專案的根目錄中建立 Prettier 設定檔 .prettierrc 和 .prettierignore（可選）。

您可以執行此命令來建立帶有空白物件的預設設定檔：

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

.prettierignore 檔案的工作方式與 .gitignore 檔案相同。事實上，Prettier 已經遵循 .gitignore 中規定的規則，因此您可能甚至不需要：

？預設情況下，prettier 會忽略版本控制系統目錄（“.git”、“.sl”、“.svn”和“.hg”）和node_modules 中的檔案（除非指定了--with-node-modules CLI 選項）。如果 Prettier 存在於執行它的同一目錄中，它也將遵循「.gitignore」檔案中指定的規則。

這是一個範例 .prettierignore 來跳過所有 HTML 檔案：

# Ignore all HTML files:
**/*.html

格式化所有現有程式碼

在繼續格式化整個程式碼庫之前，請提交您的變更。我還建議合併所有開啟的拉取請求，因為很多文件都會受到影響。

現在在專案的根資料夾中執行此命令以格式化所有檔案：

npx prettier . --write

ℹ️ 此處使用 npx 可確保執行本地安裝的 Prettier 版本。如果您也全域安裝了 Prettier，這一點很重要。

現在您的所有專案文件都應該具有良好的格式。 ?✨

安裝 Prettier VSCode 擴展

接下來您可以為您的 IDE 設定 Prettier 插件。我使用 Visual Studio Code，但也有許多其他編輯器的插件。

對於 VSCode，安裝此擴充功能：esbenp.prettier-vscode

完成後，您可以導航至 VSCode 設定並蒐索「formatter」。在這裡您可以將 Default Formatter 設定為 esbenp.prettier-vscode。

但是，如果您像我一樣從事許多不同的項目，並且並非所有項目都有 Prettier，那麼您可能會將其保留為預設值（無）。

相反，您可以在使用 prettier 的專案的本機 VSCode 設定檔 (.vscode/settings.json) 中設定預設格式化程式。

為了確保本機配置覆蓋任何特定於語言的全域 VSCode 設置，您可能需要為每種語言單獨指定 defaultFormatter。

這裡有一個範例 .vscode/settings.json 供參考：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

以上是如何在程式碼庫和 VSCode 中安裝 Prettier的詳細內容。更多資訊請關注PHP中文網其他相關文章！