Aqui estão alguns hacks super secretos da VS Code para aumentar sua produtividade

Dylan Tientcheu Blocked Unblock Seguir Seguindo 8 de janeiro

Codificando como um aficionado, profissional ou mesmo um desenvolvedor de uma vez em um mês, você deve saber que ter ferramentas inteligentes e afiadas é vital para qualquer pessoa disposta a colocar o máximo de horas produtivas durante o trabalho.

Organizei uma pequena coleção de dicas, truques e extensões e os filtrei para manter apenas os mais raros e mais úteis para um desenvolvedor da Web moderno. Como sabemos, o ecossistema JavaScript é muito grande e continua crescendo. Por esse motivo, tentarei ser imparcial o máximo possível.

As seguintes dicas do Visual Studio Code irão ajudá-lo a sair de todas as suas sessões de codificação da seguinte forma:

Connor McGregor (O Passeio Notório)

Fazendo bonito e amigável

Se realmente parece bom e amigável, você vai adorar o tempo gasto com isso.

1. Tema e ícones do material

Isso é direto para a fera nos temas do Código VS. Eu acho que o tema material é o mais próximo de escrever com uma caneta e um papel dentro do editor (especialmente ao usar o tema sem contraste ). Seu editor quase parece plano e contínuo, indo das ferramentas integradas ao editor de texto.

Imagine um tema épico juntamente com ícones épicos. Ícones temáticos materiais são apenas uma alternativa incrível para substituir os ícones padrão do VSCode. O grande catálogo de ícones projetados se integra suavemente ao tema, tornando-o mais bonito. Isso ajudará você a encontrar seus arquivos facilmente no explorador.

https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

2. Modo Zen com layout centrado

Você pode já conhecer a Visualização do Modo Zen, também conhecida como Visualização Livre de Distração (para quem vem do Texto Sublime), onde tudo (exceto o código) é removido para proporcionar uma intimidade real com o seu editor de código. Você sabia que poderia centralizar o layout para ajudá-lo a ler seu código como se estivesse em um visualizador de PDF? Isso realmente ajudará você a se concentrar em uma função ou estudar o código de outra pessoa.

Modo Zen : [Visualizar> Aparência> Alternar Modo Zen]

Layout do centro: [Visualizar> Aparência> Alternar layout centrado]

3. Fontes com Ligaduras

Estilo de escrita torna a leitura fácil e conveniente. Você pode fazer seu editor parecer melhor com fontes incríveis junto com ligaduras . Aqui estão 6 das melhores fontes que suportam ligaduras (de acordo com www.slant.co )

Codificação com Ligaduras

Você pode tentar o código Fira , é simplesmente fantástico e de código aberto. É assim que você altera a fonte no VSCode após instalá-lo.

 "editor.fontFamily": "Fira Code", 
"editor.fontLigatures": true

Fonte: https://github.com/tonsky/FiraCode/blob/master/showcases/all_ligatures.png

A bem conhecida fonte Operator Mono não vem com suporte nativo para ligaduras. No entanto, se você é um grande fã de ligaduras, você pode adicioná-las usando esta biblioteca .

4. Recuo do Arco-Íris

Recuar com estilo. Essa extensão coloriza o recuo na frente do texto, alternando quatro cores diferentes em cada etapa.

Recuo do arco-íris: https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

A configuração de recuo padrão colore o recuo após um esquema de arco-íris. Eu, no entanto, personalizei o meu para seguir diferentes tons de cinza. Se desejar que o seu seja parecido com este exemplo, copie e cole o snippet a seguir em suas settings.json

 "indentRainbow.colors": [ 
 "rgba (16,16,16,0,1)", 
 "rgba (16,16,16,0,2)", 
 "rgba (16,16,16,0,3)", 
 "rgba (16,16,16,0,4)", 
 "rgba (16,16,16,0,5)", 
 "rgba (16,16,16,0,6)", 
 "rgba (16,16,16,0,7)", 
 "rgba (16,16,16,0,8)", 
 "rgba (16,16,16,0,9)", 
 "rgba (16,16,16,1,0)" 
 ] 

