VSCode怎么设置保存时自动添加分号_VSCode如何配置Prettier在保存时补全末尾分号【技巧】-VSCode-PHP中文网

vscode 保存时自动加末尾分号依赖 prettier 的 semi: true 配置，而非 eslint 或编辑器原生功能；需安装 prettier 插件、配置文件（如 .prettierrc）、启用 editor.formatonsave，并确保对应语言（js/ts/tsx）绑定 prettier 为默认格式化工具。

vscode怎么设置保存时自动添加分号_vscode如何配置prettier在保存时补全末尾分号【技巧】

VSCode 保存时自动加末尾分号，靠的是 Prettier 配置，不是 ESLint 或编辑器原生功能

VSCode 本身不决定是否加`;`，它只是执行格式化工具的输出。真正起作用的是你装的 prettier 插件 + 对应的语言配置。很多人试了 ESLint 的 semi: true 却没效果，就是因为 ESLint 默认不自动修复（尤其不自动插入缺失的分号），而 Prettier 才是那个“保存即补全”的主力。

确保已安装 VSCode 插件：Prettier - Code formatter
项目根目录必须有 prettier.config.js、.prettierrc 或 package.json 中含 prettier 字段，否则 VSCode 不会调用 Prettier 格式化 JS/TS
检查当前文件是否被 Prettier 支持：打开一个 .js 文件，右下角状态栏看格式化工具名是不是 Prettier；如果不是，点它手动选一次

让 Prettier 在保存时自动补分号，关键就一条配置：`semi: true`

Prettier 默认就是 semi: true（即保留分号），但如果你或团队曾改过配置，或者用了别人的基础配置（比如 prettier-config-standard），它可能被设为 false。只要这一项是 true，Prettier 就会在所有允许的位置补上结尾分号——包括函数调用、对象字面量后、return 表达式末尾等。

在 .prettierrc 中写：
```
{"semi": true}
```
如果用 prettier.config.js：
```
module.exports = { semi: true };
```
注意：不要写成 semi: "always" 或 "true"（字符串）——Prettier 只认布尔值 true/false
semi: true 不影响箭头函数单表达式体（如 x => x + 1）——它本来就不需要分号，Prettier 也不会硬加

为什么保存没反应？大概率是 VSCode 的保存格式化没开或配错了语言

即使 Prettier 配置正确，VSCode 也得知道“保存这个文件时该调用谁”。常见静默失败原因不是代码问题，而是编辑器行为开关没对齐。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

确认开启了保存时格式化："editor.formatOnSave": true（写在用户设置或工作区 settings.json 中）
确认当前语言模式被 Prettier 支持：JS/TS/JSX/TSX 默认支持；Vue、Svelte 等需额外配置 prettier.documentSelectors 或装对应插件
检查有没有冲突的格式化工具：如果同时启用了 ESLint 的 eslint.format.enable，且没关掉 Prettier，VSCode 可能随机选一个执行——建议禁用 ESLint 的格式化能力，只留其校验功能
验证方式：手动按 Shift+Alt+F（Windows/Linux）或 Shift+Option+F（macOS），看分号是否立刻补上；如果手动可以、保存不行，基本就是 formatOnSave 没开或语言绑定失效

TypeScript 和 JSX 文件也要单独验证，它们的分号规则和 JS 完全一致但容易被忽略

很多人只在 .js 里测试成功，一写 .ts 或 .tsx 就发现分号没加——其实不是规则不同，而是 VSCode 可能没把这类文件关联给 Prettier。

打开一个 .ts 文件，右下角看语言模式是不是 TypeScript；如果是 TypeScript React，确保你的 Prettier 配置里没 exclude 掉 tsx

在 settings.json 中显式指定格式化工具（避免自动探测失效）：

"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },<br>"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }

JSX 中的表达式（如 {count + 1}）内部不加`;`，但整个语句结尾（如 return <div>{x}</div>;）仍受 semi: true 控制
TS 接口、类型别名末尾不加分号（interface A { x: number; } 中的 number; 是类型系统语法，不是语句分号），Prettier 从不碰这里——别误以为它“漏了”