Recuo e formatação de CSS do código do Visual Studio

Gostaria de saber se existe alguma maneira de ativar o recuo automático de um arquivo CSS no código do Visual Studio com o atalho ALT+ SHIFT+ F?

Está funcionando bem com JavaScript, mas estranhamente não com CSS.

Sim, tente instalar a extensão vscode-css-formatter .
Ele apenas adiciona a funcionalidade de formatar .cssarquivos e o atalho permanece o mesmo Alt+ Shift+ F.

Embeleze css / sass / scss / less

para executar isto

entrar alt+shift+f

ou

pressione F1 ou ctrl+shift+p e digite embelezar ..

um outro - JS-CSS-HTML Formatter

Acho que essa extensão usa js-beautify internamente

Perdi uma hora procurando a melhor opção.

Basta colocá-los juntos, para facilitar a leitura e escolher um deles.

Notas:

• CSS e SASS / SCSS / LESS estão todos relacionados
• HTML, Javascript, Typescript, JSON - o código VS já está sendo formatado
• CSS e relacionados - o código do VS não está sendo formatado hoje

Opções:

• Para formatar css / sass / scss / less:
  • Mais bonita
    • Todos os css relacionados são suportados, e não outros, eu escolhi este, funciona muito bem.
• Para formatar JavaScript / TypeScript / CSS:
  • Embeleze css / sass / scss / less
    • mas, já JS, TS são suportados pelo código VS
• Para formatar arquivo JS, CSS, HTML, JSON (envolve js-beautify)
  • Formatador JS-CSS-HTML
    • mas, JS, HTML, JSON já são suportados pelo código VS
• Para formatar CSS
  • Formatador CSS
    • mas, apenas CSS suportado, não todos os relacionados - não mantido por 6+ meses

Formatar:

Pressione Alt+ Shift+ Fno VS Code, após instalar o Prettier.

Depois de abrir bootstrap.min.css local no código do Visual Studio, parecia sem recuo. Tentei o commad ALT + Shift + F, mas em vão.

Então instalado

Extensão do formatador CSS .

Recarreguei e ALT + Shift + F indentou meu arquivo CSS com charme.

Bingo !!!

Existem vários para escolher na galeria, mas o que estou usando, que oferece um nível considerável de configurabilidade ainda permanecendo discreto para o resto das configurações é Beautify de Michele Melluso . Ele funciona com CSS e SCSS e permite recuar 3 espaços mantendo o resto do código em 2 espaços, o que é bom.

Você pode pegá-lo do GitHub e adaptá-lo você mesmo, se desejar.

Eu recomendo usar o Prettier porque é muito extensível, mas ainda funciona perfeitamente fora da caixa:

1. CMD + Shift + P -> Format Document

ou

1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

Vá para o menu Arquivos -> Preferências -> Extensões Em seguida, digite CSS Formatter, espere que ele carregue e clique em instalar

Instale a extensão HookyQR.beautify. Isso embelezará seu javascript, JSON, CSS, Sass e HTML no Visual Studio Code. São as extensões mais utilizadas para este fim

Beautify ( Github ) e Prettier ( Github ) são os melhores plug-ins para desenvolvimento web no Visual Studio Code.

Para formatar o código no Visual Studio quando quiser, pressione: (Ctrl + K) & (Ctrl + F)

As regras de formatação automática podem ser encontradas e alteradas em: Ferramentas / Opções -> (barra lateral esquerda): Editor de Texto / CSS (ou qualquer outro idioma que você deseja alterar)

Para a linguagem CSS, as opções são, infelizmente, muito limitadas. Você também pode fazer algumas alterações em: ... / Editor de Texto / Todos os Idiomas