VSCode é um editor de texto free desenvolvido pela Microsoft. Neste editor podemos instalar e desenvolver diversos plugins para facilitar o desenvolvimento de sistemas em diversas linguagens. Atualmente eu utilizo o VSCode para trabalhar com JavaScript. Vale dar uma olhada nesse tópico JavaScript in Visual Studio Code onde temos diversas dicas de como melhorar o seu editor para trabalhar com JS.
No meu dotfiles eu guardo essa lista de plugins e neste artigo vou detalhar melhor o que cada um deles faz. Vamos a minha lista de plugins:
- nathanchapman.JavaScriptSnippets
- oderwat.indent-rainbow
- CoenraadS.bracket-pair-colorizer
- EQuimper.react-native-react-redux
- TimonVS.ReactSnippetsStandard
- wayou.vscode-todo-highlight
- minhthai.vscode-todo-parser
- wix.vscode-import-cost
- humao.rest-client
- formulahendry.auto-close-tag
- formulahendry.auto-rename-tag
- eamodio.gitlens
- alefragnani.project-manager
- emmanuelbeziat.vscode-great-icons
- SirTori.indenticator
- wakatime
- Orta.vscode-jest
- msjsdiag.debugger-for-chrome
- MS-vsliveshare.vsliveshare
- cssho.vscode-svgviewer
Segue o resumo do que cada um desses plugins e veja como eles podem facilitar o seu dia a dia.
JavaScript Snippets
Plugin: https://marketplace.visualstudio.com/items?itemName=nathanchapman.JavaScriptSnippets
Como nome sugere, são trechos de códigos utilizados no Visual Studio para agilizar o desenvolvimento de código.
Indent-Rainbow
Plugin: https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
Uma extensão simples para tornar a indentação do seu código mais legível criando linhas com cores para cada nível.
Bracket Pair Colorizer
Plugin: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
Essa extensão permite que os colchetes correspondentes sejam identificados com cores. O usuário pode definir quais caracteres corresponder e quais cores usar.
React-Native/React/Redux snippets for es6/es7 version Standard
Mais um snippet mas focado em React, React Native, Redux e padrões do ES6/ES7.
TODO Highlight
Plugin: https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
Para dar um highlight em algumas marcações dos comentários como TODO, FIXME e outras anotações em seu código.
TODO Parser
Plugin: https://marketplace.visualstudio.com/items?itemName=minhthai.vscode-todo-parser
Analisa todos os TODO marcados em seu código.
Import Cost
Plugin: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
Exibe o tamanho dos módulos que você está importando para o seu código em JS.
REST Client
Plugin: https://marketplace.visualstudio.com/items?itemName=humao.rest-client
Faça requests direto do VSCode e veja as respostas de cada requisição.
Auto Close Tag
Plugin: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Auto Rename Tag
Plugin: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
GitLens
Plugin: https://github.com/eamodio/vscode-gitlens
Este é um dos meus prediletos! Facilita muito a utilização do git principalmente para fazer diffs e analisar o histórico.
Project Manager
Plugin: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
Gerencia projetos no VSCode.
VSCode Great Icons
Plugin: https://marketplace.visualstudio.com/items?itemName=emmanuelbeziat.vscode-great-icons
Pacote de icones para o VSCode.
Indenticator
Plugin: https://marketplace.visualstudio.com/items?itemName=SirTori.indenticator
Facilita a visualização do bloco de código que está identado.
WakaTime
Plugin: https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime
Gera métricas e reports automaticamente conforme você for programando no VSCode.
Jest
Plugin: https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest
Complemento para Jest no VSCode, com linter, autocompletes e status do test que você esta escrevendo.
Debugger for Chrome
Plugin: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Debugger no VSCode como acontece no console do Chrome. Você precisa instalar o Chrome DevTools Protocol no seu Chrome. Além disso você precisa realizar uma configuração no seu VSCode. Neste caso eu tenho um exemplo aqui. Abaixo segue o passo a passo:
#entrar no diretorio do seu projeto
mkdir .vscode/
cd .vscode
echo -e '{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
},
{
"name": "Chrome Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"url": "http://localhost:3000"
}
]
}' > launch.json
VS Live Share
Plugin: https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
Muito útil para fazer pair programing remoto!!!! Ele compartilha a sessão do seu projeto no VSCode dando acesso ao código em si e ao terminal.
SVG Viewer
Plugin: https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer
Renderizar o arquivo .svg como se fosse uma imagem.
Atualmente são estes os plugins que eu estou utilizando. Grande abraço!