Artigo original: How to set up VSCode to improve your productivity

Escrito por: Chiamaka Ikeanyi

Os editores de código evoluíram com o passar dos anos. Há alguns anos, não havia o Visual Studio Code (VS Code). Na época, provavelmente, você usava o Sublime Text, o Atom, o Brackets etc. Porém, com o lançamento do VS Code, ele se tornou o editor de código favorito da maioria dos desenvolvedores.

Por que usar o VS Code?

Os desenvolvedores preferem o VS Code porque:

  • É personalizável
  • Torna fácil a depuração
  • Emmet
  • Extensões
  • Integração com o Git
  • Terminal integrado
  • Intellisense
  • Temas e mais…

Agora que você viu as vantagens de usar o VS Code, este artigo tratará da configuração do VS Code e das extensões necessárias ao usar o VS Code para se ter o máximo de produtividade.

Terminal

No Mac, você pode configurar seu terminal para que use o iTerm2 e o ZSh e fazer com que o VS Code o utilize também.

Após configurar o Zsh, abra o terminal integrado do VS Code Terminal > New Terminal e execute o comando

source ~/.zshrc

ou

. ~/.zshrc

para rodar o conteúdo do arquivo de configuração .zshrc no shell.

Fonte

FiraCode parece interessante por causa do suporte a ligaduras de texto. Baixe e instale a fonte FiraCode, e adicione-a ao seu arquivo settings.json.

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

Abrindo pela linha de comando

Abrir o VS Code a partir do terminal parece interessante. Para fazer isso, pressione CMD + SHIFT + P (no Mac), digite shell command e selecione Install code command in path (Instalar o comando do VS Code no path). Depois disso, navegue até qualquer projeto a partir do terminal e digite code . no diretório para abrir o projeto usando o VS Code.

Configuração

As configurações do VS Code que não são específicas de um espaço de trabalho estão no arquivo settings.json. Você pode configurar o VS Code para se ajustar às suas preferências.

Para abrir o arquivo settings.json, pressione

CMD ou Ctrl + ,

Copie e cole o código abaixo no arquivo settings.json:

{    "editor.multiCursorModifier": "ctrlCmd",    "editor.formatOnPaste": true,    "editor.wordWrap": "bounded",    "editor.trimAutoWhitespace": true,    "editor.fontFamily": "Fira Code",    "editor.fontLigatures": true,    "editor.fontSize": 14,    "editor.formatOnSave": true,    "files.autoSave": "onFocusChange",    "emmet.syntaxProfiles": {        "javascript": "jsx"    },    "eslint.autoFixOnSave": true,    "eslint.validate": [        "javascript",        "javascriptreact"    ],    "javascript.validate.enable": true,    "git.enableSmartCommit": true,    "files.trimTrailingWhitespace": true,    "editor.tabSize": 2,    "gitlens.historyExplorer.enabled": true,    "diffEditor.ignoreTrimWhitespace": false,    "workbench.sideBar.location": "right",    "explorer.confirmDelete": false,    "javascript.updateImportsOnFileMove.enabled": "always",}

Extensões

Abaixo temos algumas extensões úteis que podem melhorar sua experiência de desenvolvimento ao trabalhar com uma base de código.

Para acessar essas extensões,

  • Vá para View -> Extensions
  • Procure por extensões no Marketplace
  • Clique em Install

1. Auto Import

Com essa extensão, você não precisará importar arquivos manualmente. Se estiver trabalhando com um projeto baseado em componentes, basta digitar o nome do componente e ele será importado automaticamente.

d88RTDvyIzGWYC5BuLcnIaFOjHiyDMaqE5Bh

2. Add jsdoc comments

Essa extensão adiciona blocos de comentário ao código. Para usá-la, realce a primeira linha da função, pressione CMD/Ctrl + SHIFT + P e selecione Add Doc Comments (Adicionar comentários aos documentos).

jlJk05MHt3HknnqZyKQB-8d1Oj7qgh7ZOBGL

3. ESDoc MDN

Em alguns cenários, podemos esquecer como algumas coisas funcionam. É nesse caso que a extensão a seguir se torna útil. Não é preciso abrir seu navegador para encontrar a sintaxe. Basta digitar

//mdn [objeto].[método];
r8pUHOgNQwAyNq0DU9VPcL5xb8zGgT1ybCZV

4. CSS Peek

