Michel Silva
Michel Silva16/07/2022 05:09
Compartilhe

Utilidades para VSCODE

  • #HTML
  • #JavaScript
  • #CSS

Olá pessoal, gostaria de deixar aqui algumas dicas de VS Code pra quem esta começando ou até pra quem já programa há algum tempo.

Extensões úteis:

Auto Rename Tag, HTML, serve para quando você precisa alterar uma tag tipo usou um H1, mas quer trocar para H2, ao mudar a abertura do H, o fechamento da tag também será modificado.

Live Server, HTML, serve para mostrar todo o seu desenvolvimento em uma página que se atualiza em tempo real, usango a extensão no navegador também é possível usar para TypeScript, PHP, VueJS, entre outras linguagens, basta configurar.

Ative o Live Reload

Actual Server Adress, deve ser o servidor do terminal do VS Code, da linguagem que você está usando, no meu caso estava usando o TypeScript com o Parcel, mas pode ser usado para qualquer outra linguagem.

Live Server Adress, é o servidor localhost seguido da porta do live server no VS Code, é aquela porta que aparece quando você clica em "Go Live"

Assim você poderá usar para qualquer linguagem, basta mudar a porta.

image

Se alguém souber outras extensões úteis, comenta ai em baixo.

Configurações do VS Code:

Pra quem precisar usar Eslint+Prettier vai ter problemas no windows, vai configurar tudo, e mesmo assim o prettier ficará tarjando as coisas como erro, para resolver isso, basta mudar a quebra de linha de CRLF para LF, para mudar essa configuração no VS Code, use o comando "CTRL + ," (Control + virgula), que irá abrir a tela de configurações do VS Code, na caixa de pesquisa digite "CRLF" e altere essa configuração para "\n", que o prettier e o eslint, irão trabalhar juntos sem perturbar.

image

Criando uma pasta .vscode

Se você quiser salvar algum tipo de configuração no seu VS Code, mas não quer que essa configuração se aplique a todos os projetos, mas apenas um projeto especifico, você pode criar uma pasta comm o nome ".vscode" dentro do seu projeto e dentro da pasta ".vscode" criar um arquivo chamado "settings.json", e dentro dele colocar as configurações que deseja pra este projeto, são diversas configurações, basta consultar na documentação do VS Code que irá encontrar inúmeras possibilidades.

image

Inserir quebra de Linha Automaticamente.

Se você não quer que ao programar, o texto fique estourando para fora da tela

image

Aperte "CTRL + , " e pesquise por "Word Wrap" e mude para "ON"

image

E a partir de agora, seu texto sera quebrado automaticamente ao chegar no cando direito do VS Code

image

Adicionar Texto Lorem Ipsum

As vezes queremos inserir um texto aleatório apenas para popular um paragrafo, digitando no VS Code "Lorem30", ele irá gerar um texto com 30 palavras, basta substituir o 30, pelo numero de palavras que você quiser, por exemplo, Lorem10, Lorem 50, Lorem125 e por ai vai.

Bom pessoal as dicas que considero bastante úteis e produtivas são essas ai, certeza que existem muitas outras, se quiserem ir comentando em baixo o que vocês usam e configuram no VS Code de vocês, irá ajudar muitos outros Devs.

Compartilhe
Comentários (1)
Marlon Silva
Marlon Silva - 16/07/2022 09:40

Boa dica