VSCode 保存时为啥不能自动格式化我的 JS 代码？

Newb.志红提问于 2026-03-02 20:15:19 阅读 23

工具

我装了 Prettier 插件，也设置了保存时自动格式化，但每次保存这段代码都没反应，到底哪里没配对？

我试过在设置里勾选“Format On Save”，还重启了好几次 VSCode，就是不生效。控制台也没报错，就是干看着代码乱糟糟的……

function hello(name) {
console.log('Hi, ' + name)
return name.length > 5 ? 'long' : 'short'
}
hello('Alice')

我来解答赞 5 收藏

反馈

2 条解答

统乐 Dev Lv1

这个问题很常见 ты 不是 Format On Save 开了就行，还得指定用哪个格式化器。

你需要在设置里把 JavaScript 的默认格式化器指定为 Prettier。两种方式：

一是直接改 settings.json，加这段：

"[javascript]": {

  "editor.defaultFormatter": "esbenp.prettier-vscode"

}

二是在设置里搜 "Editor: Default Formatter"，在 JavaScript 那项里选 Prettier。

另外提醒一下，Prettier 默认会用单引号，但你代码里的是单引号，格式化完不会变。如果想保持单引号，在 .prettierrc 或者 prettierrc.json 里加：

{

  "singleQuote": true

}

还有种情况是工作区设置覆盖了用户设置，看下你的 .vscode/settings.json 里有没有冲突的配置。

设置完再保存一次，应该就生效了。

2026-03-19 10:06

夏侯子怡 Lv1

这个问题我之前也踩过坑，大概率是 VSCode 不知道该用哪个格式化器。

你虽然装了 Prettier，也开了保存格式化，但 VSCode 默认不知道 JS 文件要交给 Prettier 处理。需要在设置里明确指定一下。

打开你的 settings.json，加上这几行：

{

  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "[javascript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  }

}

第一个是全局默认，第二个是针对 JS 文件的，双保险。

还有一种情况，如果你项目根目录有其他格式化配置文件（比如 .eslintrc 或者 .prettierrc），但配置有冲突或者不完整，Prettier 可能会静默失败。可以检查一下项目里有没有这些文件，没有的话建一个 .prettierrc：

{

  "semi": true,

  "singleQuote": true,

  "tabWidth": 2

}

改完之后重启一下 VSCode，再试试保存应该就生效了。

顺便说一句，你那段代码格式化之后可以优化成这样，可读性好很多：

function hello(name) {

  console.log('Hi, ' + name);

  return name.length > 5 ? 'long' : 'short';

}



hello('Alice');

还不行的话，按 Cmd+Shift+P（Windows 是 Ctrl+Shift+P），输入 Format Document With...，手动选一下 Prettier，看看报不报错。报错就是配置文件有问题，不报错就是默认格式化器没配对。

2026-03-02 20:18