如何使用Prettier

问题描述

我使用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仍然看起来相同。

解决方法

此处强制使用的“更漂亮”选项为printWidth，默认值为80。有问题的标记行的长度为82个字符加上前面的制表符空间的长度，这会导致linter / formatter中断线。

您可以增加printWidth来解决此问题：

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