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

102

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.

css visual-studio-code A. DC
fonte
você tentou esta extensão? marketplace.visualstudio.com/…
ciclomotor de

Respostas:

105

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.

NValchev
fonte
Este está fazendo o trabalho perfeitamente. Tentei o outro sugerido pela motoneta, mas sempre que salvava um arquivo, precisava salvar duas vezes.
A. DC
1
Como usar essa extensão no windows? alt + shift + f não funciona e não existe a opção 'Formatar código' ao clicar com o botão direito.
kyw
1
Você reiniciou o vs-code após a instalação da extensão? Além disso, em quais arquivos você está tentando executar este comando?
NValchev
13
Não funcionou para mim. Alt+Shift+Fainda dando: Desculpe, mas não há formatador para arquivos 'css' instalados. após a recarga. Embeleze css / sass / scss / menos trabalhado.
Leo
Funciona muito bem no Mac (Cmd + K, Cmd + F) e não afeta a formatação de outros tipos de arquivo usando o mesmo atalho de teclado. Obrigado
mojave
44

Embeleze css / sass / scss / less

para executar isto

entrar alt+shift+f

ou

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

insira a descrição da imagem aqui

um outro - JS-CSS-HTML Formatter

Acho que essa extensão usa js-beautify internamente

bhv
fonte
alt + shift + f não fez nada, mas digitar embelezar ... funcionou.
rtaft
Outra forma de usar o Formatador JS-CSS-HTML é -> abrir o Menu de Contexto e escolher Formatar Código
Chanaka Fernando
23

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:
  • Para formatar arquivo JS, CSS, HTML, JSON (envolve js-beautify)
  • 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.

Manohar Reddy Poreddy
fonte
Mais bonito lista scss, mas não ousado. Beautify afirma apoiar Sass, mas pela minha experiência reduz tudo para uma única linha. (falando explicitamente de Sass, não de Scss)
Frank Nocke
5

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 !!!

Shahbaaz Khan
fonte
4

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.

Konrad Viltersten
fonte
4

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
feihcsim
fonte
3

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

Ahmed Adewale
fonte
1

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

William Dekou
fonte
-8

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

Sion
fonte
6
A pergunta é para Visual Studio Code (VSCode) e não Visual Studio
Pierre