COMO BAIXAR E CONFIGURAR O VISUAL STUDIO CODE PARA INICIANTES
381.7k views3526 WordsCopy TextShare
Dev em Dobro
Nesse vídeo falamos como baixar e instalar o Visual Studio Code, e configurar algumas extensões útei...
Video Transcript:
Olá seja muito bem-vindo muito bem-vinda a mais um vídeo técnico aqui no canal meu nome é Roberto Dias caso não me conhece ainda né eu faço parte do deve em dobro e nesse vídeo aqui eu vou te falar sobre o visto de Cold eu vou te apresentar essa ferramenta que a gente usa bastante para codificar né para escrever código e vou te mostrar algumas coisas bem legais más intenções bem interessante dele explicar um pouquinho também do funcionamento da ferramenta Beleza então bora para o vídeo é [Música] bom caso não saiba o vs code ele é um editor de código ele foi desenvolvido pela Microsoft e ele está disponível tanto para o Windows quanto para Mac quando para Linux e depois a gente vai ver aqui eu vou te mostrar como é que a gente baixa ele e instala ele no Windows beleza mas para os outros sistemas operacionais É bem parecido então não tem mistério o Visconde então ele é um editor de código né com ele a gente consegue criar pó digo em diversas linguagens de programação diferentes mas muito além disso ele tem várias ferramentas para facilitar e nos auxiliar nesse processo de escrever código que seriam as extensões a decoração de código um fim várias funcionalidades aí que vamos dar mais produtividade durante os nossos estudos e também durante o nosso trabalho como programador programador então em resumo ele tem tudo que tu precisa para trabalhar muito massa Beto beleza eu quero usar o vs code como é que eu faço a gente tem duas maneiras de usar o best code tá a primeira instalando ele nosso computador que o que a gente recomenda que tu faça ou a gente também pode usar a versão online dele recentemente eles lançaram essa versão online que é basicamente um editor de código dele só que na internet essa versão online ela muito interessante Caso não queira ou não possa instalar o visual Studio no teu computador tu pode usar ele na internet então é bem legal porém ela é um pouco mais limitado do que a versão Baixada e instalada né então por isso que a gente indica que vocês usem essa versão instalada no computador de vocês mesmo mas a versão online tá aí né para quem quiser usar como uma alternativa BH para usar houvesse code online tem um link que é verso com o último. Deve eu vou abrir aqui junto com vocês para gente dar uma olhada nele toque eu tô com a página inicial do navegador aberta eu vou aqui eu posso digitar sua veste Cold. Deve ele já abre para mim diretamente ou o visto de Cold aqui meu navegador né então para quem conhece o visto de Cold vai ver que é exatamente a mesma interface Ou posso também veio pelo Google aqui né caso você não acha Oi tá vs code deve aí ele vai abrir aqui esse link aqui ó vs oito.
Deve o segundo link aqui da pesquisa né Se eu precisar por vs code deve é o segundo link da pesquisa eu fico aqui ele vai abrir aqui a mesma interface do menu to the cold se eu tivesse na minha máquina beleza e para usar a versão desktop a gente vai ter que entrar no site né de download do viaduto de Coaching então para isso eu posso também vir aqui na busca do Google e digitar vs code download ouves Studio code download também ele vai abrir aqui o primeiro link download visual Studio code Mac Linux Windows é esse aqui ó Cold. Visualstudio. com/download então aqui eu já venho na versão que eu quero do meu sistema operacional né No meu caso é o Windows então eu venho aqui em Windows clique aqui em cima dele e ele já vai baixar e instantaneamente aqui embaixo para mim beleza ela vem aqui vou te dar um abrir aqui nele botão direito né eu vou aceitar aqui uma parte bastante importante sempre que abrir essa telinha aqui de seleção as tarefas adicionais vocês vão adicionar sempre essa adicionar ação abrir com Cold ao menu de contexto de arquivo do Windows Explorer e essa de baixo aqui também acionar a ação de abrir com Cold ao menu de contexto de diretório do Windows Explorer aqui ele já me deu essas quatro por padrão marcada eu deixaria essas quatro meses marcada aí então eu sugiro que você também façam isso se tivesse marcado essas aqui marca em elas O que é bem importante tá eu vou mostrar depois porque próximo instalar ele vai fazer a instalação aqui aí pronto tá instalado aqui finalizou a instalação e ele vai já marcar aqui para mim Iniciar iniciar o visual Studio code eu posso dar um concluir ele vai abrir o Cold para mim já diretamente aqui então eles vão notar aí Aqui tem uma eu já tenho cozimento vai ter uns projetos aqui eu vou fechar tudo para não ficar um se você tivesse abrindo um projeto né do zero Então vou achar aqui o de você vai aparecer exatamente assim só não vai ter esse projeto aqui né se eu consigo tirar ele tirei aqui então ele vai abrir exatamente assim para vocês e eu vou mostrar em as minhas aqui do da interface dele tá bem rapidinho então a primeira coisa que vocês vão notar esse menu aqui em cima lá ter alta clicando no primeiro é onde vai aparecer os arquivos né o explorador de arquivos do projeto que vocês tiverem mexendo aqui embaixo vai ter uma busca de vocês podem buscar por um nome de um arquivo né ou algum conteúdo de um arquivo dentro dos arquivos que estão nesse projeto aqui vai ser um um versionador né que é o ggit mas eu não vou entrar em detalhes sobre isso porque não não é tão interessante agora para vocês e aqui embaixo que é um bem legal que as extensões mas mais para frente eu vou mostrar para vocês algumas extensões legais aí que a gente indica para quem tá iniciando instalar Beleza então eu vou abrir aqui uma pasta assim que eu criei para te mostrar a importância de marcar aqueles dois check Box lá então um daqueles aqueles Xbox vai permitir que vocês façam isso aqui ó clicar com o botão direito em uma pasta e abrir com o Cold Então você quer muito muito útil né porque quando quer abrir um projeto no Cold é muito mais fácil vir aqui que já botou em cima e e com o dele já vai abrir para você diretamente beleza mas aquela opção tem que tá marcada então aquele já vai abrir a pasta como eu falei né No primeiro menu e aqui eu vou poder então criar arquivos que já passar aqui dentro uma coisa interessante que ele já me dá aqui ó uma opção de instalar um pacote de idioma caso os filhos de vocês esteja em inglês isso é bem útil né O meu tá inglês aqui como vocês podem ver então se hoje vocês também tiver vocês podem vir aqui em instalar e iniciar então se eu ficar aqui ó ele já vai instalar uma extensão que eu já vou mostrar para vocês Qual é vai instalar vai reiniciar o meu vs code direto e já vai estar aqui traduzido para mim então aqui entrar nas extensões número de extensões que eu mostrei ali antes e digitar portugues né português em inglês e vai abrir a sensação aquilo e vai procurar umas algumas extensões e a primeira vai ser aquele acabou de estar lá para nós que essa português Brasil language pack for This world could então é basicamente um pacote de linguagem né do idioma a ver português no caso português Brasil e vai estar instalado aqui e traduzir tudo para nós beleza então isso aqui é bem útil caso não tem o inglês tão bom então se ele não apareceu aquela opção Zinho aqui embaixo para ti instalar como eu fiz tu pode vir aqui número de extensões digitar português clicar nesse primeiro ícone e vai ter um botão aqui em instalar né No meu caso aqui tá desinstalar porque ele já instalou no teu caso aí vai estar instalar tu instala reinicia o verso Cold passou a fechar o excesso aqui também e abrir de novo aqui ele com code e ele já vai estar traduzido uma extenção bem legal que já vem no Cold também que nos ajuda bastante é o emmett tá o emite uma extensão que nos dá muita produtividade porque ele nos ajuda a completar código tá então vou dar um exemplo aqui aqui no menu lateral eu posso clicar com o botão direito nele e adicionar um novo arquivo ou uma nova pasta e aqui em cima também eu posso fazer essas mesmas ações esse aqui é o botão de novo arquivo e esse é o botão de Nova Pasta procurar um arquivo vou chamar de index.
hr ML e quando a gente quer criar um lindo aqui novo né O HTML não o que a gente tem que geralmente criar Todas aquelas tags que a gente já sabe né boca ml até que demore a tag de rede então é meio maçante a gente fazer isso manualmente toda vez né então o Emerson nos ajuda nisso a gente simplesmente digitar exclamação ele vai nos dar duas opções aqui onde novo há duas opções aqui a primeira vai ser essa aqui que é basicamente ele vai completar o HTML todo para nós então você adicionar ela ele já completa para nós aqui o HTML doctype o head então eu já cria uma estrutura inicial para nós muito fácil muito mais facilmente do que a gente tem que digitar isso aqui né Toda vez outra maneira de fazer é digitando HTML 2.