5. Personalização da barra de título

Este é um ótimo ajuste visual. Copiei de Wes Bos em um de seus essons React & GraphQL. Basicamente, ele mudou as cores da barra de título em projetos diferentes para reconhecê-las facilmente e ajudar o público a diferenciá-las também. Isso é realmente útil se você trabalha em aplicativos que podem ter o mesmo código ou nomes de arquivo, por exemplo, um aplicativo móvel nativo de reação e um aplicativo da web de resposta.

Isso é feito editando as configurações da Barra de Título nas Configurações da Área de Trabalho para cada projeto em que você deseja diferentes cores da barra de título.

Codificação mais rápida

A própria essência de fazê-lo a tempo

1. Tag Embrulho

Se você não conhece Emmet , então provavelmente é alguém que gosta de digitar tudo. Emmet permite que você digite um código abreviado e obtenha as tags correspondentes retornadas. Isso é feito selecionando um monte de código e digitando o comando Wrap com Abreviado que eu teclava para shift+alt+.

Assista abaixo.

Embrulhe com Emmet

Imagine que você queira envolver tudo isso, mas como linhas individuais. Você usaria wrap com linhas individuais e depois inserir * após a abreviatura, por exemplo div*

Caso você queira pular direto para o Emmeting, este é o Emmet Cheatsheet.

2. Balanço para dentro e para fora

Esta dica foi tirada de https://vscodecandothat.com/ que eu realmente recomendo.

Você pode selecionar uma tag inteira no VS Code usando os comandos Emmet balance inward e balance outward . É útil vincular esses comandos a atalhos de teclado, como Ctrl + Shift + Up Arrow para Ctrl + Shift + Up Arrow para Equilíbrio Externo e Ctrl + Shift + Down Arrow para Ctrl + Shift + Down Arrow para Equilíbrio Interno.

Balanço Interno / Externo

3. Turbo Console.log ()

Ninguém gosta de digitar instruções muito longas como console.log (). Pode ser realmente irritante, principalmente quando você quer apenas produzir algo realmente rápido, visualizar seu valor e continuar codificando. E se eu dissesse que você poderia consolar log de qualquer coisa tão rápido quanto Lucky Luke?

Isso é feito com uma extensão chamada Log do Console Turbo . Ele permite o registro de qualquer variável na linha abaixo com um prefixo automático seguindo a estrutura do código. Você também pode descomentar / comentar alt+shift+u/ alt+shift+c todos os console.log () adicionados por esta extensão.

Além disso, você também pode excluir todos eles com alt+shift+d :

Registro de console como Lucky Luke

4. servidor Live

Esta é uma extensão incrível que ajuda você a lançar um servidor de desenvolvimento local com recurso de recarga ao vivo para páginas estáticas e dinâmicas. Ele tem um ótimo suporte para os principais recursos, como: HTTPS, CORS, endereços de host local personalizados e porta.

Baixe aqui

Fonte ( https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer )

Ele pode até permitir que você compartilhe seu host local, se usado com o VSCode LiveShare .

5. Copiar / Colar com vários cursores

Um dos primeiros "Wows" que eu gritei ao usar o VS Code aconteceu quando eu editei várias linhas adicionando cursores em linhas diferentes. Muito tempo depois, achei um bom uso para esse recurso. Você pode copiar e colar o conteúdo selecionado por esses cursores e eles serão colados exatamente na ordem em que foram copiados.

Confira abaixo.

Copiar e colar com cursores diferentes

6. Breadcrumbs e contornos

O Breadcrumb mostra a localização atual e permite navegar rapidamente entre símbolos e arquivos. Para começar a usar breadcrumbs, ative-o com o comando View> Toggle Breadcrumbs ou por meio da configuração breadcrumbs.enabled .

