Recomendações de extensões para VSCode
Published: 2021-06-14 23:13:38

## 1 - Themes:

![Theme VSCode](https://code.visualstudio.com/assets/docs/getstarted/themes/themes_hero.gif)

* **Dracula Theme -**
[Saiba Mais](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula)

>

* **Winter is Coming Theme -**
[Saiba Mais] (https://marketplace.visualstudio.com/items?itemName=johnpapa.winteriscoming)

>

> Outros temas disponíveis: https://vscodethemes.com/

***

## 2 - Icon Theme:

![Icon Theme](https://code.visualstudio.com/assets/docs/getstarted/tips-and-tricks/PreviewFileIconThemes.gif)

* **Material Icon Theme -** 
[Saiba Mais](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

>

* **VSCode Icons Team -** 
[Saiba Mais] (https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)

>

***

## 3 - Code formatter:

![Icon Theme](https://user-images.githubusercontent.com/1885333/37237670-0f06fcde-23ed-11e8-9200-4d2089323fe1.gif)

* **Prettier -** 
[Saiba Mais](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

>

* **Beautify -** 
[Saiba Mais] (https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)

>

***

## 4 - Color Highlight:

![Color Highlight](https://raw.githubusercontent.com/kamikillerto/vscode-colorize/master/assets/demo_variables.gif)

Esta extensão estiliza as cores CSS encontradas em seu documento. [Saiba Mais] (https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

***

## 5 - Bracket Pair Colorizer:

![Bracket Pair Colorizer](https://miro.medium.com/max/1380/0*jGSpNUQJPs1FbfZ1.gif)

Esta extensão permite que os colchetes correspondentes sejam identificados com cores. O usuário pode definir quais caracteres combinar e quais cores usar. [Saiba Mais] (https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)

***

## 6 - Live Server:

![Live Server](https://ritwickdey.github.io/vscode-live-server/images/Screenshot/vscode-live-server-explorer-menu-demo-1.gif)

Inicie um servidor de desenvolvimento, seu navegador é atualizado automaticamente sempre que você faz alguma alteração de código. [Saiba Mais] (https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

***

## 7 - Bookmarks:

![Bookmarks](https://i.imgur.com/q6qgz6T.gif)

Viu um erro no seu código mas não irá corrigir nesse momento? Então a extensão Bookmarks pode ser a ideal para você. Ele também ajuda você a navegar em seu código, movendo-se entre posições importantes com facilidade e rapidez. [Saiba Mais] (https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

***

## 8 - Auto Import:

![Auto Import](https://i.stack.imgur.com/OM1vO.gif)

Os imports serão localizados, analisados e irão auto completar a importação que está sendo chamada. [Saiba Mais] (https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)

***

## 9 - Auto Rename Tag:

![Auto Rename Tag](https://user-images.githubusercontent.com/4033249/69178220-07413780-0abe-11ea-8236-161728f26f9b.gif)

Ao renomear uma tag HTML / XML, automaticamente a tag de fechamento será renomeada [Saiba Mais] (https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

***

## 10 - ESLint:

![ESLint](https://user-images.githubusercontent.com/1117182/45520465-26b44480-b7d7-11e8-8d55-97b0770faa21.gif)

Uma ferramenta de análise de código estática para identificar padrões problemáticos encontrados no código JavaScript. [Saiba Mais] (https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

***

## 11 - Javascript (ES6) Code Snippets:

![Javascript (ES6) Code Snippets](https://miro.medium.com/max/3360/1*xWTVzYOzGB__5FLLqx5nZg.gif)

Capaz de fornecer trechos de código JavaScript, TypeScript, Vue, React e HTML de forma prática e simples. [Saiba Mais] (https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

***

## 12 - Visual Studio IntelliCode:

![Visual Studio IntelliCode](https://go.microsoft.com/fwlink/?linkid=2006041)

Esta extensão fornece IntelliSense auxiliado por IA, mostrando itens de conclusão recomendados para o contexto de código. [Saiba Mais] (https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)

***

## 13 - GitLens:

![GitLens](https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/revision-navigation.gif)

Ele ajuda você a visualizar a autoria do código rapidamente por meio de anotações, navegar e explorar repositórios Git, obter insights por meio de comandos de comparação e muito mais. [Saiba Mais] (https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

***

Recomendam alguma outra extensão? Deixe seu comentário