¿Cómo evita que Prettier en el código VS divida los atributos en varias líneas?

Estoy usando prettier para formatear mi código en VS Code, pero realmente no me gusta cómo lo hace.

Mi problema principal es dividir los atributos en varias líneas.

<input
    type="checkbox"
    name="asiaNews"
    id="asiaNews"
    value="asiaNews"
/>

Preferiría que se viera así

<input type="checkbox" name="asiaNews" id="asiaNews" value="asiaNews" />

no encuentro nada en el documentos o en SO

¿Cómo evitar que VS Code divida líneas HTML largas en varias líneas?

¿Hay alguna manera de hacerlo o una herramienta diferente que pueda usar para tener mis propias reglas de formato personalizadas que se adapten a mis sensibilidades?

Una solución rápida es ir a Prettier Extension Settings (ctrl + shift + X) y en Prettier Extension Settings, busque “Print Width” y configúrelo en 250 o cualquier cosa que funcione para usted.

1: Vaya a Configuración de la extensión:

2: Cambia el valor de Ancho de impresión a tu gusto.

Para deshabilitar el código de formato al guardar. Desactive “Formatear al guardar” y use Alt+Shift+F para formatear el código cuando quieras.

Puede verificar visualmente la configuración aquí

Después de probar mucho, se me ocurrió la siguiente solución.

1. Deshabilite más bonito para los archivos html y use el formateador predeterminado proporcionado por el código VS.
2. Establezca la longitud de la línea según los requisitos. (Lo puse a 100)

Aquí está mi settings.json después de los cambios anteriores.

{
  "editor.formatOnSave": true,
  "html.format.wrapLineLength": 100,
  "prettier.disableLanguages": ["html"]
}

Esto intentará ajustar los atributos HTML solo si la longitud es superior a 100. Lo bueno es que incluso si la longitud supera los 100, no ajustará cada atributo a una nueva línea.

Agregue esta línea para configurar JSON para aumentar el ancho de línea máximo,

  "prettier.printWidth": 160,

{"printWidth": 100} en prettierrc.json es bastante bueno.

mi solución fue desinstalar más bonito !! e instale la extensión ESLint y TypeScript. viene con un formateador básico que hace exactamente lo que quería. puede deshabilitarlos y habilitarlos buscando formateador en la configuración

Esto sucede porque es más bonito suponer que desea que el ancho de su código sea de 80 caracteres solo debido a su configuración predeterminada.

Así que deberías decirle más bonita a Tengo demasiado espacio.

Para hacer esto simplemente crea .prettierrc.json archivo en la carpeta raíz y agregar

{
 "printWidth": 600
}

Y guarde su archivo. Esto solucionará su problema.

añadir nueva regla en .prettierrc.json que se encuentra en su proyecto:

{
    printWidth": 160,
}