VS Code中如何用Prettier对.vue文件执行formatSelection操作？

以下是针对该问题的排查和解决步骤：

• 确认Prettier与Vue文件的关联配置
  打开VS Code的settings.json，添加或确认以下配置，确保Prettier正确关联.vue文件：

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.documentSelectors": ["**/*.vue"]
  

• 检查选中内容的语法完整性
  Prettier对Vue单文件组件的选择格式化，要求选中的是完整的语法块：

  • 若格式化<template>内的内容，需选中完整的HTML标签（比如整个<div>及其内部内容），不能只选标签的部分文本
  • 若格式化<script>内的JS代码，需选中完整的语句、函数或对象，避免选中不完整的代码片段

• 开启Vue文件的选择格式化支持
  在settings.json中添加配置，确保允许对Vue文件使用选择格式化：

  "[vue]": {
    "editor.formatOnSelection": true
  }
  

• 重置Prettier配置并重启

  • 临时移除项目根目录下的.prettierrc、.prettierignore等自定义配置文件，用默认配置测试
  • 通过命令面板执行Developer: Reload Window重启VS Code
  • 若问题仍存在，卸载并重新安装esbenp.prettier-vscode插件，确保使用最新版本

• 临时切换语言模式格式化
  如果模板部分的选择格式化仍失效，可以临时切换语言模式：
  选中要格式化的代码块，点击右下角的语言模式（显示为Vue），切换到对应子语言（比如<script>选JavaScript，<template>选HTML），执行Format Selection后再切回Vue模式

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