DEV Community

C.Junior
C.Junior

Posted on

Meu VS Code

Alt Text

O Visual Studio Code é meu principal editor de código, uso ele para escrever meus projetos Javascript,
para estudar Python, para editar arquivos de configurações, mockar arquivos JSON. Basicamente para tudo que envolve
qualquer tipo de edição, visualização ou criação de arquivos que contenham caracteres.

Como ele está a quase todo tempo aberto na minha máquina, o tempo gasto em aprender a usá-lo e customizar para
minhas necessidades, é um tempo bem investido.

Portanto, como já fiz esse investimento, vou compartilhar minhas configurações
que eu considero ideais pras minhas necessidades.

Configurações Globais

Para começar, eu utilizo a fonte Fira Code, considero ela de boa legibilidade, além de ser possível o uso das
fonts ligatures, o que, em alguns caso, deixa o código mais agradável ao olhos:

{
  "editor.fontFamily": "'Fira Code', 'Operator Mono', 'iA Writer Duospace', 'Source Code Pro', Menlo, Monaco, monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 16,
  "editor.lineHeight": 23,
  "editor.lineNumbers": "on"
}
Enter fullscreen mode Exit fullscreen mode

Você ja deve ter utilizado bastante o minimap, principalmente como um auxílio na navegação dentro do arquivo, porém, por padrão, ele tenta renderizar todos os caracteres do arquivo, coisa que não é
necessário devido ao tamanho diminuto do, como o nome já diz, minimap, por isso eu deixo desativado
a renderização das letras, não faz muita diferença na economia de processamento, mas...

{
  "editor.minimap.renderCharacters": false,
  "editor.minimap.maxColumn": 200,
  "editor.minimap.showSlider": "always"
}
Enter fullscreen mode Exit fullscreen mode

Outro recurso de grande auxílio na navegação em um projeto é a arvore de pastas. Porém, depois
de ficar diversas vezes meio perdido em meio aos níves de pastas abertos, encontrei uma configuração
que acredito que diminui o caos criado pelo folder level hell:

{
  "workbench.editor.highlightModifiedTabs": true,
  "workbench.tree.indent": 15,
  "workbench.tree.renderIndentGuides": "always"
}
Enter fullscreen mode Exit fullscreen mode

Uma configuração que considero um tanto quanto importante, outra vez visando
auxiliar quando se trabalhar com diversos arquivos, é alterar o titulo padrão
da janela para mostrar o caminho completo do arquivo em foco, pode parecer
bobeira, mas ajuda:

{
  "window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}"
}
Enter fullscreen mode Exit fullscreen mode

Como hoje em dia praticamente todos os projetos com quais eu trabalho possuem
suas dependências gerenciadas pelo NPM, e como geralmente essas dependências
possuem suas próprias dependências, e por assim em diante, gosto de deixar
a pasta node_modules, não só invisível na árvore estrutural do projeto no
VS Code, como não permitir que se realize buscas dentro dessa pasta, o que
acaba deixando deixando as busca dentro de todo projeto mais rápidas:

{
  "search.exclude": {
    "**/node_modules": true,
    "**/env": true,
    "**/venv": true
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true
  },
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/.vscode": true,
    "**/__pycache__": true,
    "**/.pytest_cache": true,
    "**/node_modules": true
  }
}
Enter fullscreen mode Exit fullscreen mode

Extensões que considero essenciais

Prettier

O Prettier é uma importante extensão para formatação e padronização
de códigos.

Ele permite definir configurações globais do VS Code, ou até mesmo uma configuração
específica por projeto, usando o arquivo .prettiierrc ou prettier.json
, geralmente localizados na raiz do projeto.

Como configuração global, voltada principalmente à códigos javascript,
acho ideal deixar algo próximo de:

{
  "prettier.arrowParens": "always",
  "prettier.eslintIntegration": true,
  "prettier.jsxBracketSameLine": true,
  "prettier.jsxSingleQuote": true,
  "prettier.printWidth": 120,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  "prettier.semi": false,
  "prettier.tslintIntegration": true,
  "prettier.trailingComma": "all"
}
Enter fullscreen mode Exit fullscreen mode

Uma outra extensão, que considero de grande ajuda, principalmente para escrever
frases ou textos, é a Code Spell Checker, que nada mais é que um corretor
ortográfico direto no seu VS Code.

Por padrão ele vem apenas a ortografia English U.S., mas pode extender
instalando outras extensões de outras linguagens, como por exemplo
a do Português do Brasil, com a Brazilian Portuguese - Code Spell Checker

{
  "cSpell.language": "en,pt,pt_BR"
}
Enter fullscreen mode Exit fullscreen mode

Bookmarks

Essa extensão nos permite marcar diferentes linhas em diferentes arquivos em um mesmo projeto, além de disponibilizar, via uma nova opção na activity bar, uma forma extremamente fácil de navegar entre os diversos bookmarks criados.

É uma excêlente opção quando você precisar navegar entre pontos importantes no código da aplicação.

ident-rainbow

Apenas uma extensão para ajudar aqueles que já ficaram perdidos em meios aos mares de chaves, colchetes e parenteses, o ident-rainbow lhe auxilia adicionando cores nas identações dos arquivos.

GitLens

O GitLens é uma ferramente que da super poderes ao versionador Git já embutido no VS Code.

Ele torna mais fácil navegar pelo histórico do arquivo, mostra quando foi a ultima alteração realizada na linha que está em foco, além de outros auxílios muito bem vindos relacionados há versionamento de código.

Dracula

Esse é um dos temas que achei mais agradáveis para se trabalhar no dia a dia. Ele traz o conceito de dark theme bem sutil, e ainda deixa todos os itens da interface nativa do VS Code muito bem visíveis, coisa que não acontece com alguns outros temas dark.

Top comments (1)

Collapse
 
alexcardoso profile image
alex-cardoso

Muito bom, algumas dessas configs ainda não conhecia e são bem úteis.