VSCode não preenche automaticamente o HTML

87

Estou tendo problemas com meu novo Visual Studio Code instalado no Windows 7. No Mac, o editor fecha automaticamente as tags html, mas no Win7 não. Presumo que deve haver alguma opção para ligá-lo, mas não consigo encontrar nenhuma.

Estou falando sobre quando, por exemplo. escrevendo <htmlo intelliSense aparece e você clica em entrar, geralmente ele automaticamente coloca o </html>meu não está funcionando. (O IntelliSense aparece, mas quando você seleciona uma das opções ele não auto perto da tag: <h1> -> </h1>)

html intellisense visual-studio-code Harvey3589661
fonte
1. você pode usar a etiqueta de fechamento automático , pode atender às suas necessidades.
jialin wang
2
2. digite um tagname, como div , em seguida, digite a tecla tab duas vezes, ele irá preencher automaticamente a tag whoe -----> <div> </div>
jialin wang

Respostas:

42

Das notas da versão 0.3.0

O fechamento automático de tags em HTML foi removido e substituído por um IntelliSense mais inteligente ativado </.

John Papa
fonte
5
Oh, isso não é algo que eu esperava. Existe alguma maneira de trazê-lo de volta? Modificar alguns arquivos ou baixar algo? Eu gostaria de usar o VSCode, mas com preenchimento automático. Obrigado.
Harvey3589661
56
Eu também estava procurando por isso, mas percebi que usar a guia funciona para mim na versão 0.10.6. Por exemplo, digite div(sem o <>) e pressione tab imediatamente, e ele entra <div></div>. Não é exatamente o mesmo, mas pode ser útil. Doco para esses atalhos (emmet) aqui
peterc
3
sim, isso é devido a Emmet. Emmet, vamos digitar os nomes dos elementos sem as chaves e ele adicionará o que for necessário. É muito poderoso.
John Papa
1
Isso não funciona para mim no VS Code 1.5.3. Se eu digitar <div> então </ ele não fecha / completa a tag. Algo que estou perdendo aqui?
Michael Giovanni Pumo,
2
Basta digitar divsem <>e pressionar a guia não funciona mais após as atualizações mais recentes. Existe uma maneira de reativar isso?
Kokodoko
173

Digite o nome da tag (sem iniciar <) e pressione Tab

por exemplo digite div e pressione tab e o VS o converterá para<div></div>

Ou digite a tag de abertura e pressione Tab duas vezes

por exemplo :

  1. tipo <div
  2. pressione Tab
  3. pressione Tab

irá adicionar a tag de fechamento

Rabolf
fonte
2
E quanto às tags de fechamento automático (por exemplo, <input />)?
Randall Flagg
1
basta digitar input e pressionar Tab duas vezes, o VS Code completará automaticamente para <input type = "text">
Amit Mittal
1
Só quero acrescentar que isso faz parte da funcionalidade do Emmet, que permite gerar facilmente uma estrutura HTML mais complexa, não apenas pares de tags. Por exemplo, você pode ler isso , ou apenas google para Emmet.
Alex Che
@Rabolf você pode mencionar alguns outros atalhos HMTL legais para o VS Code?
eMad de
@eMAD infelizmente não continuei usando o VS Code
Rabolf
56

Eu estava tendo o mesmo problema, então vi algo no meu canto inferior direito do código vs .. em vez de usar HTML, eu estava usando Django-HTML, então mudei a linguagem para html, Boom tudo está funcionando bem novamente. veja a imagem

Siphamandla Hero Ngwenya
fonte
Tive um problema semelhante, mas no meu caso percebi que estava escrevendo HTML em um arquivo PHP. Suponha que eu não consiga usar tags de fechamento automático enquanto estiver.
Prometheus
1
não é necessário alterar o idioma, apenas adicione a settings.json "emmet.includeLanguages": {"django-html": "html"}
raultedesco
Eu consertei meus templates Twig não intelisensing HTML graças ao comentário de @raultedesco acima. Ctrl+Shift+p-> abrir Perferences: Open Settings (UI)-> pesquisar includedLanguages-> encontrar idiomas incluídos no Emmet -> inserir Item: twig; Value: html-> pressionar Add item-> aproveitar.
Valentine Shi
22

Aqui está um truque legal (na verdade, uma abreviatura de Emmet) :

  • escreva o nome da tag | por exemploh1
  • adicione um asterisco depois disso | por exemploh1*
  • pressione | (resultará em )Tab<h1></h1>

