Configurações do VSCode – Dicas Importantes

Siga algumas dicas para trabalhar com vscode

Temas

Dracula

Muda toda a coloração das fontes e também o vscode, um tema mais escuro e muito interessante.

Extensões:

FiraCode

Extensão para transforçar caracteres em formas geométricas. Basta pesquisar no gogole, baixar e instalar as fontes.
Depois acesse as configurações com o comando Ctrl + Shift + P, digite settings e selecione a opção de configuraçõe do usuário em formato json.

Adicione a seguinte configuração:

"editor.fontFamily": "Fira Code", -> Adicona as fonte
"editor.fontLigatures" : true, -> Ativa o recurso de substituir caracteres por símbolos.

Talez seja necessário reiniciar o vscode.

vscode-icons

Adiciona na sidebar o ícone representando a extensão do arquivo, ficando muito mais fácil de identicar nossos arquivos no projeto.
Para instalar basta acessar “View -> Extensios” ou Ctrl + Shift + x, pesquise por vscode-icons identifique e instale.

Color Highlight

vscode-ext-color-highlight
Essa extensão possibilita que quando uma cor for digitada em hexadecimal ou rgba o texto digitado aparece circulado com a cor correspondente.

EditorConfig for VS Code

Permite confiugrar o editor entre todos os desenvolvedores do time, vai padronizar para todos.

ESLint

Garante que mantenha padrões dentro do projeto, aspas simples, aspas duplas, nomes de variável, nomes de funções etc.

Prettier – Code formatter

Garante com que as regras do ESLint seja aplicada de forma automática. É indicado a configuração editor “.formatOnSave” estar ativa.
Assim que salvar o prettier pega as regras que definimos no ESLint, ex: não quero que ninguém utilize aspas simples, somente aspas duplas. E pode criar várias outras regras.

Configurações

Fonte:

"editor.fontFamily" : "Nome da Fonte", -> Fonte desejada.
"editor.fontLigatures" : true, -> Transformar caractéres em símbolos (a fonte precisa oferecer esse recurso)
"editor.fontSize": 18, -> Tamanho da Fonte
"editor.lineHeight" : 24, -> Altura de Linha
"editor.formatOnSave" : true, -> Formatar e identar o arquivo de acordo com os padrões de código (eslint garante o padrão)
"editor.rulers" : [80,120] -> Indica o número de colunas limite do arquivo, pode passar de 80, mas não pode passar de 120.
"editor.renderLineHighlight" : "gutter", -> Indica a linha corrente na barra lateral apenas circulando o número e não selecionando a linha toda.
"terminal.integrated.fontSize" : 14, -> Tamanho da fonte do terminal integrado no vscode.
"emmet.syntaxProfiles": {
 "javascript": "jsx" -> Cria o recurso de geração de código também para arquivos javascript. Ex: div.teste, cria-se <div id="teste"></div>
}
"emmet.includeLanguages" : {
 "javascript" : "javascriptreact" -> Dentro do react existem palavras reservadas como class, portanto não posso escrever html e essa configuração nos permite escrever e depois substitui por className.
}
"javascript.updateImportOnFileMove.enabled" : "never", -> Previne que o editor altere os importes automaticamente quando movermos um arquivo, as vezes acaba atrapalhando o desenvolvimento.
"breadcrumbs.enabled" : true, -> Exibe no topo do editor o caminho do arquivo corrente.
"editor.parameterHints.enabled" : false, -> Evita que exiba a documentação automaticamente, com muito conteúdo.