Desenvolvedores gostam que seu editor esteja de determinada maneira. Pode ser difícil garantir que todos os ambientes tenham a mesma configuração. Como garantir que a configuração do VS Code seja a mesma onde quer que você o utilize?

• O que é o VS Code?
• O que usaremos?
• Como funciona?
• Etapa 1: instalar o Settings Sync
• Etapa 2: autorizar o acesso ao GitHub
• Etapa 3: fazer o upload das configurações atuais
• Etapa 4: sincronizar as configurações com outro ambiente
• Etapa 5: atualizar a configuração

O que é o VS Code?

O Visual Studio Code, ou VS Code, é um editor de código que recebe todos os recursos que você deseja ao trabalhar com código e as colocar em um único lugar, deixando você extremamente produtivo.

Ele já é considerado "o cara legal da sua rua" há algum tempo, aumentando cada vez mais em termos de popularidade entre a comunidade do JavaScript. A Microsoft esforçou-se bastante em torná-lo algo que as pessoas desejassem utilizar (e fizeram um ótimo trabalho).

O que usaremos?

Usaremos uma extensão do VS Code chamada Settings Sync (sincronização de configurações) que faz uso do recurso chamado Gist do GitHub para armazenar um arquivo de configuração JSON privado na nuvem.

Como funciona?

A extensão usa o OAuth do GitHub para fazer login em sua conta do GitHub. Depois da aprovação, o VS Code obtém um token de acesso, busca a loja e faz o download do seu arquivo de configurações para um Gist privado do GitHub.

Depois de preparada, você pode configurar a extensão em qualquer instância do VS Code e fazer o download imediato de sua configuração para sincronizar seu editor.

Etapa 0: VS Code

Assumiremos para este tutorial que você já tem o VS Code instalado. Embora você não precise ter qualquer configuração especial, ter algo diferente da configuração padrão (como, por exemplo, um tema de cores) ajudará você a ver o processo em funcionamento.

Vamos começar!

Etapa 1: instalar o Settings Sync

A primeira coisa que precisamos fazer é instalar a extensão. É possível fazer isso de algumas maneiras diferentes — você pode visitar a página da web e apertar Install, o que abrirá o VS Code, ou você poderá procurar pela extensão no próprio painel de Extensões.

Uma vez instalada, ela abrirá uma nova guia com o painel do Settings Sync.

Etapa 2: autorizar o acesso ao GitHub

Para começar com o GitHub, clique no botão Login with GitHub, no painel do Settings Sync.

Isso abrirá o GitHub no seu navegador padrão e solicitará o seu login. Embora você possa usar a conta do GitHub que quiser, fará mais sentido se você usar sua conta pessoal.

Depois do login realizado, você verá uma mensagem de sucesso em seu navegador.

Etapa 3: fazer o upload das configurações atuais

Agora que você está conectado ao GitHub, está pronto para fazer o upload de suas configurações.

Abra a Paleta de comandos com Ctrl+Shift+P (ou CMD+Shift+P no Mac) ou navegue até Ver e Paleta de Comandos. Digite "Sync Upload", o que filtrará os comandos e aperte Enter quando a opção Sync: Update/Upload Settings estiver selecionada.

Ao fazer isso, uma tela perguntará a você se você deseja fazer o upload forçado — pressione Yes.

Nesse ponto, o Settings Sync criará um Gist em sua conta no GitHub com suas definições de configuração. Quando ele terminar, você verá uma mensagem de sucesso.

Agora, você poderá visitar gist.github.com e encontrará um novo Gist privado, chamado cloudSettings, que inclui todas as suas configurações do VS Code!

Etapa 4: sincronizar as configurações com outro ambiente

Para sincronizar a configuração do VS Code com outro computador ou ambiente do VS Code, primeiro, siga as etapas 1 e 2 acima — instalando a extensão e fazendo login no GitHub.

A diferença, desta vez, será configurar o VS Code para fazer o download de suas configurações em vez de fazer o upload delas.

Para começar, primeiro, abra o painel do Sync Settings. Se essa é uma nova instalação, como imaginamos que seja, basta abrir a Paleta de Comandos e digitar "sync download" e apertar Enter. Isso abrirá o painel do Settings Sync. Nele, clique em Edit Configuration desta vez.

Nessa tela, você deverá ver seu token de acesso do GitHub, mas também deverá ver um campo vazio para o Gist ID. Aqui, primeiro queremos obter o ID de nosso URL do Gist, chamado cloudSettings:

Em seguida, colamos esse valor na entrada Gist ID no VS Code.

Depois de ter feito isso, abra a Paleta de Comandos novamente, digite "sync download", e pressione Enter. O Settings Sync buscará sua configuração do VS Code no Gist e atualizará suas configurações locais!

Etapa 5: atualizar sua configuração

A partir daqui, sempre que quiser fazer uma nova mudança na configuração armazenada, use os recursos Update/Upload e Download do modo como usamos anteriormente.

Para atualizar outro ajuste na configuração, digite "sync update" e pressione Enter:

Para fazer o download de sua configuração para sincronizar outro editor, digite "sync download" e pressione Enter:

Esses comandos atualizarão seu Gist cloudSettings e farão o download das configurações que estão nele para sincronizar suas instâncias do VS Code.

Qual é o seu truque favorito no VS Code?

Compartilhe-o com o autor no Twitter!

Participe do papo

