如何阻止Prettier自动换行破坏单行代码？

我在VSCode中使用Prettier插件格式化代码时，遇到了Prettier自动换行破坏单行代码的问题，示例如下：

示例1：JSX内的表达式被强制换行 #

原代码：

<p>{text.replace(/\n/g, " ").split(' ').filter(value => value != "").length} words and {text.trim().length} charaters</p>

格式化后代码：

<p>
          {
            text
              .replace(/\n/g, " ")
              .split(" ")
              .filter((value) => value != "").length
          }{" "}
          words and {text.trim().length} charaters
        </p>

示例2：按钮文本被强制换行 #

原代码：

<button className='btn btn-primary my-1 mx-1' onClick={handelUpclick}>Convert to UPPERCASE</button>

格式化后代码：

<button className='btn btn-primary my-1 mx-1' onClick={handelUpclick}>
Convert to UPPERCASE
</button>

当前配置 #

Prettier配置（.prettierrc或类似文件） #

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "strict",
  "insertPragma": false,
  "singleAttributePerLine": false,
  "bracketSameLine": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": true,
  "printWidth": 140,
  "proseWrap": "preserve",
  "quoteProps": "consistent",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "embeddedLanguageFormatting": "auto",
  "vueIndentScriptAndStyle": false
}

VSCode配置（settings.json） #

{
  "workbench.colorTheme": "Popping and Locking Black Theme",
  "editor.formatOnSave": true,
  "workbench.iconTheme": "material-icon-theme",
  "editor.fontFamily": " 'AnonmicePro Nerd Font', 'Cinecav X Type' , Consolas, 'Courier New', 'Cinecav X Mono', monospace",
  "editor.tabSize": 2,
  "workbench.startupEditor": "none",
  "editor.guides.bracketPairs": true,
  "terminal.integrated.fontFamily": "AnonmicePro Nerd Font Mono",
  "terminal.integrated.fontWeight": "550",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "prettier.singleAttributePerLine": false,
  "prettier.jsxSingleQuote": true,
  "prettier.printWidth": 100,
  "prettier.htmlWhitespaceSensitivity": "strict",
  "html.format.wrapLineLength": 100,
  "editor.formatOnType": true,
  "editor.tokenColorCustomizations": {
    "textMateRules": []
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.endOfLine": "lf",
  "prettier.quoteProps": "consistent",
  "prettier.bracketSameLine": true,
  "eslint.format.enable": true,
  "prettier.jsxBracketSameLine": true
}

• 统一printWidth配置：当前Prettier文件里的printWidth是140，但VSCode设置里是100，两者不一致会导致Prettier按较小的100宽度判断换行。把VSCode的prettier.printWidth改成140（或更大的数值，比如180），确保单行代码长度不超过阈值就不会被强制换行。

• 调整htmlWhitespaceSensitivity配置：当前设置的是strict，这个规则会让Prettier对HTML/JSX的空白更敏感，容易触发换行。可以改成ignore，减少因空白感知导致的不必要换行，修改后配置项为：

  "htmlWhitespaceSensitivity": "ignore"
  

• 局部禁用特定代码的格式化：如果只想保留某几行的单行格式，不想全局修改配置，可以在目标JSX元素前添加/* prettier-ignore */注释，示例：

  /* prettier-ignore */
  <p>{text.replace(/\n/g, " ").split(' ').filter(value => value != "").length} words and {text.trim().length} charaters</p>
  
  /* prettier-ignore */
  <button className='btn btn-primary my-1 mx-1' onClick={handelUpclick}>Convert to UPPERCASE</button>
  

• 修改embeddedLanguageFormatting配置：当前设置的是auto，Prettier会自动格式化JSX内的JS表达式，导致链式调用被换行。改成off可以禁用对嵌入代码的格式化，保留原有的单行链式调用：

  "embeddedLanguageFormatting": "off"
  

• 检查proseWrap配置：当前proseWrap设为preserve，这个规则会保留文本的换行，但对于JSX内的短文本可能也会触发换行。如果不需要保留文本换行，可以改成never：

  "proseWrap": "never"
  

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