Как отключить разбиение атрибутов в тегах элементов с помощью Prettier

Question

Я создал новый проект Vue с помощью Vue CLI. В качестве подсказки для опции линтера я выбрал 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 по-прежнему выглядит так же.

Answer 1

Здесь применяется параметр Prettier: printWidth, который имеет значение по умолчанию 80. Длина рассматриваемой строки разметки составляет 82 символа плюс длина предыдущего пространства табуляции, что приводит к разбиению строки линтером / форматером.

Вы могли бы увеличить printWidth для решения проблемы:

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