Come disabilitare gli attributi che interrompono i tag degli elementi con Prettier

Aug 24 2020

Ho generato un nuovo progetto Vue utilizzando Vue CLI. Per il prompt dell'opzione linter, ho scelto Prettier. Come disabilito l'interruzione degli attributi in nuove righe? Per esempio:

Questo è il mio markup:

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

e il mio output previsto è questo:

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

Ho provato a creare il .prettierrcfile e ho aggiunto questa configurazione:

{
  "htmlWhitespaceSensitivity": "ignore"
}

ma questo non ha funzionato per me e l'HTML sembra ancora lo stesso.

Risposte

3 tony19 Aug 26 2020 at 07:56

L'opzione più carina che viene applicata qui è printWidth, che ha un valore predefinito di 80. La riga di markup in questione è lunga 82 caratteri più la lunghezza dello spazio di tabulazione precedente, il che fa sì che linter / formattatore interrompa la riga.

Potresti aumentare il printWidthper risolvere il problema:

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