• Siga o autor no Twitter
• Inscreva-se no canal do autor no YouTube
• ✉️ Inscreva-se na newsletter do autor

O Visual Studio Code se tornou o editor de código mais popular. Ele é leve e poderoso. Certamente, é o meu editor predileto.

Neste artigo, mostrarei como iniciar com o VS Code e como configurá-lo para o desenvolvimento para a web.

No vídeo abaixo (em inglês), você tem um complemento para o artigo:

Introdução ao VS Code

Se você não tem o VS Code instalado no computador, acesse code.visualstudio.com e baixe-o. Você pode abrir o menu suspenso para selecionar a versão (ou versões) que deseja baixar, mas, em geral, clicar no botão maior deve ser o bastante para você.

Guia de boas-vindas do VS Code

Ao instalar e abrir o VS Code, a primeira coisa que você verá é uma guia de boas-vindas (Welcome, em inglês). Nela, você encontrará algumas seções:

Start (Iniciar): você pode decidir entre criar um arquivo ou abrir uma pasta.

Recent (Recentes): aqui, você pode encontrar as pastas recentemente abertas.

Help (Ajuda): você pode encontrar informações úteis. Por exemplo, lá, você encontra uma ficha informativa sobre os atalhos do teclado ou uma série de vídeos introdutórios.

Customize (Personalizar): você pode instalar configurações e atalhos de teclado de outros editores, como o Vim ou o Atom. Caso você esteja acostumado a usar um daqueles editores, siga em frente e confira essas configurações.

O que queremos examinar é o tema de cores. Se você selecionar Color theme, verá que existe uma lista de temas que você pode escolher. Você também pode usar as setas para cima e para baixo para pré-visualizar os temas. Meu tema favorito, no entanto, é o padrão. Ficarei com ele, portanto.

Learn (Aprender): Aqui, você encontrará 3 seleções. A primeira da lista é Find and run all commands (Encontre e execute todos os comandos). Com ela, você pode encontrar e executar todos os comandos disponíveis. Nós a utilizaremos bastante. Por isso, recomendo memorizar o atalho, que é Command/Control + Shift + P.

A segunda seleção é a Interface Overview (Visão geral da interface). Se a selecionarmos, poderemos ver os elementos mais comuns da interface do usuário, bem como o atalho para ativar/desativar esses elementos:

A última seleção é o Interactive Editor Playground (Playground interativo do editor). Aqui, você encontrará os recursos em destaque no VS Code, com instruções e exemplos.

Vamos selecionar o Emmet, por exemplo. Com o Emmet, você pode escrever atalhos e expandi-los como um trecho de código.

Digamos, por exemplo, que queremos criar um elemento de lista não ordenada com 3 itens e que cada item tenha uma classe com o nome "fruit". Podemos digitar ul>li.fruit*3 e pressionar Tab no teclado.

Você também pode ver que, no exemplo existente, (ul>li.item$*5), eles tentaram criar uma lista não ordenada e 5 itens com o nome de classe item dentro dela. O nome da classe, porém, também vem com numeração:

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

Nesta seção, também é possível encontrar um link para a ficha informativa do Emmet (em inglês), que pode ser muito útil para você.

Certo. Recomendo agora que você confira alguns desses recursos. Eles são muitos e não há problema em não entender todos eles agora. Você poderá sempre voltar aqui no futuro.

Explorador de arquivos do VS Code

Em seguida, vamos passar para o File Explorer (Explorador de arquivos) e selecionar a primeira guia na barra lateral de navegação (o atalho de teclado para ela é Command/Control + Shift + E).

