Extensões VSCode para facilitar o desenvolvimento de JavaScript e Vue

Até o momento, há uma quantidade suficiente de ferramentas de desenvolvimento com suporte para a linguagem JavaScript e estruturas baseadas nela. A questão de escolher uma ferramenta específica está além do escopo deste artigo. Tentarei descrever minha experiência do usuário com o Visual Studio Code e as ferramentas projetadas para facilitar a vida dos desenvolvedores de JS, principalmente aqueles que usam o Vue.

Existem muitos plugins na loja de extensões VSCode, os mais convenientes para o desenvolvimento da Web serão listados abaixo.

HTML e CSS

Estilos de layout e escrita geralmente são uma tarefa monótona; portanto, as seguintes extensões podem facilitar e acelerar seu trabalho:

• Tag de fechamento automático e tag de renomeação automática - extensões simples e convenientes, para simplificar o trabalho com layout, têm suporte para componentes de arquivo único Vue.
• CSS Peek é uma extensão simples que adiciona a capacidade de exibir ou navegar rapidamente por uma regra.
• Informações sobre cores - permite visualizar informações detalhadas sobre a cor, com uma boa margem de configurações.
• Destaque de cores - adiciona uma exibição de cores na forma de borda, se uma codificação de cores for detectada no código.
• Nomes de classe do IntelliSense para CSS em HTML - analisa o ambiente de trabalho para adicionar a capacidade de concluir automaticamente as classes CSS.

Javascript

• Debbugger for Chrome - uma extensão para simplificar a depuração diretamente do editor de código, funciona com tudo o que o Chrome DevTools possui.
• Trechos de código JavaScript (ES6) - um conjunto de trechos para JS, acelera bastante o desenvolvimento.
• JSHint - extensão para dicas sobre o design e organização do código JS, possui configurações flexíveis.
• ESLint é um linter para JS com configurações flexíveis.

Vue

Não existem muitas extensões adequadas para trabalhar com o Vue. Abaixo estão algumas das mais úteis:

• O Vetur é um conjunto completo dos complementos mais necessários para trabalhar com o vue, como snippets, destaque de sintaxe.
• Vue Peek - adiciona uma transição conveniente aos componentes do vue.

Git

O VSCode tem suporte para trabalhar com o git pronto para uso, mas ainda assim as funções internas nem sempre são suficientes. A seguir, são extensões que facilitarão um pouco o trabalho com o git:

• O GitLens é provavelmente a extensão mais famosa para trabalhar com o git, que adiciona muitos recursos para visualizar informações do git.
• Histórico do Git - adiciona a capacidade de visualizar convenientemente o histórico de alterações no git, possui uma interface bastante conveniente.
• Indicadores Git - um indicador simples da atividade git na bandeja inferior do VSCode.

Ambiente de trabalho e processo de desenvolvimento

Para um trabalho produtivo, seria bom ter ajudantes na forma de complementos destacando erros simples, sugerindo um estilo de escrita e outras dicas / ações convenientes. Experimente as seguintes extensões:

• Bracket Pair Colorizer - adiciona uma meia-luz aos colchetes que cercam os blocos de código, facilita a percepção do código com aninhamento profundo, separando visualmente o código.
• Embelezar é, na minha opinião, a extensão mais conveniente para o estilo automático de código; mais detalhes podem ser encontrados no link.
• O Live Server é uma extensão muito útil que permite iniciar rapidamente o servidor ativo, por exemplo, para o layout.
• O Custo de importação é uma excelente extensão que exibe o tamanho do módulo importado, permite selecionar partes importadas do módulo em mais detalhes, sem recorrer aos analisadores em pacote.
• NPM Intellisense - preenchimento automático para módulos npm.
• Abrir no navegador é uma extensão simples que adiciona um ponto de abertura no navegador.
• Caminho Intellisense - preenchimento automático para nomes de arquivos e sua localização.
• Sincronização de configurações - depois de concluir a instalação das ferramentas necessárias e configurar o ambiente, é conveniente salvar a configuração. Essa extensão permitirá que você sincronize tudo no git gist.
• Classificar linhas - uma maneira fácil de organizar a classificação das linhas no código de acordo com as condições especificadas.
• O TODO Highlight é uma extensão simples para destacar palavras-chave como TODO, FIXME.
• Trailing Spaces - destaca os espaços extras.
• VS Live Share - muitos enfrentaram um problema quando tiveram que explicar a um desenvolvedor remoto por muito tempo onde e o que estava errado, essa extensão simplifica a vida em tais situações, permitindo que você faça uma demonstração ao vivo, suporte o trabalho de vários usuários, encaminha o ambiente de execução para a máquina do cliente.
• Visual Studio IntelliCode - automatiza tarefas de rotina para desenvolvedores em linguagens como Python, TypeScript / JavaScript e Java.

Design do Editor

• Tema Darcula - o design de maior sucesso na minha opinião, também posso aconselhar o Monokai Pro .
• vscode-icons é o pacote de ícones mais bem-sucedido para o VSCode.

Também pode ser interessante.

• GraphQL para VSCode - um tipo de intellisense para GraphQL, a extensão mais conveniente, sob a fuligem muito útil, mais no link.
• Markdown instantâneo - visualização ao vivo para marcação de markdown.
• Colar JSON como código é uma extensão conveniente que gera um modelo de tipo a partir de dados JSON. Suporta TypeScript, Python, Go, Ruby, C #, Java, Swift, Rust, Kotlin, C ++, Flow, Objective-C, JavaScript, Elm e JSON Schema.
• Rainbow CSV - luz de fundo para arquivos CSV.
• O Regex Previewer é uma extensão muito útil para visualizações regulares.
• Visualizador SVG - visualizador SVG.

Espero que esta lista seja útil para você, ficarei feliz em acrescentar.