VSCode保存Vue组件时模板代码异常换行是Prettier还是ESLint导致？

这个异常换行是Prettier导致的，和ESLint无关。
Prettier默认设置printWidth: 80，单行代码字符数超过阈值就会自动折行。旧版本Prettier识别Vue模板插值内的JavaScript字符串时存在语法判断bug，会直接从字符串引号内部拆分换行，直接导致代码语法错误无法运行。

正常预期的单行代码：

<h4>Depot Edit - {{ route.params.code }}, {{ depotStore.currentDepot ? depotStore.currentDepot.name : "Loading..." }} </h4>

异常格式化后会被错误拆成：

<h4>Depot Edit - {{ route.params.code }}, {{ depotStore.currentDepot ? depotStore.currentDepot.name : "Loading 
Depot..." 
}} </h4>

验证方式很简单：临时禁用VSCode的Prettier保存格式化，只保留ESLint，保存同一段代码如果没有出现断行，就能确认问题来源。

按优先级选以下任意一种即可：

• 调整Prettier全局配置
  在项目根目录的Prettier配置文件（比如.prettierrc、prettier.config.js）中添加/修改以下规则：

  {
    "printWidth": 120,
    "proseWrap": "never",
    "htmlWhitespaceSensitivity": "ignore"
  }
  

  其中printWidth可以根据团队代码规范自行调整，适当放宽行宽阈值；proseWrap: "never"会禁止Prettier对字符串、文本类内容强制折行；htmlWhitespaceSensitivity: "ignore"会让Prettier处理Vue模板折行时忽略空格影响，避免无意义断行。配置完成后重启VSCode即可生效。
• 单行忽略格式化
  如果不想修改全局配置，直接在这行代码上方加Prettier忽略注释，就会跳过对这行的格式化处理，保留原始代码格式：

  <!-- prettier-ignore -->
  <h4>Depot Edit - {{ route.params.code }}, {{ depotStore.currentDepot ? depotStore.currentDepot.name : "Loading..." }} </h4>
  

• 升级Prettier版本
  Prettier 2.0之后的版本已经修复了Vue模板插值内字符串错误折行的bug，如果项目用的Prettier版本过低，直接升级到最新稳定版即可解决：

  npm install prettier@latest --save-dev
  

如果项目中用了eslint-plugin-prettier把Prettier规则集成到了ESLint中，改完配置后需要重启ESLint服务才能加载新规则：在VSCode中按快捷键Ctrl+Shift+P（Mac系统为Cmd+Shift+P），搜索执行ESLint: Restart ESLint Server即可。
不要为了规避折行把字符串手动拆成拼接形式，会额外降低代码可读性，优先通过配置规则解决问题。

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