Come disabilitare gli attributi che interrompono i tag degli elementi con Prettier
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
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
}
]
}
}