Windows: Shift + Alt + F / Mac: Shift + Option + F

以下是VSCode中代码格式化的常用快捷键及扩展方法，综合多个权威来源整理而成：‌12

一、核心快捷键

  1. ‌通用格式化快捷键‌
    • Windows/Linux: Shift + Alt + F（最广泛推荐组合）
    • macOS: Shift + Option + F
    • 替代方案（部分环境适用）:
      • Ctrl + Shift + I（Windows）或 Command + Shift + I（Mac）
      • Alt + Shift + F（编程相关操作场景）
  2. ‌局部格式化‌
    选中代码后使用 Ctrl + K Ctrl + F（适用于特定代码块）

二、其他格式化方式

  • ‌右键菜单‌：选中代码 → 右键选择 Format Document 或 Format Selection
  • ‌命令面板‌
    1. 打开命令面板（Ctrl + Shift + P 或 Cmd + Shift + P）
    2. 输入 format → 选择对应选项
  • ‌自动保存时格式化‌：
    在设置中启用 Editor: Format On Save（搜索 format on save 勾选）

三、注意事项

  1. ‌插件依赖‌：需安装对应语言插件如[Prettier]、[ESLint]才能生效
  2. ‌自定义配置‌
    • 通过 Ctrl + ,（或 Cmd + ,）进入设置 → 搜索 format 调整规则
    • 团队开发时建议统一格式化规则
  3. ‌冲突排查‌：若快捷键失效，检查插件安装或更新VSCode版本

‌提示‌：不同语言或插件可能导致快捷键差异，建议优先测试通用组合 Shift + Alt + F。

前言

每次修改 .prettierrc.cjs 配置文件后，如果发现保存代码时格式化没有生效，可能是 VS Code 插件缓存未及时刷新。

建议此时重启 VS Code，确保新的配置被正确加载并生效。

一、安装 Prettier 插件

  1. 打开 VS Code
  2. 进入插件市场（快捷键 Ctrl+Shift+X）
  3. 搜索并安装插件：Prettier - Code formatter

二、配置 VS Code 设置

安装好 Prettier 插件后，进行以下设置：

a、通过图形化设置界面

  1. 打开设置（快捷键 Ctrl + ,）
  2. 搜索 Format On Save，勾选 Editor: Format On Save
  3. 搜索 Default Formatter，设置为 esbenp.prettier-vscode

b、添加 Prettier 配置文件

1、先安装依赖：npm install --save-dev prettier

2、根目录下添加文件：

  • .prettierrc.cjs 【.prettierrc.cjs 是 Prettier 的配置文件，它使用 CommonJS 模块系统（.cjs 后缀），主要用于定义代码格式化的规则。】
  • .prettierignore【.prettierignore 是 Prettier 的忽略文件列表，作用类似于 .gitignore，告诉 Prettier 哪些文件或目录不应该被格式化。】
/**
 * Prettier 配置文件
 * 官方配置文档：https://prettier.io/docs/en/options.html
 */

module.exports = {
  // ==============================
  // 基本格式设置
  // ==============================

  // 每行最大长度，超出自动换行（默认80）
  printWidth: 120,

  // 缩进空格数（默认2）
  tabWidth: 2,

  // 使用空格缩进而非 tab（默认false）
  useTabs: false,

  // 语句末尾加分号（默认true）
  semi: true,

  // 使用双引号而不是单引号（默认false）
  singleQuote: false,

  // 对象属性是否使用引号（"as-needed" 仅在必须时添加）
  quoteProps: "as-needed",

  // 在对象字面量中 key 与 value 之间添加空格（默认true）
  bracketSpacing: true,

  // 箭头函数参数是否使用括号
  // "avoid"：仅在必要时添加括号
  // "always"：始终添加括号
  arrowParens: "avoid",

  // 文件范围格式化的起始与结束位置（默认全文件）
  rangeStart: 0,
  rangeEnd: Infinity,

  // 行尾换行符类型（auto 代表跟随系统/原文件）
  endOfLine: "auto",

  // 是否格式化内嵌语言的内容（如 HTML 中的 <script>）
  embeddedLanguageFormatting: "auto",

  // ==============================
  // HTML / JSX 设置
  // ==============================

  // HTML 中的空格敏感性
  // "ignore"：忽略空格影响
  htmlWhitespaceSensitivity: "ignore",

  // 多行 JSX 标签的 > 是否放在最后一行末尾
  bracketSameLine: true, // 适用于所有 HTML/JSX
  jsxBracketSameLine: false, // 仅适用于 JSX，建议保持 false

  // JSX 属性中使用双引号（false 表示使用双引号）
  jsxSingleQuote: false,

  // 多行对象、数组、函数参数、调用等是否保留末尾逗号
  // "es5"：ES5 语法支持的地方添加（对象、数组等）
  trailingComma: "es5",

  // ==============================
  // 文件类型解析器覆盖
  // ==============================

  overrides: [
    {
      // Vue 文件使用 vue 解析器
      files: "*.vue",
      options: {
        parser: "vue",
      },
    },
    {
      // HTML 文件使用 html 解析器
      files: "*.html",
      options: {
        parser: "html",
      },
    },
    {
      // Markdown 文件使用 markdown 解析器
      files: "*.md",
      options: {
        parser: "markdown",
      },
    },
  ],

  // ==============================
  // 其他
  // ==============================

  // 指定默认解析器为 babel（可自动根据文件推断）
  parser: "babel",
};
# 忽略目录
**/node_modules/**
**/.git/**
**/.next/**
**/dist/**
**/build/**
**/coverage/**

# 忽略特定文件类型
*.min.js
*.min.css

# 忽略特定文件
package-lock.json
yarn.lock

# 忽略配置文件
**/.env
**/.env.local

