Desempenho com o VS Code – como otimizar o Visual Studio Code e escolher as "melhores" extensões

Artigo original: https://www.freecodecamp.org/news/optimize-vscode-performance-best-extensions/

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

blind-judgment — Edição de "Blindfolded Lady Justice", criada por Tingey Injury Law Firm e extraída do Unsplash

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!

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?**

burger-bundle — Edição de uma imagem sem título criada por Pablo Merchán Montes, extraída do Unsplash

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:

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).
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.