Configurar VSCode para JavaScript

Lista de plugins para trabalhar no Visual Studio Code.

Posted by Raffael Tancman on November 19, 2018

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

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

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

Plugin: https://marketplace.visualstudio.com/items?itemName=EQuimper.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

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

TODO Parser

Analisa todos os TODO marcados em seu código.

Import Cost

Plugin: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

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 Close Tag

Auto Rename Tag

Plugin: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Auto Rename Tag

GitLens

Plugin: https://github.com/eamodio/vscode-gitlens

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

VSCode Great Icons

Pacote de icones para o VSCode.

Indenticator

Plugin: https://marketplace.visualstudio.com/items?itemName=SirTori.indenticator

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

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

SVG Viewer

Renderizar o arquivo .svg como se fosse uma imagem.

Atualmente são estes os plugins que eu estou utilizando. Grande abraço!