如何使用 Prettier 禁用元素标签中的属性中断答案

【问题标题】：How to disable attributes breaking in element tags with Prettier如何使用 Prettier 禁用元素标签中的属性中断
【发布时间】：2021-02-13 18:05:51
【问题描述】：

我使用 Vue CLI 生成了一个新的 Vue 项目。对于 linter 选项提示，我选择了 Prettier。如何禁用将属性中断为新行？例如：

这是我的标记：

<v-navigation-drawer
  v-model="drawer"
  :clipped="$vuetify.breakpoint.lgAndUp"
  app
>
   ...
</v-navigation-drawer>

我的预期输出是这样的：

<v-navigation-drawer v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp" app>
   ...
</v-navigation-drawer>

我尝试创建.prettierrc 文件，并添加了这个配置：

{
  "htmlWhitespaceSensitivity": "ignore"
}

但这对我不起作用，HTML 看起来还是一样。

【问题讨论】：

标签： vue.js vuejs2 eslint prettier prettier-eslint

【解决方案1】：

此处强制执行的 Prettier 选项是 printWidth，其默认值为 80。所讨论的标记行长度为 82 个字符加上前面的制表符空间的长度，这会导致 linter/formatter 分解该行.

你可以增加printWidth来解决这个问题：

// .eslintrc.js
module.exports = {
  rules: {
    //...
    "prettier/prettier": [
      "warn",
      {
        printWidth: 180,  // default = 80
      }
    ]
  }
}

【讨论】：