代码格式化 #

为什么需要格式化？ #

代码格式化可以让代码风格保持一致，提高可读性，减少代码审查时的争议。

text 
┌─────────────────────────────────────────────────────────────┐
│                     格式化前后对比                            │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  格式化前：                                                   │
│  const user={name:'Alice',age:25,email:'alice@test.com'}    │
│                                                             │
│  格式化后：                                                   │
│  const user = {                                             │
│      name: 'Alice',                                         │
│      age: 25,                                               │
│      email: 'alice@test.com'                                │
│  };                                                         │
│                                                             │
└─────────────────────────────────────────────────────────────┘

基本格式化 #

格式化文档 #

功能 Mac Windows/Linux 说明
格式化文档 ⇧⌥F Shift+Alt+F 格式化整个文档
格式化选中内容 ⌘K ⌘F Ctrl+K Ctrl+F 格式化选中部分

格式化示例 #

javascript 
// 格式化前
function greet(name,age){return `Hello ${name}, you are ${age} years old`;}

// 按 ⇧⌥F / Shift+Alt+F 格式化后
function greet(name, age) {
    return `Hello ${name}, you are ${age} years old`;
}

自动格式化 #

设置自动格式化 #

在 VSCode 设置中启用自动格式化：

json 
{
    "editor.formatOnSave": true,
    "editor.formatOnPaste": false,
    "editor.formatOnType": true
}

格式化设置说明 #

设置 说明
editor.formatOnSave 保存时自动格式化
editor.formatOnPaste 粘贴时自动格式化
editor.formatOnType 输入时自动格式化

缩进控制 #

缩进快捷键 #

功能 Mac Windows/Linux 说明
增加缩进 ⌘] Ctrl+] 增加缩进级别
减少缩进 ⌘[ Ctrl+[ 减少缩进级别

缩进设置 #

json 
{
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "editor.detectIndentation": true
}

缩进设置说明 #

设置 说明
editor.tabSize Tab 键的空格数
editor.insertSpaces 使用空格代替 Tab
editor.detectIndentation 自动检测文件缩进

格式化配置 #

默认格式化器 #

json 
{
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

按语言配置格式化器 #

json 
{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[python]": {
        "editor.defaultFormatter": "ms-python.black-formatter"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

Prettier 集成 #

安装 Prettier #

  1. 打开扩展面板（⌘⇧X / Ctrl+Shift+X）
  2. 搜索 “Prettier”
  3. 安装 “Prettier - Code formatter”

Prettier 配置文件 #

创建 .prettierrc 文件：

json 
{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "es5",
    "printWidth": 100
}

Prettier 配置说明 #

选项 说明
semi 是否添加分号
singleQuote 使用单引号
tabWidth 缩进宽度
trailingComma 尾随逗号
printWidth 每行最大字符数

代码风格配置 #

EditorConfig #

创建 .editorconfig 文件：

ini 
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

ESLint 集成 #

安装 ESLint 扩展后，可以结合格式化：

json 
{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

格式化实战案例 #

案例1：格式化 JSON #

json 
// 格式化前
{"name":"Alice","age":25,"email":"alice@test.com"}

// 按 ⇧⌥F / Shift+Alt+F 格式化后
{
    "name": "Alice",
    "age": 25,
    "email": "alice@test.com"
}

案例2：格式化 HTML #

html 
<!-- 格式化前 -->
<div><p>Hello</p><span>World</span></div>

<!-- 格式化后 -->
<div>
    <p>Hello</p>
    <span>World</span>
</div>

案例3：格式化 CSS #

css 
/* 格式化前 */
.container{display:flex;justify-content:center;align-items:center}

/* 格式化后 */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

格式化工作流 #

text 
┌─────────────────────────────────────────────────────────────┐
│                     代码格式化流程                            │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  编写代码                                                    │
│     │                                                       │
│     ├─────▶ 手动格式化                                       │
│     │        │                                              │
│     │        └─▶ ⇧⌥F / Shift+Alt+F                         │
│     │                                                       │
│     ├─────▶ 自动格式化                                       │
│     │        │                                              │
│     │        ├─▶ 保存时格式化 (formatOnSave)                 │
│     │        │                                              │
│     │        ├─▶ 粘贴时格式化 (formatOnPaste)                │
│     │        │                                              │
│     │        └─▶ 输入时格式化 (formatOnType)                 │
│     │                                                       │
│     └─────▶ 保存文件                                         │
│              │                                              │
│              └─▶ ⌘S / Ctrl+S                               │
│                                                             │
└─────────────────────────────────────────────────────────────┘

快捷键速查表 #

格式化操作 #

功能 Mac Windows/Linux
格式化文档 ⇧⌥F Shift+Alt+F
格式化选中内容 ⌘K ⌘F Ctrl+K Ctrl+F
增加缩进 ⌘] Ctrl+]
减少缩进 ⌘[ Ctrl+[

常见问题 #

Q: 格式化快捷键不生效？ #

A: 检查是否安装了格式化扩展，并设置了默认格式化器。

Q: 如何禁用特定文件的格式化？ #

A: 在文件顶部添加注释：

javascript 
// prettier-ignore
const uglyCode = {name:'Alice',age:25};

Q: 如何为项目配置统一的格式化规则？ #

A: 在项目根目录创建 .prettierrc 和 .editorconfig 文件。

练习建议 #

练习1：格式化文档 #

text 
1. 创建一个格式混乱的文件
2. 使用 ⇧⌥F / Shift+Alt+F 格式化
3. 观察格式化效果

练习2：配置自动格式化 #

text 
1. 打开 VSCode 设置
2. 启用 formatOnSave
3. 保存文件时观察自动格式化

练习3：配置 Prettier #

text 
1. 安装 Prettier 扩展
2. 创建 .prettierrc 配置文件
3. 自定义格式化规则

下一步 #

现在你已经掌握了代码格式化，接下来学习：

最后更新：2026-04-11