Aqui, você pode abrir uma pasta existente, mas vamos criar uma pasta e um arquivo. Em vez de abrir uma nova janela, vamos abrir o terminal no VS Code. Você pode selecionar o botão error and warning (erros e avisos) na barra de status e, em seguida, selecionar a guia Terminal, ou ainda usar o atalho Control + `.

Neste momento, estou no meu diretório home. Vamos criar uma pasta, digitando mkdir vscode-tutorials e acessá-la usando cd vscode-tutorials.

Nota da tradução: no Windows, o terminal aberto seria o do Powershell. O diretório seria o diretório principal do seu usuário, C:\Users\seu_nome_de_usuario. O comando para criar a pasta seria md vscode-tutorials.

Agora, queremos abrir a pasta dentro do VS Code. Para isso, podemos selecionar o botão Open folder (Abrir pasta) e navegar até o diretório em questão – é bastante trabalho. Em vez disso, no terminal, podemos digitar code .. Agora, você pode encontrar o erro: bash: code: command not found.

Para consertar isso, podemos abrir a Command Palette (Paleta de comandos) e procurar por Shell Command: Install code command in Path (Comando do shell: instalar o comando code no Path) e selecioná-lo. Agora, se voltarmos ao terminal e digitarmos code ., a nova janela do VS Code abrirá na pasta criada.

Bem, em seguida, queremos criar um arquivo. Na seção da pasta, podemos clicar no ícone do arquivo novo e clicar com o botão direito e selecionar new file (Novo arquivo). Vamos dar ao arquivo o nome index.html e, no arquivo, vamos digitar o ponto de exclamação (!) e pressionar Tab ou Enter. Com o Emmet, isso gerará um template de HTML.

Agora, é hora de abrir a Command Palette (Paleta de comandos) novamente e de procurar por Format Document (Formatar documento) e selecioná-lo. Você pode ver que o comando adiciona espaçamentos entre as diversas seções do código e o deixa mais limpo.

Esse é um recurso muito útil do VS Code. Se, no entanto, não quisermos procurar por Format Document toda hora e se quisermos formatar o documento sempre que salvarmos o arquivo, há uma alternativa.

Você perceberá, também, que a indentação está com 4 espaços, o que, na minha opinião, é um exagero. Podemos alterar isso para 2 espaços apenas. Para fazer isso, podemos acessar Setting (Configurações) ou usar o atalho Command/Control + ,.

Na guia Commonly Used (Comumente usados), podemos alterar Tab size (Tamanho da tabulação) para 2. Em Text Editor/Formatting (Editor de texto/Formatação), podemos selecionar Format on Save (Formatar ao salvar). Agora, sempre que salvarmos, os arquivos serão formatados adequadamente.

Extensões do VS Code

A última coisa que eu gostaria de mostrar é como utilizar as Extensões. Você pode selecionar a guia Extensions (Extensões) na barra lateral de navegação ou usar o atalho: Command/Control + Shift + X.

Aqui, podemos filtrar as extensões, por exemplo, por Most Popular ou Recommended (Mais populares ou Recomendadas).

Você pode selecionar diversas extensões. A primeira que precisaremos instalar, porém, é o Live Server. Com ele, podemos fazer um recarregamento local do servidor de páginas estáticas da web.

Por exemplo, se formos em nosso arquivo index.html e se abrirmos a Command Palette e procurarmos por Live Server: Open with Live Server (Live Server: abrir com o Live Server), veremos que uma nova guia foi aberta no navegador.

Se criarmos um elemento no HTML – por exemplo, <h1>Introdução ao VS Code<h1/> – depois que salvarmos a página, ela será recarregada automaticamente e será possível ver as alterações. No arquivo index.html, você também pode abrir o Live Server com o botão Go Live (algo como "recarregar com as alterações") na barra de status.

Conclusão

Há muitas outras extensões úteis, mas tratarei delas em outro artigo e em outro vídeo.

De momento, com esta breve introdução e guia de configuração, tenho certeza de que você está pronto para começar em sua jornada pelo desenvolvimento para a web.

Assim, concluímos este artigo. Você pode seguir o autor por suas redes sociais para ver atualizações futuras. Uma boa programação para você e até a próxima.

__________ 🐣 Sobre o autor __________

• Ele é o criador do site DevChallenges
• Você pode se inscrever no canal do autor no YouTube
• Você pode seguir o autor no Twitter
• Você também pode se inscrever no servidor do Discord do DevChallenges

O Visual Studio Code (VS Code) foi projetado para ser leve. Ele tem um conjunto restrito de características principais. Você pode, porém, adicionar características extras através de extensões.

O desempenho, contudo, será inevitavelmente afetado à medida que sua coleção de extensões crescer.

Você avalia o desempenho de uma extensão antes de instalá-la? O que você faz se a inicialização do VS Code crescer? Devido à ausência de pessoas escrevendo sobre esse tópico, acho que as pessoas não sabem.

Neste artigo, vou explicar os fatores que afetam o desempenho de uma extensão. Também vou avaliar o desempenho de algumas extensões populares. Em seguida, vou delinear como você pode verificar o desempenho de seu conjunto de extensões existente e dar algumas dicas gerais de desempenho.

Requisitos mínimos de hardware e software

Antes de entrarmos em extensões, vamos falar brevemente sobre quais são os requisitos mínimos para executar o VS Code.

Um computador comprado nos últimos anos com especificações modestas deve ser capaz de executar o VS Code sem nenhum problema.

Hardware

O hardware mínimo que eu recomendo é:

• Processador de 1.6 GHz ou mais rápido;
• Pelo menos 1 GB of RAM;
• Pelo menos 200 MB de espaço em disco.

Sistemas operacionais

O VS Code foi testado nos seguintes sistemas operacionais:

• Mac OS X Yosemite e posteriores.
• Windows 7 (com .NET Framework 4.5.2), 8.0, 8.1 e 10 (32-bit e 64-bit).
• Linux (Debian): Ubuntu Desktop 14.04, Debian 7.
• Linux (Red Hat): Red Hat Enterprise Linux 7, CentOS 7, Fedora 23.

A comunidade não oficial cria para o Raspberry Pi e para Chromebooks

Jay Rodgers lançou um projeto open-source que realiza builds frequentes do VS Code para Raspberry Pi e Chromebooks.

Tenho mantido o projeto há alguns anos e ele se expandiu do fornecimento de binários para Pi para o fornecimento de suporte e ferramentas para colocar o VS Code em funcionamento em dispositivos ARM de baixo custo que, de outro modo, não o suportariam como os Chromebooks (que agora constituem cerca de 60% dos dispositivos nas escolas).

Se você quiser experimentar por si mesmo, pode seguir as instruções que ele apresentou. Ele tem trabalhado muito para tornar o processo o mais simples possível.

Nem todas as extensões são criadas do mesmo modo

As extensões são carregadas e descarregadas sob diferentes condições. O autor da extensão decide isso. Isto é especificado através de eventos de ativação, que discutiremos mais tarde.

Não há feedback no editor indicando se uma extensão está ativa ou não. Então, como sabemos quando uma extensão está ativa?

A maioria das extensões é escrita em TypeScript, mas elas também podem ser escritas em JavaScript. As extensões podem incluir módulos do Node como dependências.

Você pode agrupar e minificar seus arquivos fonte em um único arquivo, se desejar. A documentação do VS Code recomenda fazer isso para melhorar os tempos de carregamento, mas muitas extensões não o fazem. Essas escolhas afetam o desempenho.

As extensões são, em sua maioria, projetos de código aberto escritos por desenvolvedores. A qualidade do código pode variar. A manutenção do código vai variar, com certeza.

As extensões escritas pela Microsoft não são imunes a essas deficiências, mas são as menos propensas a sofrer com elas.

Critérios para selecionar uma extensão

A maioria das listas de extensões fala sobre as características interessantes, mas pouco mais além disso. Quando algo é muito bom, fale-me um pouco também sobre o contexto, certo?

Alguns dos critérios que eu sugiro envolvem a análise do código fonte. Não se deixe adiar por isso. Reunir os fatos-chave leva apenas alguns minutos. Mostrarei como fazer isso!

1. O recurso que eu preciso já está disponível no VS Code?

Eu demonstrei que você não precisa de muitas extensões populares em um artigo "VS Code: you don't need that extension" (texto em inglês). Você pode consultar a documentação do VS Code para verificar uma característica específica.

2. A extensão tem as características de que eu preciso?

Consulte a página da extensão no Visual Studio Marketplace para descobrir isso.

3. Quando uma extensão está carregada e ativa?

Discutirei isto em detalhes na seção Eventos de ativação. Você precisa verificar o package.json do código fonte para descobrir isso com antecedência.

Você pode executar o comando Desenvolvedor: Desempenho de Inicialização para ver os eventos de ativação das extensões instaladas. Eu discuto isso mais adiante na seção Como verificar o desempenho.

4. Os recursos estão otimizados?

Você precisa verificar o código fonte para ver se ele usa um bundler. Você pode verificar o package.json para ver se a seção de scripts tem uma etapa de pré-construção para o bundling.

O arquivo de extensão VSIX é um repositório comprimido de arquivos para o código e a listagem no Marketplace. Os desenvolvedores frequentemente incluem arquivos desnecessários. Há um arquivo .vscodeignore para excluir arquivos.

O número de arquivos que o VSIX contém tem um impacto sobre o tempo de ativação a frio. O tempo de ativação a frio é a primeira execução da extensão após sua instalação. Ele tende a ser mais lento do que o de outras vezes. Acho que isso ocorre porque o VSIX não está comprimido e está em cache.

Esta é a aparência da extensão Vetur quando você a abre no 7Zip.

5. Houve algum problema de desempenho relatado recentemente que não foi resolvido?

Você pode descobrir isso através da verificação de desempenho da extensão. Você também precisa verificar as issues no repositório do Git.

6. O código tem testes?

A extensão vai ser mais suscetível a erros sem testes. Você precisa verificar o código fonte para ver se há testes.

7. A extensão é mantida ativamente?

A seção Detalhes do projeto (Project Details, em inglês) na página de extensão dá uma visão geral da atividade do repositório público do Git. Em alguns casos, uma extensão pode estar "concluída" (em inglês, Done). Nesse caso, a manutenção não é uma consideração importante.

Eventos de ativação

Eventos de ativação são eventos que acionam a ativação de uma extensão. Eles definem as condições de carregamento e descarregamento de uma extensão.

O autor de uma extensão declara esses eventos no campo activationEvents do package.json (Manifesto de Extensão, em inglês).

Há uma variedade de eventos de ativação à sua escolha. Uma extensão pode ouvir muitos eventos de ativação para produzir um escopo mais específico.

Este é um diagrama de sequência do que acontece quando você lança o VS Code. Ele dá uma ideia da cronologia dos eventos que ocorrem, que afetam quando você pode interagir com o editor e usar certas extensões.

Agora, vou passar pelos eventos de ativação mais importantes. Começarei com o escopo mais amplo e continuarei até atingir o escopo mais restrito.

Evento inicial

O evento de ativação * ativará uma extensão quando o VS Code for iniciado. Essas extensões estarão sempre ativas. Isso impacta o tempo de inicialização do VS Code.

"activationEvents": [
    "*"
]

A documentação do VS Code dá os seguintes conselhos:

Para garantir uma ótima experiência do usuário final, use este evento de ativação em sua extensão somente quando nenhuma outra combinação de eventos de ativação funcionar em seu caso de uso.

Na minha opinião, deve haver um caso especial para conceder a uma extensão esse escopo. É preferível usar pelo menos onStartUpFinished.

Extensões populares com este evento de ativação: ES Lint (11 milhões de instalações), Live Server (7,4 milhões de instalações), GitLens (6,5 milhões de instalações), Beautify (5,4 milhões de  instalações), Bracket Pair Colorizer (3,6 milhões de instalações), Git History (2,9 milhões de instalações), Settings Sync (2 milhões de instalações), indent-rainbow (1,1 milhão de instalações).

Evento onStartupFinished

Esta extensão será ativada algum tempo após o início do VS Code, ou seja, assim como o evento de ativação *, mas não vai desacelerar o início do VS Code.

"activationEvents": [
    "onStartupFinished"
]

Extensões populares com este evento de ativação: Prettier (8,5 milhões de instalações).

Evento onLanguage

Esta extensão será ativada sempre que um arquivo de uma determinada linguagem for aberto.

"activationEvents": [
    "onLanguage:json",
    "onLanguage:markdown",
    "onLanguage:typescript"
]

O evento onLanguage toma um valor identificador de linguagem. Você pode declarar tantas linguagens quantas desejar.

Extensões populares com este evento de ativação: a maioria das extensões na categoria "Linguagens de Programação" no Visual Studio Code Marketplace tem uma entrada onLanguage junto dos outros eventos de ativação, Vetur (5,6 milhões de instalações – ativa somente para Vue), YAML (4,3 milhões de instalações – ativa somente para YAML), Better Comments (1,1 milhão de instalações – ativa somente para linguagens suportadas).

Evento workspaceContains

Esta extensão será ativada sempre que você abrir uma pasta que contenha pelo menos um arquivo que corresponda a um padrão global.

"activationEvents": [
    "workspaceContains:**/package.json"
]

Evento onCommand

Esta extensão será ativada sempre que você invocar um comando.

"activationEvents": [
        "onCommand:vscode-docker.compose.down",
        "onCommand:vscode-docker.compose.restart",
        "onCommand:vscode-docker.compose.up",
        ...
]

Outros eventos de ativação

Você pode ler a lista completa de eventos de ativação na documentação de referência.

As extensões definem um escopo específico de modo consistente?

Não!

Muitas extensões utilizam o evento de ativação *.

É assim que eu classificaria a definição do escopo de algumas das extensões que usei:

• O bom: Vetur, YAML, Better Comments.
• O mau:

Prettier: seria melhor visar apenas as linguagens que ele suporta.

Markdown All in One: está ativo quando um arquivo de marcação está aberto, ou quando o espaço de trabalho contém um README.md. Este último me parece desnecessário.

• O feio: Todas as extensões com o evento de ativação * mencionado acima.

Que impacto pode ter o bundling no desempenho de uma extensão?

Pode causar um grande impacto!

John Papa fala sobre isso em seu artigo "Is Your VS Code Extension Slow? Here's How to Speed it Up!".

Ele revela os resultados de uma revisão de 2 das extensões da Microsoft:

1. Azure Account: o bundling reduziu o tempo de ativação em 50%. O tamanho da extensão foi reduzido de 6,2MB para 840KB através do bundling e excluindo mais arquivos (no arquivo .vscodeignore).
2. Docker: o bundling reduziu o tempo de ativação de 3,5 segundos para menos de 2 segundos. Além disso, uma consideração é o tempo de ativação a frio, que tende a ser mais lento do que outros tempos (tempo de ativação a quente). O tempo de ativação a frio passou de 20 segundos para 2 segundos.

Você pode melhorar sua extensão favorita levantando esta questão com o autor da extensão. O guia do usuário para o bundling de extensões (documentação em inglês) explica como.

Como verificar o desempenho

Você pode executar o comando Desenvolvedor: Exibir Extensões em Execução para obter as estatísticas básicas sobre as extensões em execução. Ele classifica as extensões do maior para o menor tempo de ativação. O tempo é intitulado "Ativação inicial" se a extensão for carregada na inicialização.

Como você pode ver na captura de tela, ele também dá avisos sobre questões de desempenho.

Como mencionado anteriormente, vale notar que o tempo de ativação a frio (a primeira vez que uma extensão é executada) e o tempo de ativação a quente (segunda execução e posteriores) podem variar muito. Por esse motivo, deve-se basear o desempenho típico de uma extensão em uma segunda execução.

Você pode auditar o desempenho de início executando o comando Desenvolvedor: Desempenho de Inicialização. Ele abre um documento com estatísticas detalhadas sobre tópicos tais como: informações do sistema, marcas de desempenho, estatísticas de ativação de extensão, estatísticas de carregamento de módulos e muito mais.

Os resultados são específicos para o projeto atual e quaisquer arquivos abertos quando se executa o comando.

A seção Estatísticas de ativação da extensão dá uma visão mais detalhada do desempenho da extensão. É muito útil para ver os eventos de ativação sem a necessidade de verificar o código fonte de uma extensão.

Você pode ver que o VS Code carrega suas próprias extensões "centrais" para o Git, Emmet e algumas outras também na inicialização. Você não quer que a lista de extensões carregadas na inicialização se torne muito longa!

Pontuação para algumas das extensões mais populares

Estou me concentrando nas extensões que eu mesmo usei aqui. Não quero especular sobre extensões que eu realmente não usei.

ESLint

ESLint é a ferramenta de análise estática mais popular para JavaScript e TypeScript. Ela destaca os problemas no editor com linhas vermelhas em forma de sublinhas.

• Autor: Microsoft.
• Número de instalações: 11 milhões.
• Avaliação no Marketplace: 4.3/5 (156).
• Características principais: relatar problemas de sintaxe. Capacidade de corrigir automaticamente alguns problemas.
• Eventos de ativação: no início (*). Pode ser alterado para onStartupFinished em versões futuras. Veja esta issue em aberto para explicar por que essa escolha foi feita.
• Os recursos são otimizados: sim.
• Tamanho do arquivo: 133KB.
• Tempo de ativação no meu sistema: 39ms.
• Suíte de testes: parece ser muito básica. Apenas um pequeno teste de padrões globais.
• Manutenção ativa: sim.
• Extensões alternativas: JS Hint, TS Lint.

O ESLint é uma ótima extensão. O desempenho é excelente.

É decepcionante que ela seja carregada no início. Se isso o incomoda, você pode tentar JS Hint (escrito pelo mesmo desenvolvedor) para JavaScript e TS Lint para TypeScript. Ou você mesmo pode fazer o fork do projeto e mudá-lo!

Ela é mantida ativamente. Não possui um conjunto significativo de testes.

Nota: 8/10

Prettier - Formatador do código

Prettier é um formatador de código com opinião. Atualmente, ele suporta os seguintes idiomas: JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown e YAML.

• Autor: Prettier.
• Número de instalações: 8,5 milhões.
• Avaliação no Marketplace: 3.8/5 (204).
• Características principais: formatação de código.
• Eventos de ativação: onStartupFinished.
• Os recursos são otimizados: sim.
• Tamanho do arquivo: 2,1MB.
• Tempo de ativação em meu sistema: 286ms.
• Suíte de testes: sim. A cobertura parece boa.
• Manutenção ativa: sim.
• Extensões alternativas: Beautify.

O Prettier faz um excelente trabalho na simplificação da formatação de códigos.

O desempenho é bom, mas talvez possa ser melhorado. Ele está no lado mais lento do espectro de ativação.

O escopo de ativação é muito amplo. Seria preferível visar apenas as linguagens suportadas. Encontrei um problema com a formatação de Markdown, por isso não uso atualmente para formatar Markdown. Essas são coisas que podem ser mudadas facilmente.

Nota: 7,5/10.

Live Server

O Live Server lança um servidor de desenvolvimento local para dar uma prévia ao vivo dos seus arquivos HTML e SVG.

• Autor: Retwick Dey.
• Número de instalações: 7,5 milhões.
• Avaliação no Marketplace: 4,5/5 (269).
• Características principais: HTML e SVG pré-visualização ao vivo.
• Eventos de ativação: no início (*).
• Os recursos são otimizados: não.
• Tamanho do arquivo: 2,5MB.
• Tempo de ativação em meu sistema: 2513ms.
• Suíte de testes: sim. Testes básicos.
• Manutenção ativa: não. O último commit foi há um ano. O autor da extensão está à procura de um novo mantenedor.
• Extensões alternativas: não encontrei nenhuma!

Quando funciona, é uma extensão conveniente para o uso.

O desempenho é ruim e a manutenção não é mais realizada.

Eu recomendaria que alguém se tornasse o mantenedor e que a colocasse em ordem. Caso contrário, que se encontre outra extensão para o trabalho.

Nota: 5/10.

GitLens

O GitLens ajuda a visualizar a autoria do código e a explorar os repositórios Git.

• Autor: Eric Amodio.
• Número de instalações: 6,5 milhões.
• Avaliação no Marketplace: 4,86/5 (387)
• Características principais: visualização da autoria do código em um olhar. Ricas vistas laterais da barra lateral dos repositórios git.
• Eventos de ativação: no início (*).
• Os recursos são otimizados: sim.
• Tamanho do arquivo: 1,5MB.
• Tempo de ativação em meu sistema: 35ms.
• Suíte de testes: não.
• Manutenção ativa: sim, mas a atividade recente é baixa. O último compromisso foi há 4 meses.
• Extensões alternativas: nenhuma.

O GitLens é uma boa ideia e pode ser útil para obter perspectivas em uma base de código.

Está bem escrito e o desempenho é excelente.

Usei apenas a extensão das anotações de culpa, mas há muitas características e opções de configuração (135 configurações individuais).

Existem configurações para habilitar cada uma das características, o que é uma abordagem muito boa. Você pode ligar e desligar os codelens facilmente.

Houve uma pausa na atividade recentemente. Não sei se essa é uma situação temporária ou não. Portanto, é difícil dizer quão bem as extensões serão suportadas no futuro. O autor tem detalhes para apoiá-lo.

Nota: 9/10.

Vetur

Suporte à linguagem com o Vue

• Autor: Pine Wu.
• Número de instalações: 5,6 milhões.
• Avaliação no Marketplace: 4,5/5 (117)
• Características principais: destaque da sintaxe. Intellisense. Formatação de código.
• Eventos de ativação: onLanguage: vue.
• Os recursos são otimizados: não.
• Tamanho do arquivo: 70,6 MB.
• Tempo de ativação em meu sistema: 252ms. No entanto, a estatística "Ativar Fim" é de 3943ms!
• Suíte de testes: sim.
• Manutenção ativa: sim.
• Extensões alternativas: nenhuma extensão alternativa óbvia. A formatação pode ser feita com Prettier.

O Vetur é a extensão para o desenvolvimento de aplicações em Vue no VS Code.

As sintaxes destacadas, o Intellisense e o hover são ótimos para o desenvolvimento em Vue.

O tamanho da extensão é ENORME.

O desempenho é um pouco errático. Leva pelo menos 4 segundos na minha máquina para terminar a ativação, o que é muito mais longo do que as características integradas da linguagem JavaScript. Há também um atraso notável para o autocompletar da sintaxe de JavaScript.

Os desenvolvedores estão trabalhando no momento no bundling da extensão. Nesse quesito, portanto, esperamos que haja uma melhoria no desempenho em breve.

Nota: 7/10.

Settings Sync

O Settings Sync sincroniza as configurações usando o GitHub Gist.

• Autor: Shan Khan.
• Número de instalações: 2 milhões.
• Avaliação no Marketplace: 4,61/5 (638)
• Características principais: configurações de sincronização.
• Eventos de ativação: no início (*).
• Os recursos são otimizados: sim.
• Tamanho do arquivo: 1,2 MB.
• Tempo de ativação em meu sistema: 2513ms.
• Suíte de testes: sim.
• Manutenção ativa: não. O último commit foi há 1 ano.
• Extensões alternativas: esse é um recurso integrado no VS Code (documentação em inglês).

Essa foi uma extensão destacada. A sincronização de toda a configuração do seu editor entre as máquinas é superútil.

Desde julho de 2020, a mesma funcionalidade é uma característica integrada no VS Code para isso. A principal diferença é que essa extensão salva suas configurações para um gist, que você tem a opção de compartilhar com outros também.

O tempo de ativação é bastante lento. É justificadamente lento? É difícil dizer.

Meu palpite é que o recurso integrado fará um trabalho melhor eventualmente, pois tem o apoio da Microsoft. A extensão parece não ser mais suportada.

Nota: 8/10.

Markdown All in One

Markdown All in One preenchem muitas de suas necessidades de marcação.

• Autor: Yu Zhang.
• Número de instalações: 1,7 milhões.
• Avaliação no Marketplace: 4,8/5 (90)
• Características principais: edição em estilo "toggle". Tabela de conteúdo.
• Eventos de ativação:  onLanguage: markdown, onCommand: markdown.extension.printToHtmlBatch, workspaceContains: README.md.
• Os recursos são otimizados: sim.
• Tamanho do arquivo: 4,1 MB.
• Tempo de ativação em meu sistema: 195ms.
• Suíte de testes: sim.
• Manutenção ativa: sim.
• Extensões alternativas: Marky Markdown.

É uma extensão ótima e o desempenho é excelente.

Tem muitas características para o meu gosto. Para muitas pessoas, é atraente ter tudo o que possam querer em uma única extensão.

O evento de ativação workspaceContains: README.md parece uma inclusão desnecessária para mim. A maioria dos meus projetos tem um README, mas eu raramente os edito. Portanto, para mim, é como ter a extensão sempre ativa.

A lógica para a tabela de conteúdos é um pouco comum. Ela teve alguns problemas com falsos positivos no passado. Não sei se isso foi completamente eliminado.

O tamanho do arquivo da extensão pode ser reduzido excluindo as capturas de tela README do pacote de extensão.

Nota: 8/10.

Dicas de desempenho geral

Use um SO de 64 bits

Se você atualizar para uma versão de 64 bits de um sistema operacional, pode expandir a quantidade de memória virtual (VM) disponível para o VS Code de 2 GB para 4 GB.

Isto permite que o VS Code possa lidar com cargas de trabalho significativamente maiores quando a VM é necessária.

Desative a restauração do estado do projeto no início da operação

O VS Code restaura automaticamente o estado do projeto a partir da sessão anterior. Isso pode prolongar o tempo necessário para carregar um projeto.

Você pode desativar algumas das configurações de restauração para acelerar o tempo de carregamento:

• Workbench › Editor: Restore View State: ativado por padrão.
• Files: Restore Undo Stack: ativado por padrão.
• Workbench: Startup Editor: controla qual editor é mostrado na inicialização. A página padrão é a de boas-vindas. Você pode defini-la para "nenhuma" para prevenir que qualquer editor apareça na inicialização.

Desative recursos caros que afetam o desempenho de edição

• Minimap: Editor › Minimap: Enabled, ativado por padrão.
• Word wrap: Editor: Word Wrap, desabilitado por padrão.
• CodeLens: Editor: CodeLens, ativado por padrão.
• Format on Save: Editor: Format On Save, desabilitado por padrão.
• Format on Paste: Editor: Format On Paste, desabilitado por padrão.

Desative extensões para um espaço de trabalho

Você pode desativar uma extensão para um espaço de trabalho (projeto).

O mais provável é que você queira fazer isso para extensões que funcionem sempre. Para um projeto Java, você não vai precisar de ESLint!

Você também pode adotar a abordagem oposta. Você pode desativar uma extensão globalmente e somente habilitá-la para um número seleto de projetos.

Crie conjuntos de extensões

Você pode especificar um diretório alternativo para extensões a partir da linha de comando, como abaixo.

code --extensions-dir <dir>

Portanto, se você quiser usar diferentes conjuntos de extensões, você pode. Você pode adicionar um atalho de área de trabalho para isso, ou um alias para executar isto regularmente a partir da linha de comando.

Uma coisa a se ter em mente é a sincronização. Se você sincronizar suas extensões entre máquinas, você pode querer excluir extensões da sincronização. Caso contrário, você pode estragar sua pasta por engano ao trocar.

O ideal é que você não precise fazer isso.

Desative todas as extensões para uma sessão

Você pode iniciar o VS Code com todas as extensões de usuário desabilitadas a partir da linha de comando. Modo Zen no seu máximo!

code --disable-extensions

Solução de problemas de desempenho

Lentidão ou uma tela em branco

O VS Code tem problemas com a aceleração de hardware da GPU (unidade de processamento gráfico) em alguns sistemas. Você pode ver se esse é o caso, desativando a aceleração da GPU.

code --disable-gpu

Para definir isso permanentemente, faça o seguinte:

• Abra a Paleta de Comando (Ctrl+Shift+P).
• Execute o comando Preferências: Configurar Argumentos de Runtime. Esse comando abrirá um arquivo argv.json para configurar argumentos de tempo de execução. Você já pode ver alguns argumentos padrão lá.
• Adicione "disable-hardware-acceleration": true.
• Reinicie o VS Code.

Instalação parece estar corrompida com a mensagem [Unsupported].

O VS Code faz uma verificação de antecedentes quando inicia para verificar se você alterou algum de seus arquivos fonte. Se esse for o caso, você verá o texto [Unsupported] na barra de título.

Uma das causas desse problema pode ser o software antivírus. O VS Code pode ter sido colocado em quarentena por engano ou ter tido arquivos removidos pelo software antivírus (ver questão #94858). Verifique as suas configurações do software antivírus para prevenir isso.

Para resolver essa situação, você pode reinstalar o VS Code. Isso substituirá os arquivos modificados e silenciará o aviso.

Palavras finais

Você não deve precisar comprometer o desempenho para obter as características de que precisa.

A abordagem mais pragmática é incrementar as extensões de que você precisa. Faça um pouco de pesquisa a cada vez e teste a extensão. Antes que você perceba, terá um portfólio incrível de extensões.

É com prazer que compartilho com vocês a primeira extensão oficial do freeCodeCamp para o VS Code – um tema de modo escuro.

Este tema usa o esquema de cores, tipografia e especificidades do design de UI característicos do freeCodeCamp.org.

O tema de modo noturno é minimalista, não pesa na visão e ajudará você a entrar em um estado ideal para programar.

Aqui temos uma ideia da aparência do modo noturno:

Você pode baixar esse tema no Visual Studio Marketplace.

Como alternativa, abra a guia de extensões no seu VS Code e procure por "freeCodeCamp Dark Theme" para fazer a instalação.

Sobre o tema de modo escuro

Este tema tem como base a estética visual "Command Line Chic" do freeCodeCamp. Se você quer que seu VS Code tenha uma aparência ao estilo "Mr. Robot", este estilo é para você.

Criamos este tema de Modo Noturno para dar um equilíbrio entre contraste e estilo, legibilidade e bom gosto.

Se você gosta de design, programamos usando o estilo "Command Line Chic" no guia de estilo de design (em inglês) de nossa organização sem fins lucrativos.

Acho que você vai adorar. Feliz programação!

O Visual Studio Code é um dos editores de código mais populares nesse momento. Ele é gratuito, sua interface é limpa e ele tem milhares de extensões que tornam fácil e divertido programar.

Sou um desenvolvedor de front-end para a web e uso o VS Code enquanto trabalho e no meu canal no YouTube. Muita gente já me perguntou como o navegador é atualizado automaticamente quando eu estou programando sem eu ter de clicar no botão de recarregar a página.

Bem, isso é possível quando você instala essa extensão útil no VS Code, chamada Live Server. Neste artigo, explicarei os detalhes de como ele funciona, como configurá-lo e como criar um servidor ao vivo (live server, em inglês) no seu editor VS Code.

Por que eu devo usar a extensão do Live Server?

Normalmente, quando você quer fazer uma alteração no seu código ou escrever algo novo, é preciso atualizar a página manualmente para ver as alterações.

Em outras palavras, se você fizer 100 alterações no seu código a cada dia, precisará atualizar o navegador 100 vezes.

A extensão do Live Server, no entanto, automatiza isso para você. Depois da instalação, um localhost automatizado poderá rodar no seu navegador, bastando iniciá-lo com um único botão.

Quando você fizer as alterações no código ou quando escrever algo novo, depois de salvará o código e o navegador fará uma atualização automática. Então, você poderá ver as mudanças rápida e automaticamente.

Se preferir, você também pode assistir ao tutorial em vídeo abaixo:

Primeiro, instale o VS Code

Você pode pular essa parte se já tem o VS Code instalado no seu computador. Do contrário, baixe-o do site da web oficial do editor (em inglês).

Depois de baixar e instalar o VS Code, você verá a tela de boas vindas:

Do lado esquerdo, você verá alguns ícones. Um deles (abaixo do ícone "sem bugs ") é o botão das extensões:

Ao clicar nele, aparecerá uma barra de pesquisa. Digite "live server" nela.

Você verá muitas opções. Escolha a que funcionar para você e seu sistema. Eu uso o Live Server de Ritwick Dey. Vamos continuar com ele nesse exemplo:

Clique no botão Install (Instalar) e instale a extensão.

Criar uma nova página em HTML

Para iniciar o Live Server, certifique-se de ter, pelo menos, uma página em HTML criada. Para fazer isso, clique no botão File (Arquivo), na parte superior esquerda, selecione o botão New File (Arquivo novo) e digite index.html:

Problemas de configuração

Agora, após ter criado uma página em HTML e instalado a extensão, você deverá ver um ícone, abaixo na tela, no campo em azul, dizendo "Go Live" (Colocar ao vivo):

Caso não enxergue, basta reiniciar o VS Code. Vai dar tudo certo.

Clique no botão "Go Live" e o localhost (atribuído a um número de porta) deverá iniciar em seu navegador padrão. Você pode iniciar ou interromper seu servidor ao vivo a qualquer momento. Basta clicar no mesmo botão.

Se você chegou nessa etapa, parabéns! :) Agora, você pode trabalhar com o Live Server. Do contrário, se ainda estiver com problemas, confira este artigo para obter mais informações (em inglês).

Conclusão

Espero que este artigo tenha ajudado você a instalar e a configurar a extensão do Live Server no VS Code. Se quiser saber mais sobre o desenvolvimento para a web, visite o canal do autor no YouTube.

Obrigado pela leitura!