VSCode中如何使用Prettier仅格式化高亮选中的代码片段

核心逻辑 #

Prettier原生支持局部选中格式化，不需要额外安装第三方插件，只要触发对应命令即可，注意不要误用全文档格式化命令。

具体操作步骤 #

• 选中需要格式化的代码区域：支持整行选中、行内部分片段选中，只要选中的片段语法相对完整即可
• 触发对应格式化命令：
  • 唤起命令面板：Windows/Linux按Ctrl+Shift+P，Mac按Cmd+Shift+P
  • 搜索并执行格式化选定内容（Format Selection），不要选择「格式化文档」选项
• （可选）绑定专属快捷键：
  • 打开快捷键设置面板：Windows/Linux按Ctrl+K后再按Ctrl+S，Mac按Cmd+K后再按Cmd+S
  • 搜索命令ID editor.action.formatSelection，绑定你习惯的快捷键即可，注意不要和「格式化文档」的快捷键冲突
• （必做）确认默认格式化器：
  选中任意代码片段右键，选择「使用...格式化选定内容」，在弹出列表里选择Prettier，设置为默认值即可。

效果验证 #

整行选中测试 #

初始代码：

let a = [1, 2, 3,          4]; // line1

let b = [          1,2 ,3,4]; // line3

仅选中第1行执行格式化选定内容后，第1行将修正为let a = [1, 2, 3, 4]; // line1，第3行格式完全保持原样。

行内片段选中测试 #

初始代码：

const test = (a, b,          c) => {  // line 1
  console.log("show a",          a);   // line 2
  console.log("show b",     b);   // line 3
}

仅选中第1行中的b, c片段执行格式化，将仅把选中区域的多余空格修正为b, c，第2、3行代码不会有任何改动。

注意事项 #

• 如果选中的代码片段语法残缺（比如只选中半个括号、半段函数声明），Prettier会自动匹配语法结构做调整，可能出现不符合预期的格式化结果，尽量选中语法完整的片段再操作
• 如果安装了多个格式化类插件，必须确认「格式化选定内容」的默认提供方为Prettier，否则会触发其他插件的格式化逻辑

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