# 忽略IDE相关文件
.vscode/
.idea/

# 忽略测试快照文件
**/__snapshots__/**

# 忽略自动生成的文件
**/generated/**

# 忽略文档文件
**/*.md
**/*.mdx

# 忽略图片等二进制文件
**/*.png
**/*.jpg
**/*.jpeg
**/*.gif
**/*.svg
**/*.ico

# 忽略日志文件
*.log

三、格式化整个项目

在项目中安装了 prettier 依赖，你以通过 Prettier 的命令行工具格式化整个项目：

  1. 确保项目中已安装 prettier：
npm install --save-dev prettier
  1. 在项目的 package.json 中添加格式化命令：
{
  "scripts": {
    "format": "prettier --write ."
  }
}

这条命令会遍历项目中的所有文件并格式化（包括 js、ts、vue、json 等支持的文件类型）。

  1. 运行格式化命令：
npm run format

这将会自动格式化整个项目中符合 Prettier 配置的文件。

附件 setting.json

附：我的setting.json文件，分类加了注释，可自行参考

{
  // ====================== 安全 & 交互 ======================
  "security.workspace.trust.untrustedFiles": "open", // 对于不受信任的文件，直接打开

  // ====================== 界面设置 ======================
  "workbench.colorTheme": "One Dark Pro", // 代码编辑器主题
  "workbench.iconTheme": "material-icon-theme", // 资源管理器图标主题
  "workbench.layoutControl.enabled": false, // 关闭工作台布局控制
  "window.zoomLevel": 1, // 界面缩放级别

  // ====================== 编辑器行为 ======================
  "editor.fontLigatures": false, // 禁用连字（特殊字符连接显示）
  "editor.mouseWheelZoom": true, // 允许使用鼠标滚轮 + Ctrl 进行缩放
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认代码格式化工具（Prettier）
  "editor.formatOnPaste": true, // 粘贴时自动格式化代码
  "editor.formatOnSave": true, // 保存时自动格式化代码
  "editor.linkedEditing": true, // HTML 关联编辑（修改标签时同步修改闭合标签）
  "editor.minimap.enabled": false, // 关闭代码小地图（minimap）
  "editor.tabCompletion": "on", // 启用 Tab 补全
  "editor.fontSize": 16, // 设置字体大小

  // ====================== 文件管理 ======================
  "files.autoSave": "onFocusChange", // 失去焦点时自动保存
  "explorer.confirmDelete": false, // 关闭文件删除确认框
  "explorer.confirmDragAndDrop": false, // 关闭拖拽文件确认框
  "files.trimTrailingWhitespace": true, // 自动删除行尾空格
  "files.insertFinalNewline": true, // 文件末尾自动添加换行符
  "files.exclude": {
    "**/.git": true,
    // "**/.vscode": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/out": true,
    "**/LICENSE": true
    // "**/.gitignore": true
  }, // 资源管理器中隐藏无关文件夹

  // ====================== 代码格式化（针对不同语言） ======================
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[plaintext]": {
    "editor.defaultFormatter": "lkrms.inifmt"
  },

  // ====================== 文件类型关联 ======================
  "files.associations": {
    "*.html": "html",
    "*.vue": "vue",
    "*.ts": "typescript"
  },

  // ====================== JavaScript & Vue 设置 ======================
  "vue.autoInsert.dotValue": true, // Vue 3 模板中自动补全 `.value`
  "javascript.updateImportsOnFileMove.enabled": "always", // JS 文件移动时自动更新 import

  // ====================== Git 相关配置 ======================
  "gitlens.gitCommands.skipConfirmations": [
    "fetch:command",
    "stash-push:command",
    "switch:command"
  ], // GitLens 插件：跳过 fetch、stash、switch 的确认提示
  "git.autofetch": true, // 自动从远程拉取最新代码
  "git.enableSmartCommit": true, // 启用智能提交（未填写 commit message 也能提交）
  "git.confirmSync": false, // 关闭 Git 同步确认框
  "git.path": "D:/dev/app/git/Git/cmd/git.exe", // Git 可执行文件路径

  // ====================== 其他设置 ======================
  "extensions.ignoreRecommendations": true, // 忽略 VS Code 插件推荐
  "diffEditor.ignoreTrimWhitespace": true, // 在 diff 视图中不忽略行尾空格变化

  // ====================== Lingma AI 相关 ======================
  "Lingma.cloudModelAutoTriggerGenerateLength": "long", // AI 生成长度（自动触发）
  "Lingma.cloudModelManualTriggerGenerateLength": "long", // AI 生成长度（手动触发）
  "Lingma.DisplayLanguage": "简体中文", // 界面语言
  "Lingma.PreferredLanguage for AI Chat": "简体中文", // AI 聊天的首选语言
  "Lingma.PreferredLanguage forCommitMessage": "简体中文",
  "remote.SSH.remotePlatform": {
    "hzh.sealos.run_ns-itmbl7jy_java-test": "linux"
  },
  "explorer.confirmPasteNative": false,
  "gitblame.revsFile": [],
  "typescript.updateImportsOnFileMove.enabled": "always"
}