Vue项目中VS Code+Prettier格式化异常问题求助

重装Windows系统后在VS Code中安装Prettier插件，代码格式化效果与预期不符，以下是对比示例：

错误格式化结果 #

if (this.inter.total_quantity_inv != this.inter.invoice.quantity) {
  if (
    this.notice.notice_quantity >
    this.inter.invoice.quantity -
      this.inter.total_quantity_inv +
      initial_notice_quantity
  ) {
    this.notice.notice_quantity =
      this.inter.invoice.quantity -
      this.inter.total_quantity_inv +
      initial_notice_quantity;
    this.showThrottledError.call(
      this,
      "Cantitatea anexei nu poate depăși cantitatea facturii!"
    );
  }
}

期望的正确格式 #

if (this.inter.total_quantity_inv != this.inter.invoice.quantity) {
    if (this.notice.notice_quantity > this.inter.invoice.quantity - this.inter.total_quantity_inv + initial_notice_quantity) {
          this.notice.notice_quantity = this.inter.invoice.quantity - this.inter.total_quantity_inv + initial_notice_quantity;
          this.showThrottledError.call(this, "Cantitatea anexei nu poate depăși cantitatea facturii!");
    }
}

已尝试配置Prettier设置、重装插件及更换格式化工具，问题仍未解决，以下是可行解决方案：

解决方案 #

1. 调整Prettier的换行阈值 #

Prettier默认在80字符时自动换行，这是导致长表达式被拆分的核心原因：

• 打开VS Code设置（快捷键Ctrl+,），搜索prettier.printWidth
• 将数值调大至合适值（比如150或200），确保长条件表达式能在一行容纳

2. 统一缩进配置 #

匹配期望的缩进风格：

• 在VS Code设置中搜索editor.tabSize，设为4
• 搜索editor.insertSpaces，勾选启用（确保用空格而非制表符缩进）
• 同步Prettier的prettier.tabWidth设置为4，保证插件与编辑器缩进规则一致

3. 确认默认格式化工具为Prettier #

避免其他插件干扰：

• 点击VS Code右下角状态栏的格式化工具图标（显示当前使用的格式化工具）
• 选择Prettier - Code formatter作为默认工具
• 禁用其他JS格式化插件（如ESLint若开启自动格式化，需确保其规则与Prettier兼容）

4. 检查项目本地配置文件 #

项目根目录的本地配置会覆盖全局设置，需确认：

• 查看是否存在.prettierrc、.prettierrc.json或package.json中的prettier字段
• 确保本地配置的printWidth和tabWidth与需求一致，示例配置：

  {
    "printWidth": 150,
    "tabWidth": 4,
    "semi": true,
    "singleQuote": false
  }
  

5. 重置Prettier插件设置 #

若之前配置混乱，可重置后重新调整：

• 在VS Code扩展面板找到Prettier插件，点击右侧齿轮图标
• 选择Reset Settings，清除所有自定义设置后重新配置参数

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