A Vista de Tópicos é uma seção separada na parte inferior da Árvore do Explorador de Arquivos. Quando expandida, mostrará a árvore de símbolos do editor atualmente ativo.

A visualização Esboço tem diferentes modos Classificar por, rastreamento opcional do cursor. Também inclui uma caixa de entrada que filtra símbolos enquanto você digita. Erros e avisos também são mostrados na visualização Esboço, permitindo que você veja rapidamente a localização de um problema.

Breadcrumb and Outline Relation

Diversos

Esses pequenos ajustes que mudam tudo

1. CLI do código

O VS Code possui uma poderosa interface de linha de comando que permite controlar como você inicia o editor. Você pode abrir arquivos, instalar extensões, alterar o idioma de exibição e fornecer diagnósticos por meio de opções de linha de comando (switches).

Imagine que você acabou de git clone <repo-url> um repositório git clone <repo-url> e deseja substituir a instância atual do VS Code que está usando. code . -r fará o truque sem que você tenha que sair da interface CLI ( saiba mais aqui ).

2. Polacode

Você frequentemente aparece em capturas de tela atraentes com fontes e temas personalizados, como o abaixo. Isso foi tirado no VS Code com o Polacode Extension

Eu sei que o carbono também é uma alternativa boa e mais personalizável. No entanto, o Polacode permite que você permaneça no seu editor de código e use qualquer fonte proprietária que você tenha comprado e que seja inutilizável no Carbon.

3. Quokka (rascunho do JS / TS)

Quokka é um playground de prototipagem rápida para JavaScript e TypeScript. Ele executa seu código imediatamente enquanto você digita e exibe vários resultados de execução e logs do console em seu editor de código.

Um caso de uso incrível para Quokka é quando você está estudando para entrevistas técnicas, você é capaz de produzir cada passo sem ter o stress de definir pontos de interrupção em depuradores.

Ele também pode ajudá-lo a estudar as funções de uma biblioteca, como o Lodash ou o MomentJS, antes de usá-las. Ele até funciona para chamadas assíncronas.

5. WakaTime

Seus amigos acham que você gasta muito tempo codificando? Grave e mostre que 10hrs / day não é "demais". O WakaTime é uma extensão que ajuda a registrar e armazenar métricas e análises relacionadas à sua atividade de programação.

Você pode definir metas, visualizar linguagens de codificação que você costuma usar, você pode até se comparar a outros ninjas do mundo.

Painel WakaTime e Líderes

6. Typer do Hacker VSCode

Você já digitou código na frente de uma multidão? Você geralmente digita de forma imprudente e fala enquanto digita, o que o confunde um pouco. Imagine um código pré-digitado que só aparece quando você simula digitando como no geektyper .

Jani Eväkallio trouxe para a VS Code essa extensão . Ele ajudará você a gravar e reproduzir macros (código escrito em seu editor), tornando-o 100% mais focado ao digitar para um público.

7. Excluir pastas

Eu aprendi este truque em um post StackOverFlow . Este é um ajuste rápido para excluir pastas como node_modules ou qualquer outro da árvore do explorador para ajudá-lo a se concentrar apenas no que interessa. Quanto a mim, eu realmente odeio abrir a tediosa pasta node_module no meu editor, então decidi escondê-la.

Por exemplo, para ocultar node_modules, você pode fazer isso:

  1. Vá para Arquivo> Preferências> Configurações (ou no Mac Code> Preferências> Configurações )
  2. Pesquisar files.exclude nas configurações
  3. Selecione adicionar padrão e digite **/node_modules
  4. Voila! node_modules desapareceu da árvore do explorer

8. [Suas sugestões]

Você sempre pode comentar algumas de suas dicas mais secretas sobre o VSCode, e ficarei feliz em adicioná-las à lista para ajudar outras pessoas. 🙂