O Visual Studio Code (também chamado VS Code e VSCode) é um editor de código de plataforma cruzada econômico e poderoso, criado na forma de um aplicativo de desktop. Segundo o autor do material, cuja tradução nós publicamos hoje, o VS Code suporta muitas ferramentas de desenvolvimento - como
TypeScript e
o depurador do Chrome. Isso, além do fato de que um número incrível de extensões de código aberto é gravado nele, faz do VS Code um editor muito popular e amado por muitos.
Se você deseja adicionar algo novo ao seu arsenal de programadores de JavaScript - o autor do material espera encontrar aqui algo que seja útil para você. Nem todas as vinte e sete ferramentas revisadas aqui se destinam exclusivamente ao desenvolvimento de JS. Mas todos eles podem ser aplicados com sucesso por quem escreve em JavaScript.
1. Fragmentos do projeto
A
extensão de trechos de projetos , minha favorita de todos os tempos, é baseada na ferramenta de
trechos de usuários incorporada ao código VS.
Se você não estiver familiarizado com esse recurso padrão do VS Code, saiba que ele permite que o usuário crie seus próprios fragmentos de código na forma dos chamados snippets. Isso é feito para reutilizá-los em seus projetos. O que significa reutilização?
Considere um exemplo. Suponha que você descubra que frequentemente precisa escrever o mesmo código padrão. Por exemplo - isto:
import { useReducer } from 'react' const initialState = {
Um código semelhante pode ser emitido na forma de um snippet. Como resultado, em vez de digitar tudo no teclado (ou copiá-lo de algum lugar), você só precisa inserir o chamado prefixo, após o qual um código correspondente a esse prefixo aparecerá no editor.
Se você, no Código VS, acessar
File > Preferences > User Snippets , poderá criar opcionalmente um novo
New Global Snippets File global selecionando o
New Global Snippets File .
Por exemplo, para criar um novo arquivo de trecho para projetos
React que usam TypeScript, você pode selecionar o
New Global Snippets File e definir o nome do arquivo como
typescriptreact.json . O arquivo
.json recém-criado será aberto no editor, no qual será possível descrever trechos.
Crie um trecho com base em um fragmento do código acima. Para fazer isso, o arquivo
typescriptreact.json deve ser convertido para o seguinte:
{ "const initialState = {}; const reducer = (state, action)": { "prefix": "rsr", "body": [ "const initialState = {", " //$1", "}", "", "const reducer = (state, action) => {", " switch (action.type) {", " default:", " return state", " }", "}" ] } }
Agora que o arquivo tem uma descrição desse trecho, é possível criar um novo arquivo TypeScript com a extensão
.tsx e inserir o prefixo
rsr nele. Isso causará um pop-up com uma descrição do trecho. Pressionar
Tab conclui o procedimento para inserir um trecho em um arquivo. Será representado pelo seguinte código:
const initialState = {
Alguns inconvenientes do uso de snippets globais é que eles estão disponíveis para todos os projetos que você desenvolve (no entanto, em alguns casos, para snippets de uso geral, isso, pelo contrário, é conveniente). Mas alguns projetos podem ser configurados de uma maneira especial. Como resultado, se o que é usado nesses projetos não for necessário em todos os projetos, o arquivo de snippet global pode não ser a melhor solução para o problema de processar fragmentos de código reutilizável.
Suponha que um projeto use uma estrutura de pastas especial. Para simplificar o trabalho neste projeto, algo semelhante ao código a seguir pode ser preparado no arquivo
typescriptreact.json :
{ "import Link from components/common/Link": { "prefix": "gcl", "body": "import Link from 'components/common/Link'" }, "border test": { "prefix": "b1", "body": "border: '1px solid red'," }, "border test2": { "prefix": "b2", "body": "border: '1px solid green'," }, "border test3": { "prefix": "b3", "body": "border: '1px solid magenta'," } }
Preste atenção ao primeiro trecho. Pode ser adequado para um projeto com uma estrutura específica de pastas e arquivos. Mas e se estamos trabalhando em outro projeto no qual o componente
Link está localizado ao longo de um caminho como
components/Link ?
Dê uma olhada agora em outros trechos. Eles usam aspas simples. Seu uso leva ao aparecimento de estruturas como
border: '1px solid red' no código.
Tais construções podem ser perfeitamente usadas em JavaScript. Mas e se usarmos a biblioteca de
componentes com estilo como uma ferramenta para estilizar um projeto? Nesse caso, essa sintaxe não será adequada para nós. De fato, os componentes estilizados usam construções CSS regulares!
De fato, aqui a extensão do
Project Snippets vem em nosso auxílio.
Essa extensão permite criar trechos que operam no nível do projeto ou da área de trabalho. Esses trechos não entram em conflito com os trechos criados para outros projetos e não interferem no trabalho com eles. É muito conveniente
2. Melhores Comentários
Se você gosta de escrever comentários no seu código, provavelmente se depara com o fato de que às vezes não é fácil encontrar um comentário escrito há muito tempo. A razão para isso pode ser que o código pode crescer um pouco.
Usando a extensão
Better Comments , você pode realçar comentários em cores diferentes.
Usando a extensão Better CommentsAgora, entre outras coisas, se você estiver trabalhando no código de uma equipe, será mais fácil chamar a atenção de outros desenvolvedores para comentários importantes, começando com
! ou
? .
3. Bracket Pair Colorizer
Quando vi as capturas de tela pela primeira vez com os resultados da extensão
Bracket Pair Colorizer , ficou claro para mim que essa extensão simplesmente tinha que aparecer na minha caixa de ferramentas.
Programar é minha paixão, e destacar colchetes é algo que definitivamente me ajuda a aproveitar mais essa atividade.
Usando a extensão do colorizer do par de suporte4. Tema material
O tema Material, introduzido pela extensão
Material Theme , é um fenômeno grandioso que agora está disponível para os fãs do VS Code. Seu uso permite que você traga o código para o seguinte formulário.
Criando código usando o tema MaterialEsse deve ser um dos melhores tópicos existentes.
5. @ typescript-eslint / parser
Se você estiver escrevendo em TypeScript, provavelmente considere mudar suas configurações de TSLint para typescript-eslint. O fato é que, de
acordo com alguns relatórios , o suporte ao TSLint da Palantir será descontinuado após algum tempo. Em vez de TSLint, typescript-eslint será usado lá.
Os projetos estão mudando gradualmente para o uso do pacote @ typescript-eslint / parser e pacotes relacionados. Isso é feito em um esforço para se preparar para futuras mudanças no ecossistema de desenvolvimento de TS. Se você gosta do
Prettier , pode usar esta ferramenta, usando a maioria das regras do ESLint.
6. Stylelint
Stylelint é a ferramenta que sempre é usada em meus projetos. Isso é verdade por vários motivos:
- Isso ajuda a evitar erros.
- Promove convenções de estilo ao escrever CSS.
- Funciona bem com o Prettier.
- Ele suporta CSS / SCSS / Sass / Less.
- Ele suporta plugins criados pela comunidade de desenvolvedores.
7. Markdownlint + docsify
Não sei como outros desenvolvedores fazem anotações durante as sessões de brainstorming, mas gosto de fazer anotações no formato
Markdown . Este é um formato simples e conveniente. Existem muitas ferramentas disponíveis para ajudá-lo a escrever textos Markdown. Entre essas ferramentas, o
markdownlint pode ser observado.
Essa é a extensão do código VS, que é um linter que ajuda a verificar estilos em arquivos
.md . Ele também suporta a formatação de texto usando o Prettier.
Além disso, eu costumo usar o
docsify em todos os meus projetos. Esta ferramenta suporta o formato Markdown e outros recursos úteis.
8. TODO Destaque
Eu tenho o hábito de escrever notas diretamente no código sobre o que precisa ser feito no projeto. Como resultado, estou interessado em extensões como o
TODO Highlight . Esta extensão ajuda você a trabalhar com as notas do TODO.
9. Custo de Importação
A extensão
Custo de importação pertence à categoria de ferramentas cuja utilidade pode ser sentida quando são usadas pela primeira vez. No entanto, depois de usar uma ferramenta semelhante por algum tempo, pode acontecer que não haverá mais necessidade dela. O fato é que, com o tempo, o desenvolvedor já sabe exatamente quais informações fornecerão essa ferramenta. No entanto, ainda recomendo usar esta extensão por um tempo. Pode ser que isso o beneficie.
10. Destaque Tag de Correspondência
Às vezes, a busca pela parte de fechamento de uma determinada tag pode se tornar uma tarefa difícil. Nesses casos, a extensão
Highlight Matching Tag pode ser útil.
Usando a extensão Highlight Matching Tag11. vscode-spotify
Às vezes, fico entediado com o fato de que, no processo de trabalhar no VS Code, tenho que mudar constantemente para o music player para mudar de faixa e depois voltar ao meu negócio novamente.
A
extensão vscode-spotify , que permite controlar o player Spotify diretamente do VS Code, me ajuda a resolver esse problema.
Graças a esta extensão, você pode ver informações sobre a música que está sendo tocada na barra de status do editor. Você pode usar teclas de atalho para alternar gravações; o Spotify também pode ser controlado a partir do VS Code usando os botões.
12. GraphQL for VSCode
A tecnologia GraphQL está crescendo em popularidade, exemplos de sua aplicação podem ser vistos em quase todos os cantos do desenvolvimento de JavaScript. Portanto, muitos provavelmente
acharão útil a extensão
GraphQL for VSCode .
Esta extensão oferece suporte à sintaxe do GraphQL, destacando, aprendendo e completando o código.
Eu uso muito o Gatsby, então tenho que ler o código GraphQL todos os dias. A extensão GraphQL for VSCode me ajuda com isso.
13. Recuo-arco-íris
A extensão
Indent-Rainbow é semelhante à extensão Highlight Matching Tag descrita acima. Se às vezes não for fácil para você entender o recuo, essa extensão ajudará você a lidar com o problema, melhorando a legibilidade do código. Aqui está um exemplo de seu uso.
Usando a extensão Indent-Rainbow14. Destaque em cores
O Destaque de cores é uma dessas extensões sobre as quais me perguntam: “Onde você o encontrou?”. Esta extensão ajuda a trabalhar com cores. Parece como abaixo.
Usando a extensão Highlight Color15. Seletor de cores
O Color Picker é uma extensão do VS Code que oferece ao usuário uma interface gráfica para ajudá-lo a escolher cores para uso em CSS.
16. Cliente REST
Quando tive a oportunidade de experimentar a extensão
REST Client pela primeira vez, ela não me pareceu particularmente útil. Não suportava comparação com algo como o
Postman .
Mas gradualmente, verificou-se que essa expansão tem um enorme impacto positivo no meu trabalho. Especialmente quando eu precisava testar certas APIs.
Ao trabalhar com isso, basta, por exemplo, criar um novo arquivo no qual haverá apenas uma linha:
https:
Para executar a solicitação HTTP GET neste endereço, basta selecioná-lo, vá para a barra de comandos (
CTRL + SHIFT + P ) e selecione o comando
Rest Client: Send Request . Depois disso, uma nova guia será aberta, na qual serão exibidas em breve informações sobre a solicitação e resposta. Isso é muito útil.
Usando a extensão de cliente RESTEssa extensão também permite configurar parâmetros ou dados para solicitações POST. Isso é feito com apenas algumas linhas de código:
POST https:
Tal construção levará a uma solicitação POST com os parâmetros
{ "email": "someemail@gmail.com", "password": 1 } .
E isso, de fato, é apenas uma descrição extremamente concisa das possibilidades dessa extensão.
17. Sincronização de configurações
Eu realmente não gostei, ao configurar um novo local de trabalho, para fazer listas das extensões que usei, salvá-las em algo como o
Evernote e depois restaurar tudo manualmente.
Consegui automatizar esse processo usando a extensão de
sincronização de configurações .
Para usá-lo, você só precisa ter uma conta
gist / GitHub . Se houver necessidade de salvar as configurações (isso inclui ligações de teclado, trechos e extensões e muito mais) - basta usar a combinação de teclas
SHIFT + ALT + U Isso carregará todas essas configurações na conta principal. No entanto, eles estarão disponíveis apenas para o titular da conta. Para fazer o download das configurações, por exemplo, ao mudar para um novo computador, basta instalar esta extensão, inserir as informações da conta principal e usar a combinação de teclas
SHIFT + ALT + D18. Árvore Todo
A extensão
Todo Tree ajuda a encontrar comentários TODO no código do seu projeto. Ele prepara esses comentários no formato da árvore exibida no lado esquerdo da tela.
Usando a extensão de árvore Todo19. Alternar cotações
Alternar cotações é uma extensão interessante que permite alterar a aparência das cotações usadas no código. Isso se mostra muito útil, por exemplo, nos casos em que você precisa alterar cotações regulares para backticks (backticks). Isso pode ser necessário ao interpolar seqüências de caracteres e pode ser especialmente útil quando as seqüências de estilo Prettier usam aspas simples regulares.
Usando a extensão Alternar cotações20. Melhor alinhamento
A extensão
Better Align permite alinhar o código sem primeiro destacá-lo.
Para usar esta extensão, você precisa colocar o cursor no código a ser alinhado, abrir a barra de comandos (usando
CTRL + SHIFT + P ou o atalho de teclado que você atribuiu para executar esta tarefa) e chamar o comando
Align .
21. Tag de fechamento automático
A extensão
Auto Close Tag vem me ajudando desde o dia em que comecei a trabalhar no VS Code. Ele permite que você insira algo como
<div> , depois o ícone
/ e feche a tag automaticamente.
Esta função simples e conveniente não está nos recursos padrão do VS Code, portanto, acho esta extensão muito útil.
22. Classificar linhas
Não gosto de matrizes cujos elementos não estejam em ordem alfabética. A extensão
Sort Lines me ajuda a lidar rapidamente com esse problema. Se você também não gosta de tais matrizes - pode ser útil para você.
23. VSCode Google Translate
Talvez eu seja a única pessoa que considera útil a extensão
VSCode Google Translate . Mas isso me ajuda, pois tenho que participar de projetos de pessoas que falam idiomas diferentes. Esta extensão pode ser útil para quem, por traduzir algo, não deseja recolher o VS Code.
24. Mais bonito
Prettier é uma extensão do VS Code que pode formatar automaticamente o código escrito em JavaScript, TypeScript e outros idiomas.
25. Tema do ícone de material
Gosto mais dos ícones do pacote
Material Icon Theme do que de outros. Usá-los é muito mais fácil distinguir entre tipos de arquivos. Isso é especialmente verdade nos casos em que um tema sombrio é usado no VS Code.
26. IntelliSense para CSS, nomes de classes em HTML
A extensão de nome longo
IntelliSense para CSS, nomes de classes em HTML permite equipar o VS Code com a capacidade de preencher automaticamente
nomes de classes CSS no atributo de
class HTML . O trabalho dele é baseado nas definições de classe encontradas no seu espaço de trabalho.
27. Path Intellisense
A extensão
Path Intellisense ajuda a concluir automaticamente a entrada dos nomes dos arquivos.
Sumário
Esperamos que entre as extensões para o VS Code que você acabou de ler, exista algo que seja útil para você.
Caros leitores! Quais extensões do código VS você adicionaria às discutidas neste artigo?
