0

Dicas de VS code

Alex Gross
Alex Gross

Dica #1 — Beautify

Beautify é uma das extensões mais conhecidas por todos os desenvolvedores aqui. Pois ele de fato faz o seu papel, que é: identar o seu código: HTML, CSS, Sass, JavaScript e JSON visado deixar os códigos dentro do padrão de formatação e de maneira legível para todos nós.


Dica #2 — BookMarks

Essa dica é nova para muitos. Pois muitos desconhecem dessa incrível extensão disponível para o Vs Code.


Sabe quando você precisa marcar uma determinada linha de código ou até mesmo várias delas e não sabe como vai fazer?

A intenção do BookMarks é justamente essa! Auxiliar vocÊ quando precisar marcar alguma ou várias linhas de código que você precise lembrar para alterar ou fazer algo.


Dica #3 — Color HightLight

Color Highlight é excelente para quem trabalha com Css & Sass. Por que? Pois ele auxilia você em mostrar as cores que você estará criando num determinado arquivo .css


Ajuda bastante e é de grande varia para quem é Front-end!


Dica #4 — Dracula Official

Tema é algo que todo mundo gosta de alterar na IDE e colocar de acordo a sua cara. E um dos temas mais baixados para quem usa o Vs Code é o Dracula.

Ele vem com várias cores e temas que você pode alterar de acordo com o seu gosto. Eu já usei muito o tema Dracula Dark (como da imagem abaixo). Mas, na próxima dica mencionarei um outro tema que tenho usado e curtido bastante! 😊

Caso desejam experimentar o tema Dracula, bastam clicar no link abaixo:

Dracula Official - Visual Studio Marketplace


Dica #5 — Winter is Coming

Depois do tema Dracula Dark, eu particulamente me apaixonei por o tema Winter is Coming. Não por causa do seriado Game of Thrones. Mas, pelas cores e a disponibilidade de paletas bem interessantes para esse tema, que ao meu ver, são simplesmente lindas! 😍

Um ponto importante a mencionar sobre esse tema é que ele foi criado pelo grande John Papa — um dos maiores evangelistas de JavaScript e Angular!

Caso desejam experimentar esse tema incrível, bastam baixar e instalar a extensão no link abaixo:

Dica #6 — Git History

Para aqueles que gostam de uma integração de 3d party em suas IDE’s, de fato, possuir o Git History instalado no seu Vs Code será uma das melhores escolhas que você terá.


Ele te permite ter uma visão, em tempo real, se um determinado código que você está trabalhado já foi comitado ou ‘pusheado’ por outra pessoa.

E o mais interessante é que você consegue acompanhar o histórico de quem foi a última pessoa que realizou a alteração do código! Sem contar que, você pode de uma maneira muito mais prática e tranquila realizar o merge!

Deem uma olhada nesse gif abaixo para que vocês possam observar o quão legal é essa extensão:

É uma daquelas extensões que são praticamente ‘obrigatórias’ possuir no seu Vs Code. Assim sendo, super indico o Git History. Se desejarem experimentar, já disponibilizei a vocês o link abaixo:


Dica #7 — Git Lens

A dica 7 acaba sendo um complemento da dica 6. Uma vez que o papel do Git Lens tem como objetivo auxiliar o desenvolvedor(a) a verificar quem alterou o determinado arquivo ou até mesmo uma determinada linha no git.


O exemplo abaixo, mostra justamente como funciona o Git Lens:

Uma vez instalado o Git History no seu Vs Code, recomendo baixar também o Git Lens. Abaixo segue o link do plugin:



Dica #8 — Guides

Guides é uma extensão que vai te auxiliar para saber se de fato o seu código está devidamente identado. Mas, como?


Ele cria uma espécie de linhas imaginárias. Por exemplo, ele verificará se você está fechando um ‘if’/’else’.

A imagem abaixo mostra como funciona e também é uma extensão que todo desenvolvedor(a) devem instalar no seu Vs Code.

Abaixo segue o link da extensão Guides:

Guides - Visual Studio Marketplace

Get it now.

bit.ly


Dica #9 — Live Server

Essa extensão, depois que você baixar ela, não vai querer saber de outra coisa! Mas, por quê?


Imagine o seguinte cenário: você está desenvolvendo uma página estática, onde tem: index.html, css e javascript. Geralmente o que a gente faz para poder ver em tempo real se o que a gente está codificando está de acordo? Vamos até a pasta do projeto, clicamos com o botão direito em cima do index.html e envia para o browser.

Bom… com o Live Server, você não precisará mais fazer isso! E é sensacional o poder que ele tem.

Vou deixar que o gif mostrem a vocês do que ele é capaz: 😎



Dica #10 — Path Intellisense

Quem nunca, teve a dificuldade, principalmente para quem é desenvolvedor JavaScript ou Front-End, quando você trabalha num projeto com inúmeras pastas e precisa fazer um ‘require’ daquele arquivo que está abaixo ou acima de várias pastas? E para piorar, você não consegue chegar no path correto daquele arquivo?


Quero dizer que os seus problemas em relação isso acabaram. Conheçam: Path Intellisense. Ele te auxilia justamente nessa parte: em encontrar de uma maneira rápida e dinâmica a path de um determinado arquivo que você precise referenciar.


Meus agradecimentos ao site


https://medium.com/womakerscode/15-dicas-para-turbinar-o-seu-vs-code-e11c75b10dc5



0
2

Comentários (4)

0
Leandro Carvalho

Leandro Carvalho

10/08/2021 07:16

São extensões excelentes e que facilita muito o nosso dia a dia como desenvolver.

1
Call Seven

Call Seven

09/08/2021 20:40

Excelente!

3
Jailma Silva

Jailma Silva

09/08/2021 20:24

Ótimas dicas, obrigada por compartilhar!

1
G

Geovane Jorge

09/08/2021 20:15

Excelente post meu amigo. Só dicas feras.

Front-end em busca de uma oportunidade

Brasil