VS Code – Dicas

O Visual Studio Code é uma IDE que dispensa apresentações, vamos direto a algumas dicas.

Download:

https://code.visualstudio.com/download

Temas e Icons (Extensões):

Dracula Official (File > Preferences > Color Theme)

vscode-icons ou Material Icon Themes (File > Preferences > File Icon Theme)

Font Ligatures

FireCode – Download: https://github.com/tonsky/FiraCode

Copiar os ttfs para o catalogo de fontes.

Ctrl + Shift + P (Preferences) > Pesquisar: Open Settings (JSON)

Incluir no JSON:

“editor.fontFamily”: “Fira Code”,
“editor.fontLigatures”: true

Configurações Gerais

editor.formatOnSave = Ao salvar um arquivo, já formata e faz a identação no padrão estabelecido.
editor.rulers: [80, 120] = Define um espaçamento horizontal. 80 colunas no ideal e 120 o maximo. Valores configuráveis.
editor.tabSize = Quantidade padrão de espaçamento por TABs.
editor.renderLineHighlight: “gutter” = Ao invés de marcar toda a linha que estamos escrevendo, marca apenas o número da linha.
terminal.integrated.fontSize: 14 = Tamanho da fonte no terminal integrado.

Como está o JSON até o momento:

{    
“window.zoomLevel”: 0,    
“workbench.colorTheme”: “Dracula”,    
“workbench.iconTheme”: “material-icon-theme”,    
“editor.fontFamily”: “Fira Code”,    
“editor.fontLigatures”: true,    
“editor.fontSize”: 20,    
“editor.lineHeight”: 24,    
“editor.formatOnSave”: true,    
“editor.rulers”: [ 80,  120 ],    
“editor.tabSize”: 2,    
“editor.renderLineHighlight”: “gutter”,    
“terminal.integrated.fontSize”: 14,    
“emmet.syntaxProfiles”: { “javascript”: “jsx” },    
“emmet.includeLanguages”: { “javascript”: “javascriptreact” },    
“javascript.updateImportsOnFileMove.enabled”: “never”,    
“breadcrumbs.enabled”: true,    
“editor.parameterHints.enabled”: false
}

Plugins:

Color Highlight – Plugin para ter uma prévia das cores hexadecimais escritas no código.
EditorConfig for VS Code – Ferramenta para configurar o editor entre todos da equipe padronizando as configurações a todos.
ESLint – Ferramenta que garante diversos padrões no projeto.
Prettier Code formatter – Garante que as regras do ESLint vão ser aplicadas de forma automática ao salvar o código. [Exige config no settings.json – prettier.esLintIntegration: true]

Atalhos Legais:

Ctrl + ‘ (apostrofo) = abre o terminal integrado.
Shift + Alt + A = Comentário de múltiplas linhas.