­

PS: Isso também funciona para tags de fechamento automático, como - input, imgetc.

ɢʀᴜɴᴛ
fonte
1
@Kokodoko Sim, vale :P
ɢʀᴜɴᴛ
Isso é tão estranho ... Não tenho certeza de qual configuração alterar para reativá-la ...
Kokodoko
1
@Kokodoko você deve ter a extensão emmet instalada.
Sudhanshu
1
Isso funciona, mas não há necessidade de incluir o *. 1.21.0
Molho
1
@BlueClouds yes e qualquer um deles que forneça suporte para abreviações html, deve funcionar. Por uma regra genérica, eu uso aquele com o máximo de instalações.
Sudhanshu
15

Você pode tentar esta extensão para VS Code. Ele implementou a função de tag de fechamento automático e atenderia aos seus requisitos:

  • Adiciona automaticamente a marca de fechamento ao digitar o colchete de fechamento da marca de abertura
  • Após a tag de fechamento ser inserida, o cursor fica entre a tag de abertura e fechamento
Jun Han
fonte
Isso é o que eu precisava. Funciona como colchetes agora, o que é ótimo. Obrigado!
Harvey3589661
Sim, mas ... foi habilitado em versões anteriores do VS Code. Não é apenas uma configuração em algum lugar no labirinto de settings.json?
Kokodoko
7

Encontrei o mesmo problema no Mac Sierra (10.12.6) com VSCode (1.30.2), ao editar um arquivo HTML. De acordo com as documentações do vscode https://code.visualstudio.com/docs/languages/html , o intellisense deve funcionar imediatamente .

Descobriu-se que a "Detecção de idioma" (no canto direito da barra de status do editor na parte inferior da tela) está definida como Detecção automática e reconheceu o arquivo como django-html. Quando alternado manualmente de volta para Html simples, tudo funciona.

XX
fonte
5
  1. Pressione Ctrl + Shift + P para abrir a paleta de comandos.
  2. Digite 'Alterar Modo de Idioma' no buscador.
  3. Selecione 'Alterar Modo de Idioma' .
  4. Digite 'HTML' no buscador.
  5. E selecione 'HTML' (provavelmente foi definido como 'django-html)
Khapi
fonte
3

Pressione 𝐜𝐭𝐫𝐥+𝐬𝐡𝐢𝐟𝐭+𝐏-> digite 𝐂𝐡𝐚𝐧𝐠𝐞 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞 𝐌𝐨𝐝𝐞 -> e selecione 𝐀𝐮𝐭𝐨 𝐃𝐞𝐭𝐞𝐜𝐭

Funciona para mim.

Suvalakshmi
fonte
1
Não vejo nada de novo nesta resposta
Double Expresso
2

Arquivo> Preferências> Mapas de teclado, Pesquise 'Fechar automaticamente' e clique em instalar. Se não funcionar, recarregue o plugin.

Dheemanth Bhandarkar
fonte
1

Eu estava sofrendo do mesmo problema, então desinstalei extensões desnecessárias do VS Code junto com a extensão JavaScript (SE) e funcionou para mim.

5hifaT
fonte
0

Pressione Ctrl + Shift + Ppara abrir o comando. Em seguida, digite Change Language Modeum HTMLidioma selecionado ou qualquer outro idioma desejado.

Todos
fonte
0

Basta verificar a parte inferior do seu vscode e alterar o modo de idioma para HTML. Pode estar exibindo django-html ou clique em ctrl + shift + p para alterar o modo de idioma Captura de tela

Agora clique em [!] + TAB voila pronto !!!

Otobong
fonte
0

Se você digitar

div.class

e então pressione TAB , o código VS irá fechar automaticamente a tag DIV com o dado CLASSE

Mas acho que você deseja fazer esta operação pressionando o botão ENTER tecla .

Nesse caso, vá para a configuração de usuário do código VS e cole o seguinte código:

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "razor": "html",
    "plaintext": "jade"
}

Agora se você digitar

div.class

e então pressione o ENTER tecla , você pode ver a mágica.

No entanto, o código acima tornará o autopreenchimento do VS Code com a tecla ENTER não apenas para HTML normal, mas também para JSX do React , snippets Vue.js também cobrirão isso.

Mas se você quiser fazer isso apenas para arquivo HTML, basta a seguinte linha:

"emmet.includeLanguages": { "javascript": "html" }

Felicidades..

IFTEKHAR I ASIF
fonte