Extensões desnecessárias para VS Code

Recentemente, fiz uma pesquisa completa sobre o VS Code e fiz algumas descobertas interessantes. No final das contas, o editor tem muitos recursos e configurações que permitem que você resolva perfeitamente as mesmas tarefas que muitas extensões populares resolvem. Aqui vamos falar sobre seis áreas de aplicação de extensões nas quais essas extensões podem ser substituídas pelos mecanismos padrão do Código VS.

1. Renomeação automática e fechamento de tags

Estamos falando sobre duas possibilidades. A primeira é a capacidade de renomear simultaneamente as tags de abertura e fechamento. Em segundo lugar, a capacidade de fechar tags automaticamente.





Renomear automaticamente as tags de início e fim

▍ Extensões

• Auto Rename Tag (3,3 milhões de downloads): renomeia automaticamente tags HTML / XML emparelhadas, assim como o Visual Studio IDE faz.
• Tag de fechamento automático (3,1 milhões de downloads): fecha automaticamente as tags HTML / XML, assim como você faz com o IDE do Visual Studio ou Sublime Text.

▍Recursos de código VS

A configuração correspondente no VS Code tem um nome um tanto vago e incompreensível. É provavelmente por isso que muitas pessoas não conseguem encontrá-lo.

• Editor: Rename on Type: Controla a renomeação automática de tags emparelhadas conforme você insere um código. O padrão é false.

Para encontrar essa configuração, você pode abrir a janela de configurações do editor ( File > Preferences > Settings) e inserir as Editor: Rename on Typeconfigurações na barra de pesquisa.



Para ativar esse recurso, adicione o seguinte a settings.json:

"editor.renameOnType": true

Até agora, apenas arquivos HTML são suportados, mas o rastreador de projeto tem um problema aberto com relação ao suporte de arquivo JSX.



É improvável que o próprio VS Code suporte isso para arquivos Vue. É provável que um mecanismo semelhante seja implementado na extensão Vetur. Uma tarefa correspondente já foi aberta no rastreador deste projeto .

2. Sincronização de configurações

O VS Code agora suporta configurações de sincronização entre diferentes computadores. Este recurso está disponível a partir do VS Code Preview 1.48 (versão de julho de 2020).



Agora estou tendo essa oportunidade e ainda não encontrei nenhum problema.

▍ Extensão

• Sincronização de configurações (1,8 milhões de downloads): sincroniza configurações, atalhos de teclado, snippets, extensões, arquivos launch.json e mais do GitHub Gist.

▍Recursos de código VS

Você pode ler sobre esses recursos na documentação do VS Code . As páginas com as configurações correspondentes são mostradas abaixo.





Configurações de



sincronização Para sincronização, você pode usar contas da Microsoft ou GitHub, você pode especificar o que precisa ser sincronizado.





Selecionando itens para sincronizar

3. Controlando a importação de módulos

Gerenciar a importação de módulos JavaScript e TypeScript pode ser uma tarefa difícil, especialmente quando você precisa refatorar seu projeto ou refatorar seu código. Os desenvolvedores se esforçam para automatizar isso sempre que possível.

▍ Extensões

• Importação automática (1,1 milhão de downloads): encontra e analisa automaticamente os comandos de importação de módulo, fornece mecanismos de conclusão de código e ativa Ações de código. Suporta TypeScript e TSX.
• Mover TS (downloads de 308 mil): monitora a movimentação de arquivos TypeScript e mantém seus comandos de importação associados atualizados na área de trabalho.
• Importação automática - ES6, TS, JSX, TSX ( 157 mil downloads).

▍Recursos de código VS

• JavaScript > Suggest: Auto Imports: permite que você habilite ou desabilite sugestões de importação automática. Requer o uso em um espaço de trabalho TypeScript desde 2.6.1. O padrão é true.
• TypeScript > Suggest: Auto Imports: permite que você habilite ou desabilite sugestões de importação automática. Requer o uso em um espaço de trabalho TypeScript desde 2.6.1. O padrão é true.
• JavaScript > Update Imports on File Move: Enabled: Permite que você escolha como atualizar automaticamente os caminhos de importação do módulo ao renomear ou mover arquivos no VS Code. Requer uso no espaço de trabalho do TypeScript desde a versão 2.9. O padrão é prompt.
• TypeScript > Update Imports on File Move: Enabled: Permite que você escolha como atualizar automaticamente os caminhos de importação do módulo ao renomear ou mover arquivos no VS Code. Requer uso no espaço de trabalho do TypeScript desde a versão 2.9. O padrão é prompt.

Esta é a aparência dessas configurações no arquivo settings.json:

"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",

Além disso, se quiser organizar seus comandos de importação ao salvar arquivos, você precisa da seguinte configuração:

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

Seu uso resulta na remoção de instruções de importação não utilizadas e na colocação de comandos de importação para que os comandos que usam caminhos absolutos sejam os primeiros. Eu sou um grande fã desses mecanismos, que você pode simplesmente esquecer assim que configurá-los.

4. Snippets de HTML e CSS

Você pode decidir que o seguinte seria útil para você:

• Use modelos HTML para criar rapidamente elementos de descrição de página padrão.
• Crie um repositório de fragmentos de código usados ​​com frequência que podem ser usados ​​para economizar tempo.
• Maneiras abreviadas de descrever grandes blocos de código.

