VSCode中无法将Prettier设为React项目默认格式化工具

1. 修正核心配置错误 #

你的settings.json里写了"prettier.enable": false，这直接禁用了Prettier扩展，把它改成true：

"prettier.enable": true,

保存配置后重启VSCode再试。

2. 确保Prettier扩展安装在WSL环境中 #

在WSL工作区里，VSCode的扩展分Windows端和WSL端两种。打开扩展面板，找到Prettier，看是否标注了Installed in WSL: [你的发行版名称]。如果是装在Windows端，点击Install in WSL重新安装到WSL环境。

3. 安装Prettier的npm依赖 #

Prettier扩展需要依赖npm包，在WSL终端执行：

• 全局安装：npm install -g prettier
• 项目本地安装（推荐）：进入项目根目录执行npm install --save-dev prettier，确保项目根目录有package.json文件。

4. 确认文件类型与格式化器配置 #

• 打开App.tsx，右下角确认文件类型是TypeScript JSX，不是其他类型。
• 按Ctrl+Shift+P打开命令面板，输入Format Document With...，如果仍无Prettier选项，执行Preferences: Configure Language Specific Settings，选择TypeScript React，确保配置如下：

  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
  

5. 清理WSL端VSCode缓存 #

如果以上步骤都无效，进入WSL终端删除VSCode缓存目录：

rm -rf ~/.vscode-server

重启VSCode并重新连接WSL工作区，扩展会自动重新安装。

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