安裝Prettier 擴(kuò)展：在VSCode 中搜索並安裝官方Prettier 擴(kuò)展以啟用代碼格式化功能。 2. 設(shè)置Prettier 為默認(rèn)格式化工具：通過右鍵菜單選擇“Format Document With…”並設(shè)為默認(rèn)，或在settings.json 中配置"editor.defaultFormatter": "esbenp.prettier-vscode" 且啟用"editor.formatOnSave": true。 3. 創(chuàng)建Prettier 配置文件：在項(xiàng)目根目錄添加.prettierrc.json 或其他支持格式的配置文件以自定義規(guī)則。 4. 處理與ESLint 的衝突：若使用ESLint，應(yīng)禁用formatOnSave 並啟用source.fixAll.eslint 以避免重複格式化。 5. 驗(yàn)證配置是否生效：保存文件後檢查代碼是否自動格式化，確保無擴(kuò)展衝突且文件類型受支持，從而確保Prettier 正常工作。

Setting up Prettier in VSCode is straightforward and can greatly improve your coding workflow by automatically formatting your code on save. Here's how to do it properly.

Install the Prettier Extension

First, make sure you have the official Prettier - Code formatter extension installed in VSCode:

1. Open VSCode.
2. Go to the Extensions view by clicking the Extensions icon in the Activity Bar or pressing Ctrl Shift X .
3. Search for "Prettier - Code formatter" (published by Prettier ).
4. Click Install .

Once installed, Prettier will be available for supported file types.

Set Prettier as the Default Formatter

To ensure Prettier formats your code automatically:

1. Open a file you want to format (eg, a .js , .ts , or .css file).
2. Right-click in the editor and select "Format Document With..." .
3. Choose Prettier from the list.
4. Click "Set as Default" to make Prettier the default formatter for that file type.

Alternatively, you can set it globally via settings.json :

 {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

This tells VSCode to use Prettier as the default formatter and format files automatically when you save.

Create a Prettier Config File (Optional but Recommended)

You can customize formatting rules by adding a config file to your project root. Supported formats include:

• .prettierrc.json
• prettier.config.js
• or add a prettier field in package.json

Example .prettierrc.json :

 {
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2
}

VSCode will automatically detect this config and apply the rules.

Handle Conflicts with ESLint (if applicable)

If you're using ESLint, especially with eslint-config-prettier , you might want to avoid double formatting:

1. Install the ESLint extension in VSCode.
2. Update your VSCode settings:

 {
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

This lets ESLint handle formatting (including Prettier via plugins like eslint-plugin-prettier ), which is often preferred in larger projects.

Verify It's Working

• Open a code file.
• Make some unformatted changes (eg, add extra spaces or missing semicolons).
• Save the file ( Ctrl S ).
• The code should auto-format according to your Prettier rules.

If nothing happens, check:

• Prettier is set as the default formatter.
• formatOnSave is enabled.
• There are no conflicting extensions (like Beautify).
• The file type is supported.

That's it. With these steps, Prettier will keep your code clean and consistent in VSCode — no manual formatting needed.

以上是如何在VSCODE中配置更漂亮的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！