Visual Studio Code中Prettier保存自动格式化失效问题解决

环境配置 #

• Visual Studio Code 1.75.1
• 已安装Prettier - Code formatter v9.10.4扩展
• 全局设置中已将editor.defaultFormatter设为Prettier
• 已开启format on save选项

问题现象 #

在React项目的JavaScript文件中，按下Ctrl+S保存时，代码未被Prettier格式化：

import React from "react";

import ChartBar from "./ChartBar";
import "./Chart.css";

const Chart = (props) => {
  return <div><div> do something </div><div> do something </div><div> do something </div></div>;
};

export default Chart;

但右键选择「Format Document with」并指定Prettier Code Formatter后，代码能被正确格式化：

import React from "react";

import ChartBar from "./ChartBar";
import "./Chart.css";

const Chart = (props) => {
  return (
    <div>
      <div> do something </div>
      <div> do something </div>
      <div> do something </div>
    </div>
  );
};

export default Chart;

即使在工作区.vscode/settings.json中设置了全局默认格式化程序，问题依然存在：

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

解决方案 #

在工作区的.vscode/settings.json中，针对JavaScript语言单独指定默认格式化程序：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

添加该配置后，按下Ctrl+S保存时，Prettier会正常触发格式化。

内容的提问来源于stack exchange，提问作者klewis