插件更新后代码“变样”是因为未锁定工具链版本及配置,导致prettier/eslint默认行为变更(如semi、quotes、tabwidth)被意外启用;必须锁死prettier、eslint及相关配置版本,并验证保存与cli格式化结果一致。

VSCode 插件更新本身不会导致风格不一致,真正出问题的是插件配置没锁死、工具链版本没对齐、或更新后规则行为变了但没人验证。
为什么插件更新后代码突然“变样”了
常见现象是:某天保存 JS 文件,突然多了分号、引号全变双、缩进从 2 变成 4——这不是插件“乱改”,而是新版本 Prettier 或 ESLint 默认行为变了,而你的项目没显式声明规则,于是 fallback 到新版默认值。
-
prettier-vscodev12+ 默认启用prettier.semi: true,旧版是false;没配.prettierrc就会跳变 -
eslint-plugin-prettier升级后可能把quotes规则从 warn 改成 error,本地保存时自动修,CI 却报错 - VS Code 自身更新(比如 1.118)可能调整了
editor.defaultFormatter的 fallback 逻辑,导致没配prettier.requireConfig: true的项目悄悄切回内置格式器
必须锁定的三个关键版本
光装插件不行,得让所有人用同一套“解释器”。这三处不锁,更新=失控:
-
prettier必须用npm install --save-dev prettier@2.8.8 --save-exact(别用^或~),并在.vscode/settings.json中写死路径:"prettier.prettierPath": "./node_modules/prettier" -
eslint和eslint-config-prettier也需--save-exact,且.eslintrc.js的extends数组里,"eslint-config-prettier"必须在最后 -
EditorConfig插件本身不用锁版本(它只读配置),但.editorconfig文件里不能依赖未声明的属性,比如indent_size = 2对[*.js]有效,但对[src/**/*.js]在旧版插件里可能不生效
更新前必须跑的验证清单
每次升级插件或工具链,不是点“更新”就完事。以下检查项缺一不可:
- 删掉一行末尾分号,保存 → 应该自动补上(验证
prettier.semi生效) - 把
"hello"改成'hello',保存 → 不应被转回双引号(验证prettier.singleQuote: true且 ESLint 没冲突) - 打开一个被
.prettierignore排除的文件,右下角语言模式显示JavaScript→ 按Ctrl+K Ctrl+F应无反应(验证 ignore 逻辑正确) - 运行
npx prettier --write src/index.js和 VS Code 保存后的结果必须完全一致(验证编辑器和 CLI 行为同步)
最常被忽略的一点:插件更新后,.vscode/settings.json 里的 editor.defaultFormatter 值可能被 VS Code 自动重置为 "" 或空字符串,尤其当插件 ID 变更(比如从 esbenp.prettier-vscode 切到新命名空间)。手动检查右下角格式器图标是否还是 Prettier 图标,比看设置更可靠。











