Desenvolvimento Web (Front-End) > Conteúdo > Ambiente de Desenvolvimento

# Microsoft Visual Studio Code (VS Code) __Prof. Eduardo Ono__

 

Instalação

Windows

• Site do desenvolvedor: https://code.visualstudio.com

• Vídeos Recomendados

  Thumb	Descrição
  	[Carreira Desenvolvedor] Instalando e Configurando Visual Studio Code (VSCode) para HTML, CSS e JAVASCRIPT (56:05, YouTube, Abr/2022)
  	[Web Dev Simplified] How I Setup And Customize VSCode (10:20, YouTube, Mai/2021)
  	[freeCodeCamp.org] Visual Studio Code Crash Course (1:32:34, YouTube, Set/2020)

Ubuntu 22.04 LTS

• No Terminal, digitar:

  sudo snap install code --classic
  

Configurações Recomendadas

Comando	Chave: Valor (settings.json)	Descrição
Editor: Linked Editing	"editor.linkedEditing": true	Auto renomeação de tags.
Editor: Mouse Wheel Zoom	"editor.mouseWheelZoom": true	Habilita o zoom via Ctrl+rolete do mouse
Editor: Wrapping Indent	"editor.wrappingIndent": "deepIndent"	Espaçamento do “wrapping”
Terminal › Integrated: Smooth Scrolling	"terminal.integrated.smoothScrolling": true

 

Vídeos Recomendados

Thumb	Descrição
	[ForrestKnight] My Visual Studio Code Setup for Web Development (15:21, YouTube, Jul/2022)

 

Extensões

• [Ritwick Dey] Live Server

Thumb	Descrição
	[Código Fonte TV] 23 Extensões do VS Code para 2020 // Mão no Código #25 (15:44, YouTube, Dez/2019)
	[João Bibiano] 20 Extensões para o VSCODE que Você PRECISA Instalar se é Front-end (24:32, YouTube, Jan/2022)

Backup e Recuperação de Extensões do VS Code

Windows: %USERPROFILE%\.vscode\extensions
Linux: ~/.vscode/extensions
Mac: ~/.vscode/extensions

code --list-extensions > vsc-extensions.txt

• Restaurar (Windows PowerShell)

cat vsc-extensions.txt | % { "code --install-extension $_" }

ou

code --list-extensions | % { "code --install-extension $_" }

• Restaurar (Linux)

cat vsc-extensions.txt | xargs -L 1 code --install-extension

Dicas de Utilização

Dicas Gerais

Thumb	Descrição
	[Dev em Dobro] COMO BAIXAR E CONFIGURAR O VISUAL STUDIO CODE PARA INICIANTES (17:02, YouTube, Jan/2022)

Emmet Abbreviations

Thumb	Descrição
	[Código Fonte TV] O Segredo de Como Escrever HTML 50% Mais Rápido no VS Code // Mão no Código #45 (7:56, YouTube, Fev/2021)