VSCode代碼格式化的完整解決方案
更新時(shí)間：2026年03月18日 08:53:14 作者：還是大劍師蘭特
這篇文章主要介紹了VSCode代碼格式化的完整解決方案,安裝格式化插件,配置默認(rèn)格式化器,設(shè)置自動(dòng)/手動(dòng)格式化,使用快捷鍵觸發(fā),以下是通用+分語(yǔ)言的詳細(xì)方案,需要的朋友可以參考下
VSCode 格式化代碼核心流程：安裝格式化插件 → 配置默認(rèn)格式化器 → 設(shè)置自動(dòng)/手動(dòng)格式化 → 使用快捷鍵觸發(fā)。以下是通用+分語(yǔ)言的詳細(xì)方案，覆蓋前端、Python、Java 等主流場(chǎng)景。
一、必裝格式化插件（按語(yǔ)言推薦）
1. 通用全能型（前端/全棧首選）
Prettier - Code formatter（最推薦）
- 作者：esbenp.prettier-vscode
- 支持：JS/TS/HTML/CSS/JSON/Vue/React/Markdown 等幾乎所有前端語(yǔ)言
- 優(yōu)勢(shì)：規(guī)則統(tǒng)一、開(kāi)箱即用、團(tuán)隊(duì)協(xié)作友好，解決“格式圣戰(zhàn)”
- 安裝：
- 打開(kāi)擴(kuò)展面板：
Ctrl+Shift+X（Windows/Linux）/Cmd+Shift+X（macOS） - 搜索
Prettier - Code formatter→ 點(diǎn)擊「安裝」 - 安裝后重啟 VSCode 生效
- 打開(kāi)擴(kuò)展面板：
2. 語(yǔ)言專用插件（按需安裝）
| 語(yǔ)言 | 推薦插件 | 插件ID | 核心優(yōu)勢(shì) |
|---|---|---|---|
| Python | Black Formatter | ms-python.black-formatter | 嚴(yán)格統(tǒng)一Python格式，無(wú)配置爭(zhēng)議 |
| Python | autopep8 | ms-python.autopep8 | 兼容PEP8規(guī)范，輕量易用 |
| Java | Language Support for Java | redhat.java | 內(nèi)置格式化，無(wú)需額外插件 |
| C/C++ | C/C++ | ms-vscode.cpptools | 支持ClangFormat，自定義規(guī)則 |
| Go | Go | golang.go | 內(nèi)置gofmt，符合Go官方規(guī)范 |
二、核心配置（settings.json + 插件規(guī)則）
1. 打開(kāi)配置文件（2種方式）
- 方式1（推薦）：
Ctrl+Shift+P（Windows）/Cmd+Shift+P（macOS）→ 輸入Preferences: Open Settings (JSON)→ 回車 - 方式2：
Ctrl+,（Windows）/Cmd+,（macOS）打開(kāi)設(shè)置UI → 點(diǎn)擊右上角「打開(kāi)設(shè)置(JSON)」圖標(biāo)
2. 全局基礎(chǔ)配置（必加）
{
// 1. 全局默認(rèn)格式化器（設(shè)為Prettier）
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 2. 保存時(shí)自動(dòng)格式化（核心！）
"editor.formatOnSave": true,
// 3. 格式化選中代碼（手動(dòng)觸發(fā)）
"editor.formatOnSelection": true,
// 4. 粘貼代碼時(shí)自動(dòng)格式化
"editor.formatOnPaste": true
}3. 分語(yǔ)言指定格式化器（解決多插件沖突）
{
// 前端：統(tǒng)一用Prettier
"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
// Python：指定Black
"[python]": { "editor.defaultFormatter": "ms-python.black-formatter" },
// Java：內(nèi)置格式化器
"[java]": { "editor.defaultFormatter": "redhat.java" }
}4. Prettier 自定義規(guī)則（項(xiàng)目根目錄創(chuàng)建 .prettierrc）
在項(xiàng)目根目錄新建 .prettierrc 文件，寫入以下規(guī)則（按需修改）：
{
"printWidth": 100, // 每行最大字符數(shù)
"tabWidth": 2, // 縮進(jìn)2空格
"singleQuote": true, // 使用單引號(hào)
"semi": true, // 語(yǔ)句末尾加分號(hào)
"trailingComma": "es5", // ES5兼容的尾隨逗號(hào)
"arrowParens": "avoid", // 單參數(shù)箭頭函數(shù)省略括號(hào)
"endOfLine": "lf" // 換行符用LF（Unix風(fēng)格）
}
5. 解決 Prettier + ESLint 沖突（前端必備）
安裝依賴：npm install eslint-config-prettier eslint-plugin-prettier --save-dev
在 .eslintrc.js 中添加配置：
module.exports = {
extends: [
"eslint:recommended",
"plugin:prettier/recommended" // 關(guān)鍵：合并Prettier規(guī)則
],
plugins: ["prettier"],
rules: {
"prettier/prettier": "error" // Prettier規(guī)則作為ESLint錯(cuò)誤
}
};三、格式化快捷鍵（手動(dòng)觸發(fā)）
1. 全局默認(rèn)快捷鍵（最常用）
- 格式化整個(gè)文檔：
Shift+Alt+F（Windows/Linux）/Shift+Option+F（macOS） - 格式化選中代碼：先選中代碼 → 按上述快捷鍵，或右鍵「格式化選中內(nèi)容」
2. 命令面板觸發(fā)（快捷鍵沖突時(shí)用）
Ctrl+Shift+P（Windows）/Cmd+Shift+P（macOS）- 輸入：
- 格式化文檔：
Format Document - 格式化選中：
Format Selection - 切換默認(rèn)格式化器：
Format Document With...→ 選擇插件
- 格式化文檔：
3. 自定義快捷鍵（修改 keybindings.json）
- 打開(kāi)：
Ctrl+K Ctrl+S（Windows）/Cmd+K Cmd+S（macOS） - 點(diǎn)擊右上角「打開(kāi)鍵盤快捷方式(JSON)」
- 添加配置（示例：設(shè)
Ctrl+Alt+L為格式化）：
[
{
"key": "ctrl+alt+l",
"command": "editor.action.formatDocument",
"when": "editorTextFocus"
}
]
四、完整操作流程（一步到位）
- 安裝插件：優(yōu)先裝
Prettier，再按需裝語(yǔ)言專用插件 - 配置 settings.json：復(fù)制上述全局+分語(yǔ)言配置，保存生效
- 創(chuàng)建 .prettierrc：在項(xiàng)目根目錄添加自定義規(guī)則
- 啟用自動(dòng)格式化：確保
editor.formatOnSave: true，保存文件時(shí)自動(dòng)格式化 - 手動(dòng)觸發(fā)：按
Shift+Alt+F一鍵格式化，或選中代碼后格式化
五、常見(jiàn)問(wèn)題解決
格式化不生效
- 檢查：插件是否安裝并啟用、
defaultFormatter是否正確配置、文件是否保存 - 修復(fù)：右鍵文件 →「格式化文檔」→ 選擇正確插件 → 設(shè)為默認(rèn)
Prettier 與 ESLint 沖突
- 按上述「沖突解決」配置，安裝
eslint-config-prettier屏蔽沖突規(guī)則
Python 格式化失敗
- 確保安裝
Python插件 +Black Formatter，并在[python]中指定默認(rèn)格式化器
六、最終推薦配置（復(fù)制即用）
// settings.json 完整配置
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnSelection": true,
"editor.formatOnPaste": true,
"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[python]": { "editor.defaultFormatter": "ms-python.black-formatter" },
"[java]": { "editor.defaultFormatter": "redhat.java" },
"prettier.singleQuote": true,
"prettier.tabWidth": 2,
"prettier.semi": true
}以上就是VSCode代碼格式化的完整解決方案的詳細(xì)內(nèi)容，更多關(guān)于VSCode代碼格式化的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
下面小編就為大家分享一篇使用2種方法解決webstorm卡頓的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
vscode?debug設(shè)置參數(shù)與環(huán)境變量圖文詳解
這篇文章主要給大家介紹了關(guān)于vscode?debug設(shè)置參數(shù)與環(huán)境變量的相關(guān)資料,文中通過(guò)圖文以及代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
本文給大家推薦的是一款Vscode的打字特效的插件Power Mode的安裝使用說(shuō)明,插件非常的炫酷,推薦給大家,希望大家能夠喜歡2020-02-02
性能測(cè)試監(jiān)控網(wǎng)絡(luò)吞吐量過(guò)程詳解
這篇文章是關(guān)于性能的文章，主要介紹了性能測(cè)試中測(cè)試監(jiān)控網(wǎng)絡(luò)吞吐量過(guò)程，文中給了詳細(xì)的示例分析，有需要的朋友可以借鑒參考下2021-09-09
本文主要介紹了git?pull和git?clone的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了VS2019無(wú)法添加引用問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
WebSocket部署到服務(wù)器出現(xiàn)連接失敗問(wèn)題的分析與解決
這篇文章主要給大家介紹了關(guān)于WebSocket部署到服務(wù)器出現(xiàn)連接失敗問(wèn)題的分析與解決方法，文中給出了詳細(xì)的介紹供大家參考學(xué)習(xí)，文末也給出了demo下載地址，需要的朋友們可以下載學(xué)習(xí)，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
這篇文章主要為大家介紹了我們?cè)谶M(jìn)行目標(biāo)檢測(cè)時(shí)需要用到的mAP概念及公式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
自定義?Github?Action?庫(kù)實(shí)戰(zhàn)詳解
這篇文章主要為大家介紹了自定義?Github?Action?庫(kù)實(shí)戰(zhàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
IE 瀏覽器安全級(jí)別詳情及區(qū)別小結(jié)
排查問(wèn)題時(shí)，定位到可能和當(dāng)前瀏覽器的安全級(jí)別設(shè)置有關(guān)，順便整理了下Windows 7下IE9安全級(jí)別的詳情內(nèi)容，及各安全級(jí)別下的默認(rèn)設(shè)置差異2016-01-01