Como o próprio nome sugere, essa extensão ajuda você a conferir as regras aplicadas ao estilo definido na base de código e sua especificidade. Ela é útil quando trabalhamos com bases de código legadas.

7orGFqwr8mdQPOVPuQVMTlRO8XtPgnR0Ggmj

5. GitLens

A extensão GitLens aumenta o que você pode conseguir com o Git. Ela ajuda você a fazer muito mais, como explorar os repositórios do Git sem interrupções, dar uma olhada nas revisões de código, autoria e muito mais.

Sf2hWdpXSF7CPBhmQ9sTf9zGPD-OiXQsf2aM

6. ESLint

Essa extensão integra o ESLint no VS Code para usar o lint em seus códigos. O projeto no qual você está trabalhando precisa ter o ESLint instalado localmente o globalmente para aproveitar os recursos que essa extensão oferece.

Para instalar o ESLint localmente, execute

npm install eslint

ou instale-o globalmente usando

npm install -g eslint

Você também precisa criar o arquivo de configuração .eslintrc. Se você instalou o ESLint localmente, execute

./node_modules/.bin/eslint --init

ou

eslint --init

para a instalação global.

7. Debugger for Chrome

Essa extensão permite que você faça a depuração de seu código em JavaScript diretamente no navegador do Google Chrome.

O4SSLTXtEEdU3AjZODIdUKG7AYao27y6O7jq

8. Google Fonts

Adicionar as fontes do Google é mais fácil com essa extensão. Você não precisa mais procurar pelas fontes com o navegador. Para acessar uma lista de fontes, pressione CMD/Ctrl + SHIFT + P e procure por Google fonts para continuar.

sqVCRBo5mlEUjIFcSsp28oEo4ugo3LMXjKoS

9. TODO Highlight

Com tanto trabalho naquilo que precisa ser priorizado, às vezes, tendemos a esquecer tarefas que ainda precisam se concluídas. A extensão TODO Highlight torna mais fácil vê-las ao destacá-las.

10. Docker

Você pode criar Dockerfiles na hora com essa extensão. Ela também fornece realce de sintaxe, intellisense e muito mais.

Pressione CMD/Ctrl + SHIFT + P e procure por Add Docker files to workspace (Adicionar arquivos do Docker ao espaço de trabalho).

Yv09L4W8lraVLXLr-aYpCHz8hfLC-tuORELa-1

11. Code Spellchecker

Essa extensão é útil na identificação de erros tipográficos dentro da base de código.

12. Import Cost

Import Cost mostra o impacto de pacotes importados dentro do código. Ela ajuda a medir gargalos de desempenho.

4Xl2OdUzPmPFW54eqzrHz59Kg9qSFbCDxUWf

13. HTMLHint

Essa extensão valida seu HTML ajudando você a escrever código em conformidade com os padrões.

ZJN4LadCSa6e1EVHlEMs7gB1f4AVINChBxaY

14. Peacock

Essa extensão dá a você a capacidade de alterar a cor de seu espaço de trabalho. Ela é ideal para quando você têm diversas instâncias do VS Code e quer identificar rapidamente uma instância específica.

BRiUh7NQh1PdVW7aP5mZJcnbzZFaCQcblYpq

Após instalar o Peacock, clique no ícone das configurações, vá para elas, selecione a guia das configurações do espaço de trabalho, clique em {} e cole o código abaixo.

{    "workbench.colorCustomizations": {        "activityBar.background": "#e90b8d",        "activityBar.foreground": "#fff",        "activityBar.inactiveForeground": "#b5b5b5",    },    "peacock.affectedElements": [        "activityBar",    ]}

Você também pode adicionar titleBar e statusBar aos affectedElements e adicionar personalizações de cor para as barras de títulos e de status dentro da seção colorCustomizations.

Para usar uma das cores padrão, pressione CMD/Ctrl + SHIFT + P, digite peacock e selecione seu tema favorita. Isso sobrescreve as configurações de cor dentro do arquivo settings.json definidas para aquele espaço de trabalho.

15. Prettier

Você sempre pressiona a barra de espaço ou a tecla Tab ao programar? O Prettier pode ajudar você. Ele formata as linhas de código e as torna mais legíveis.

Confira as coisas incríveis que você pode fazer com o Visual Studio Code aqui (em inglês).

Fique à vontade para deixar um comentário sobre o que dá certo para você e compartilhe este artigo.

Você também pode conferir o blog do autor para ver mais de seus artigos.