Pesquisa de site

angular - Como desativar as configurações do prettier que criam uma nova linha com > de uma tag HTML?


Eu caminho pela extensão Prettier do Vscode e não consigo encontrar como desativar este cenário. Veja o > da tag html.

Aqui está um código de exemplo que precisava de alguns ajustes, toda vez que eu executo o Prettier. A saída é esta:

<tag-html
 [val1]="valueStr"
 [val2]="valueStr"
>
</tag-html>

Eu quero que o Prettier produza:

<tag-html
 [val1]="valueStr"
 [val2]="valueStr">
</tag-html>

Resposta #1

Para JSX (e outros tipos de arquivo, como HTML) isso pode ser feito configurando

"bracketSameLine": true

no seu .prettierrc

veja https://prettier.io/docs/en/options.html#bracket-line

(ou jsxBracketSameLine para versões < 4.2.0)

Resposta #2

Isso pode ser feito com a ajuda do próprio VS Code. Coloque a seguinte entrada nas configurações do seu espaço de trabalho no seu VS Code.

"html.format.wrapAttributes": "force-aligned"

Você não precisa de nenhum plugin ou extensão externa para fazer isso.

Ou você também pode usar a página de configurações da GUI

ATUALIZAÇÃO 01

Com base em um problema do GitHub no repositório do Prettier https://github.com/prettier/prettier-vscode/issues/646

você ainda pode mesclar as configurações que mencionei acima.

Artigos relacionados