Todos esses recursos são semelhantes, mas ligeiramente diferentes, que discutiremos nesta seção.

▍ Extensões

• Snippets de HTML (3,8 milhões de downloads): tags HTML completas, incluindo snippets HTML5.
• HTML Boilerplate (downloads de 684K ): Um gerador simples de HTML5.
• Snippets CSS ( 22k downloads): uma coleção de snippets CSS.

▍Recursos de código VS

O VS Code possui a caixa de ferramentas Emmet embutida . Essas ferramentas oferecem abreviações e snippets para HTML e CSS. Emmet é ativado por padrão para os seguintes arquivos: html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, lesse stylus. Consulte a documentação do VS Code para obter detalhes .



Por exemplo, para adicionar um template de marcação HTML da página ao arquivo, basta inserir o ponto de exclamação ( !) e pressionar a tecla Tab.





Adicionando HTML com modelo a um arquivo



Emmet também suporta atalhos, que permitem inserir grupos de elementos em documentos. Sua estrutura é semelhante à dos seletores CSS.



Por exemplo, vamos inserir a seguinte construção no arquivo HTML:

ul>li*5

Vamos apertar a tecla Tab. Esta construção será convertida no seguinte código:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Se entrar no editor ae clicar em Tab, então a construção será inserida no código <a href="">, e o cursor será colocado entre as aspas, permitindo a você inserir imediatamente o valor do atributo href.



Esta é apenas uma breve introdução aos recursos HTML de Emmet. O VS Code também oferece recursos semelhantes para CSS. Entre esses recursos, meu favorito é a prefixação automática de fornecedores de navegador. Você pode encontrar detalhes sobre o Emmet na documentação deste kit de ferramentas. Além disso, você pode achar esta folha de dicas do Emmet útil .



Você pode personalizar trechos existentes e criar seus próprios, editando o arquivo snippets.json.



Emmet apoianão apenas HTML e CSS simples. Por exemplo, para usar o Emmet ao construir aplicativos Vue e ao escrever o código JavaScript, settings.jsonadicione o seguinte a:

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

Se você quiser habilitar o suporte do Emmet para markdown, há uma peculiaridade (ou melhor, um bug ) que você deve estar ciente . Está no fato de que, para isso, você precisa de emmet.excludeLanguagesum array vazio para ser escrito:

"emmet.excludeLanguages": [],
"emmet.includeLanguages": {
  "markdown": "html"
}

Uma discussão sobre isso pode ser encontrada aqui .

5. Texto do modelo

Pode ser necessário preencher o texto do espaço reservado à medida que trabalha na página. Isso geralmente é feito para avaliar a aparência de uma página na qual há algum conteúdo. O famoso "Lorem ipsum" é freqüentemente usado como tal. Existem extensões que permitem gerar esse tipo de texto, mas o VS Code tem os mesmos recursos.

▍ Extensão

• Lorem Ipsum (168 mil downloads).

▍Recursos de código VS

Mencionamos acima que o VS Code tem uma caixa de ferramentas Emmet embutida. Emmet tem uma abreviatura para gerar texto de espaço reservado. Para utilizá-lo, basta entrar loreme pressionar a tecla Tab. Isso irá gerar automaticamente um parágrafo de 30 palavras.





Inserindo a abreviatura lorem



Esta abreviatura pode ser usada não apenas ao criar um parágrafo de texto, mas também, por exemplo, para gerar vários blocos de alguns elementos. Digamos que uma construçãop*2>loremresultaria em dois elementos<p>preenchidos com texto de espaço reservado:

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus
  molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias
  officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
<p>
  Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
  recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at
  neque quos facere sequi unde optio aliquam!
</p>

6. Remoção automática de espaços à direita

Normalmente, as extensões correspondentes removem espaços desnecessários no final das linhas, seja durante a edição do código ou por comando. E as configurações do VS Code que sugiro usar em vez de tais extensões são projetadas para remover espaços ao salvar arquivos.

▍ Extensões

• Espaços finais (downloads de 447 mil): Permite destacar e remover espaços finais.
• Autotrim (15 mil downloads): A descrição desta extensão diz o seguinte: “Espaços finais geralmente aparecem após a edição do código, após a remoção de construções no final das linhas, após a realização de outras ações semelhantes. Esta extensão monitora o processo de edição do código, lembra o número da linha na qual o cursor ativo está localizado. Depois que não houver mais cursor ativo nesta linha, ele removerá tabulações e espaços finais dela. "

▍Recursos de código VS

• Files : Trim Trailing Whitespace: Quando este recurso está ativado, ele remove os espaços finais ao salvar arquivos. O padrão é false.

Para ativar esse recurso, settings.jsonvocê pode adicionar o seguinte a:

"files.trimTrailingWhitespace": true

Resultado

Antes de você, ao se deparar com a necessidade de solucionar um problema no VS Code, comece a procurar uma extensão adequada, descubra se existe uma ferramenta para solucionar seu problema dentre as funcionalidades padrão do VS Code. Parece bastante óbvio, mas provavelmente todos nós fizemos exatamente o oposto às vezes. Novos recursos aparecem no VS Code regularmente, portanto, é uma boa idéia verificar o changelog desse editor de tempos em tempos.



Sempre que possível, você se esforça para usar os recursos padrão do VS Code em vez de extensões?