Configurando VSCode para Node.js, ReactJS e React Native | Diego Fernandes

falar de beleza hoje eu vou mostrar pra você na prática como que eu configurei todo o meio ambiente de desenvolvimento na parte do vs code eu vou deixar também o link no comentário desse vídeo na descrição que eu mostro como configura o meu terminal que é toda parte do tema que utilizo os plugins que eu utilizo ou mais sh eu também utiliza que é bem legal mas hoje eu vou focar no verso como mostrar os níveis que estou utilizando os plugins a os atalhos de código que estou utilizando os atalhos de tecla é pra fazer

as coisas que eu faço então eu basicamente creio que o usuário gaste no meu mac só pra ele vir com as coisas desconfiguradas então esse é exatamente o vs couture como ele vem pode ser no futebol não tem problema deixou fechar isso aqui esse é basicamente o vasco como ele vem quando a gente instalar ele deixou dar um zoom aqui dentro e agora vou fazer todo o passo-a-passo para se configurar estivesse com o do zero como se fosse o meu vestcon de beleza então a primeira coisa eu já tive esse show é o como peixes

onde startup eu não gosto dessa welcome peixe eu prefiro que ele inicie um arquivo anton a beleza e agora a primeira coisa que vou fazer que é o meu tema que utiliza praticamente em tudo que eu faço eu tenho linux em casa então utiliza o draco no caso que é o tema que utiliza eu utilizo ele do gnomo então todas as minhas janelas ela tem um sistema do drácula utiliza o terminal tivesse outro se eu pudesse votar um tema cara no meu carro gostaria pintado de drácula porque é um tema que me adaptei ao tema

que mais utiliza desde que eu cheguei programador mais tempo assim então eu vou começar vendo aqui nas extensões do veículo e vou procurar por drácula tac draco oficial eu não estou e agora pronto já aplicou o tema eu gosto de aplicar esse draco não drácula soft beleza tem que as duas opções o drácula software é com essas laterais cinzas mas eu não gosto eu gosto desse drácula futuro azul beleza a partir disso agora o tema já está aplicado já dá um estilo praticamente muito legal a e agora o que a gente precisa fazer é instalar

a fonte também eu uso outra fonte não usa a fonte que vem por padrão no vasco porque porque aqui quando eu estou no vasco deixa eu dar um zoom pouquinho aumentar o fundo site deixou abrir minha sétima isaac do usuário e deixa eu aumentar um pouco o editor ponto font size porque tá muito pequeno dezesseis aqui só pra ficar mais fácil visualizar beleza aquino fez conta quando a gente utiliza aquelas por exemplo esses sinais de pranchinha diferente né que a gente bota assim o sinal de maior e menor tudo isso aqui ele fica como se

fossem dois caracteres e eu gosto de utilizar um recurso que se chama fonte ligada às fontes legítimas elas vão punir esses caracteres em símbolos e esses símbolos eles ficam bem legais dentro do código ea fonte que estou utilizando pra fazer isso ela se chama falha com de beleza eu vou vir aqui o google chrome e vou procurar no google por fire code beleza ou abrir aqui o repositório pode ser um hit rehab mesmo aqui dentro deixou de ser roupa como eu iniciei meu mac como guest o escroto ao contrário eu gosto de utilizar o scrum

como é no mouse né deixa eu dar um download aqui dentro de solução tem essa opção download ea versão tanto faz a versão que tiver disponível aqui vou aguardar o download do zippy assim que ele finalizar por abrir esses arquivos zip pode finalizar já não finaliza agora sim ele já baixou agora está querendo a minha pasta a falha code 1 207 pode ser outra versão também eu venho aqui dentro dtf e agora para instalar a fonte do mec como eu faço eu abra o aplicativo do facebook é o catálogo de fontes se tiver em português

eo arrasto as fontes aqui para dentro do windows no linux vão ter formas diferentes mas não muda muito dessa forma tradicional só arrastar ou clicar em cima delas e clicar em instalar beleza agora com a fonte instalado aqui que eu preciso fazer eu abro aqui o meu verso i could abril com as minhas configurações e aí eu escrevo victor ponto font family e aqui dentro eu vou escrever feira conta então deixou a pagar tudo que tem aqui um pouco perdido ainda com essas com a forma que ele faz aqui foi a conta agora sim deixou

salvar só que agora a gente pode ver que as fontes já mudaram um pouquinho e aí eu escrevo também aqui dentro editor ponto fonte ligada e eu coloco to dessa vou salvar que agora agora sim e se eu voltar lá no meu editor e se fazer aquele símbolo por exemplo flechinha a gente pode ver agora o que ele se junta a flash e deixa tudo junto então eu boto sinal de igual sinal de dois guardas ele faz esse símbolo assim eu coloco duas chinas ele faz isso o pai piorou o reitor né que é a

a aba reta e um sinal de maior ele faz isso aqui fica bem legal também eu tenho o sinal de diferente que ele faz esse estilo fica muito massa também então toda essa parte de sinais que ele consegue unir ele cria esses símbolos que eu acho que dá um efeito muito bacana nosso código ea fonte por si só também é bem legal nenhuma fonte - peiser que a gente pode utilizar para qualquer lugar que a gente está utilizando o código então tranquilo agora a gente já falou sobre o meu tema falou sobre a fonte que

estou utilizando aqui e agora tem algumas configurações que eu faço no meu editor mas eu vou falar dessas configurações depois de eu falar dos plugins que estou utilizando porque algumas configurações elas são relacionadas a alguns plugins que eu instalei dentro do meu verso onde então vindo aqui na minha de extensões eu vou começar falando de alguns plugins que eu utilizo e porque utiliza esse plugin então o primeiro deles se chama collor highlight esse collor highlight toda vez que a gente escreve um hexa decimal o rgb dentro do nosso código ele coloca uma board e mostrando

qual que é aquela cor então por exemplo aqui dentro deixa eu voltar à sintáxi isso aqui como css se inscrever aqui por exemplo de botar uma cor que dá pra ver então botou que o rosto de rock de 715 96 veja que quando eu escrevo aqui o rex ele já dá a cor de fundo então se eu colocar uma outra cor qualquer aqui ó ele já vai dar corpo e aí por diante a gente pode brincando com algumas cores aqui ele vai colocar essa cor de fundo isso é bem legal para a gente entender quando

a gente tá lendo um arquivo css a entender qual é o elemento porque geralmente a gente lembra dele visualmente no front end mas não do css dele então quando tem a cor fica fácil a gente saber qual o elemento é igual porque a gente lembra da cor lá do html além disso do collor highlight utilizo um clube chamado toque henrique que ele adiciona uma sintaxe para quando eu tenho arquivos ponto enriqueçam arquivos de variáveis ambiente que são aquelas variáveis que elas mudam de acordo com o nosso ambiente e desenvolvimento ambiente de produção isto é que

utilizem todo o projeto javascript em uma extensão que me ajuda bastante além disso eu utilizo aí um carinho chamado editor conferir esse editor config é basicamente uma extensão que ela permite a gente configurar o editor entre o nosso time afim e principalmente de quando o nosso time tem pessoas que utilizam editores diferentes em alguns editores por exemplo sublime text que eles abram abrem arquivos no em coaching diferente quando você abre um arquivo no windows ele tenta quebrar a linha com o formatos e lrf se não me engano e o linux e unix por padrão o

formato é só lf então tem várias configurações de editor que a gente não vê quando a gente cria um projeto do zero mas que depois que outra pessoa abre esse nosso projeto dentro da máquina dela pode ser que aquilo se comporte de forma diferente então esse título confia bem legal e aí quando eu vou criar um projeto eu venho aqui na raiz dele deixou abrir uma pastinha porque aí fica mais fácil de se obter uma pasta com um projeto qualquer aqui na verdade sobre a criar uma pasta nova deixou criar aqui projeto por exemplo eu

abri essa palavra projeto no verso como clique com o botão direito aqui dentro ele vai ter esse arquivo que essa opção de gênero editor conferir e aí ele vai criar meio que um editor config padrão e aí a gente pode colocando as opções que a gente quer por exemplo esse projeto eu quero inventar ele com espaços eu quero que ele tenha dois espaços de tentação charset pode ser o f8 eu quero que ele tire os espaços em branco no final da linha e eu quero que ele coloque uma libra no final toda vez que eu

salvar agora eu posso ver que eu salvei o arquivo ele já colocou assim a linha em branco no final porque é uma configuração do editor config posso falar pra ele por exemplo ele usar o final das linhas como sendo formato lf é o formato do unix então se o usuário abrir esse projeto aqui no windows mesmo assim ele vai estar utilizando o formato aac lf e não o crf beleza então editor config é bem legal utilizando bastante dentro dos meus projetos quase todo o projeto basicamente criou o editor confere aí eu utilizo também o excelente

pra mim é excelente é uma das ferramentas indispensáveis para quem trabalha com javascript basicamente para ela conseguir fazer o link do nosso código quem nunca utilizou excelente a gente tem vídeo aqui dentro do canal que eu explico como o furo é excelente dentro do iet já mostrei do iet em vários projetos já mostrei node basicamente conhece lynch e padroniza o nosso código entre todos os desenvolvedores também também com a gente mesmo a gente acaba trabalhando em vários projetos ao mesmo tempo e não tem sempre como manter o mesmo vamos dizer assim o mesmo padrão de

código às vezes a gente coloca vírgula no final de uma linha desse ponto e vírgula no final de outras duplas aspas simples e tudo isso é altamente configurável e se a gente não tem como um excelente pra ajudar geralmente a gente acaba mantendo vários padrões de código dentro do mesmo projeto acaba atrapalhando também foi iniciar outro cara que eu utilizo muito é o ggit lens beleza e seguinte lens é fantástico é uma vamos dizer assim há uns é caro é um reator super atômico de ti para o vasco ou ele basicamente adiciona muitas funcionalidades para

quem utiliza gift to be dentro do veículo beleza então ele tem essa bem aqui do lado do kit lance a gente já viu por um projeto que utiliza que ele dá várias opções pra gente principalmente no meio do desenvolvimento mas ele não é uma interface para a gente ficar dando o convite para ficar abrindo request não não é isso ele é basicamente a gente conseguia entender como que tal histórico da nossa aplicação os arquivos que a gente está trabalhando se aqueles arquivos que a gente está trabalhando vão causar conflito quando a gente jogar eles online

saber por exemplo qual linha foi feita por quem então a partir do momento que a gente está no limite lance ea gente e clonar um repositório online a gente coloca a linha por exemplo seleciona uma linha qualquer no nosso código ele já vai avisar pra gente quem foi o o desenvolvedor que assolou aquela linha no código quando ele adicionou em qual clube quantas vezes aquela linha foi editada e por quem então fica muito fácil a gente saber várias informações obtidas pra mim é um dos das minhas extensões preferidas aqui dentro do vasco para trabalhar com

um time que trabalha com um kit beleza aí eu utilizo também a extensão do gráfico el do prisma essa extensão eu acho muito importante para quem for trabalhar com rafael é uma extensão que ela adiciona toda a parte de inteligência adicionar à parte de snipers tem muita coisa legal validação tem o gosto definition que a gente ficar em cima de uma queda e ele já pular lá pra dentro daquela no código então o cara quem for trabalhar com rafael dentro do ps com essa extensão é muito importante eu utilizo ela bastante também nos projetos que

envolvem gráfico é o tranquilo além disso tem essa live saber que utilizo quando eu vou desenvolver arquivos html muito simples a gente como desenvolvedor depois que a gente vai aprendendo o iet engula viu o node por aí vai a gente se esquece as vezes que na hora de criar um site muito simples a gente não precisa de tudo isso a gente pode desenvolver apenas com html e css e esse livro serve basicamente ele adiciona aquela funcionalidade que sempre que o edital o código seja um html css simples ele faz um reload automático dentro do meu

navegador sem precisar ter nova qualquer webtech o iate guppy qualquer coisa assim nessas ferramentas do front então isso é muito legal eu como às vezes faço alguns sites a pessoais assim pró alguns eventos que eu participo como organizador eu sempre utiliza o html css é mais do que suficiente a gente não precisa sair me usando mil ferramentas a excelair service me ajuda nesses casos beleza na mesma onda do live server nós temos o live choque pra mim é a ferramenta eu acho que dentre todas as extensões que eu falei ali sher ganha com uma ferramenta

mais fantástica que existe no versículo beleza eu acho que um dia eu vou fazer um vídeo mostrando isso aqui comenta se vocês têm vontade que eu mostre as funcionalidades do lago chefe mas cada um leve cheiro é basicamente você e mais uma pessoa ou quantas pessoas você quiser trabalhando no mesmo projeto em tempo real ele mostra o cursor de todo mundo mostra os arquivos que as pessoas estão trabalhando as pessoas não precisam ter o código na máquina delas pode ser o mesmo código está na sua máquina elas podem editar você pode compartilhar o seu terminal

com as pessoas belas escrever no seu terminal você pode compartilhar portas da sua aplicação da sua máquina para as pessoas acessarem via local roth na máquina deles então se eu tenho uma aplicação rodando local os 3.000 eu posso compartilhar com outra pessoa e ela acessa no rosto três mil e mostra a mesma coisa lá dentro da máquina dela então caro leve share meu deus pra quem trabalha com o programa em um time que quer trabalhar duas pessoas no mesmo projeto que é muito legal cara utilizem essa ferramenta é excepcional nós o tiramos utilizamos muito aqui

no rock city principalmente quando a gente está lá naquele domingo falando carvão desenvolver alguma coisa vamos chama lá eu joão o eset a gente junta ea gente desenvolve alguma coisa utilizando o cheque para mim é fantástico tranquilo outra extensão que utilizo muito é uma tio ayrton kim beleza estimativo é com quem ele é só perfumaria ele serve pra gente deixou ativa aqui ó ele serve pra gente ter o nosso ciccone vizinhos dos arquivos aqui bem legais então por exemplo um índex ponto js quando eu criei aqui por exemplo um ponto em vienne já colocam o

sinalzinho de configurações se eu crio aqui por exemplo sei lá um primer rc que a configuração do poder ele já coloca a aliança eu crio um ponto slint rc ele já coloca o ícone do excelente e ele tem muitos e muitos ícones inclusive um pacote que aceita você incluir novos ícones então se você por exemplo um ícone que inclui aqui dentro não me engana quando escreve prisma ponto e amor beleza e significa que estão lá dentro e ver uma por reconhece porque utilizava o prisma que é uma biblioteca para a gráfica tel e não tinha

o ícone zinho do prisma eu achava muito chato eu gosto de ter o ícone se relacionado com as configurações dos arquivos então eu enviei lá eles aceitaram e já tá aqui e isso serve para vários arquivos caso você vai trabalhar sei lá com clube por exemplo você escreve teste ponto rb ele já coloca ali ó o ícone zinho do clube carioca tem ph p então desse ponto que a galp tem pra todos os tipos de linguagens então se você quer trabalhar com veículo essa extensão é primordial acho ela muito massa ela dá um efeito bem

legal aqui na listagem de arquivos a além do fat wai confirme aí eu estava também o stae de componentes deixa eu escrevi aqui está além de componentes para quem não viu ainda nunca não conhece a história de componentes é basicamente uma forma de a gente utilizar componentes lá dentro do yeti ou do iet net de uma forma vamos dizer assim muito melhor ah eu já fiz vídeos no canal só procurar por sinais de componentes que explicou os benefícios de utilizar a história de componentes dentro do at ao invés de utilizar o css como beleza então

eu utilizo essa sim essa extensão irá acionar a parte de sintaxe site porque como está lento componentes ele cria parte de css dentro de arquivos js por padrão arquivo js ele não tem assim táxi light né a forma de exibir as cores aqui nos textos de acordo com o css então eu estava ele basicamente por ele fazer isso é a única coisa mas já dar um help legal a tranquila vamos ver as últimas tensões que o estado agora eu só procuro por rock city e instalá-lo os limites de boeck js e de etnia tibetana já

está aqui com 34 mil e outros 42 mil downloads então vamos lá dar um retweet uma nota 5 lá pra gente por favor a esses níveis é que basicamente são uma série de snipers para ajudar no desenvolvimento de rieti e at night beleza que tem uma listagem de todos os níveis que a gente cria ção snippets basicamente para criar template de componentes template de componentes que utilizam linux tem a parte de instalar componentes têm a partir de conexão com idades a partir de criar looks que a gente utiliza bastante a parte configuração do recto tron

então tem bastante coisa legal aqui tanto project quanto pra project network e as tags um pouquinho diferente né por exemplo viu tudo mais então a gente precisa criar dois plugues diferentes por isso que a gente tá aqui ó kit hartnett e rock city hart js beleza agora eu terminei é basicamente todos esses aqui são os clubes que utiliza não tinha nenhum outro plugin além desses aqui sério mesmo e agora aqui dentro aqui a gente ainda não falou que são as minhas configurações do vasco como tem algumas configurações que vão mudar um pouquinho o funcionamento dos

plugins e tudo mais estão bastante configurações que eu fiz pra dar uma facilitada se você sabe este ponto de tirar ponto com barra diego 3g na verdade eu vou deixar esse link pra você que na descrição fica mais fácil eu coloquei aqui dentro um sétimo ponto jackson vou abrir e no modo hall vou copiar tudo que tem aqui dentro beleza abre aqui command shift p abra o nosso jejum aqui de configurações e colo aqui dentro vou dar um comedy é se ele já salvou e aqui estão todas as minhas configurações que utiliza no meu ver

é se como beleza e aqui as configurações elas não são muito vamos dizer assim difíceis de entender então é que meu calor tema que tem algumas coisas que eu faço na fonte que é aquela parte de fonte ligada ao tamanho da linha font size aqui eu coloco é as rugas basicamente porque eu tenho o padrão de nunca e se receber mais de 80 colunas aqui dentro de uma de uma de uma linha só então eu quando está chegando aqui eu tento quebrar o inter faz isso pra mim é uma que eu também falei em vídeo

e procura por perder aquela ferramenta que automaticamente já deixa o nosso código mais bonito quando o saldo o código mas aqui eu tenho isso pra me guiar beleza eu tenho forma do conselho aqui como falsa e esse é seguinte ponto alto ficção save é pra ele automaticamente ler as regras do meu slint e modificar o código toda vez que eu salvo esse código e aqui eu só tô habilitando alto fixo dentro de javascript e taques criticou o at aqui a gente tem esse renda online highlight basicamente para ele mostrar qualquer linha selecionada dando essa bordinha

aqui por volta do número da linha e não na linha toda que atrapalha bastante aqui eu também configurei a fonte do meu terminal integrado no vasco que a gente já vai mostrar daqui a pouquinho aqui mais algumas coisas de configuração mas nada muito complexo beleza são só algumas configurações aí de plugins como estilingues tem a parte e configuração de tarde scriptlogic chefe do explores então tem bastante coisa legal e aqui são todas as configurações que utiliza no meu vasco depois você pode dar uma olhada com mais calma para entender o que cada uma delas faz

beleza então agora que a gente já falou de tema fontes configurações os plugins que utiliza chegou a hora da gente falar um pouquinho sobre os atalhos de teclado que estou utilizando aqui dentro do meu ver é se code então bora lá eu vou apertar que como o shift pé de novo no seu pode ser contra o peru não sei exatamente como que esse comando para abrir essa instrução zinho aqui pra ditam comando eu vou procurar porque badin só não acho que short que antes de procurar por short cuts isso aqui e eu procuro por preferência

ou punk rock shox beleza ele vai abrir essa telinha aqui e aí o primeiro choque canto que estou utilizando ele se chama é de selection to find nextmedia e o meu padrão aquele jovem que utiliza o que é o comandante de que faz esse short kant se eu tiver vários textos dentro da minha aplicação né com o mesmo o mesmo conteúdo eu seleciono um deles e aperto como add aqui meu mac ele vai selecionar todos e aí eu posso editar todos de uma vez isso aqui eu utilizo bastante está principalmente quando eu quero renomear e

avisa eu quero renome a meta das funções isso aqui me ajuda bastante outra coisa que eu posso fazer pra ter quase o mesmo o mesmo funcionamento eu posso apertar out aqui no meu caso no mac ele estima ao tio option e eu posso clicar nas linhas hora enquanto que o seguro out e ele vai também criar essa seleção de várias linhas e aqui eu posso fazer em lugares diferentes por exemplo pode selecionar aqui aqui no meio e aqui no meio e aí eu escrevo ele vai escrever onde estão meus cursores nisso aqui são múltiplos cursores

que eu posso ter dentro do veículo o próximo atalho que utiliza aqui do teclado ele se chama no fi line dão beleza e aqui ele já está também do mesmo onu no atalho que utiliza o mesmo que o alt para baixo néel ocean e o mundo online pop e utilizo opção pra cima então aqui se eu tiver por exemplo 1 2 e 3 e que desenvolveu o dois pra baixo eu sou aperto out e aberto pra baixo pra cima e eu consigo mover essa linha para baixo ou para cima como eu preferir beleza aqui dentro

ainda dos kibbutz chocantes eu tenho mais um que é o cometa que utiliza também o padrão que vem na verdade esse é o tom online como a gente quer eu comentar código então esse que ele não está com nenhuma sintáxi por isso ele não permite aumentar mas aqui o bóton eu sou um coma de barra e ele coloca o comentário que também utiliza bastante a além disso eu tenho um carinho que se chama cop online dão esse copo online dão aqui pra mim ele é excepcional e aqui eu não utiliza o padrão que ele vem

eu gosto de utilizar como shift de beleza dentro do meu mac deixou na verdade voltar aqui como tive de deixar o inter e agora basicamente ele duplica linho e eu gosto de utilizar como o tipo t d para ele aplicar e fica fácil aí eu tenho como add pra correr e como shift de duplicar eu gosto de utilizar esses atalhos a eu tenho mais um que se chama cam acho que sócrates exatamente aqui está como comandantes e utiliza o comandante também quer pra ele tirar a linha por completo que estou selecionada por exemplo se tiver

teste um teste 2 e teste 3 eu venho em cima do teste dois do comude x e além de ele tirar essa linha ele também deixa ela disponível pra gente dar um control v em outro lugar então eu utilizo muito e se como um x para remover linhas por completo depois precisar quando aquilo em algum lugar tranqüilo e aí claro não poderia faltar eu uso também e citou integrei determinam tranqüilo no mac ele vem por padrão pelo control e aspas aqui do lado e é esse que eu gosto de utilizar também aí você pode botar

a maneira que você preferir no windows também utiliza o control aspas no mundo também mas é basicamente pra abrir esse nosso terminal integrado aqui dentro do vasco que cara quando estou desenvolvendo qualquer projeto que precisa lidar com comandos no terminal que precisa é rodar no ideb ano start ea nied ou npn stal qualquer coisa assim eu só utiliza o terminal integrado não utiliza nenhum terminal de fora do mec porque o terminal integrado a gente consegue abrir aqui e ali mas abas né mais painéis vamos dizer assim consegue abrir a aba também é que eu tenho

dois terminais por exemplo eu consigo cara tem muita coisa que dá para a gente fazer então esse terminal integrado do vasco onde ele é bem poderoso e assim termina basicamente todas as minhas configurações do verso como beleza se você tiver curiosidade por mais algum tipo de configuração que eu faço é no meus projetos estrutura de pastas qualquer coisa assim pergunta aí que com certeza eu faça um vídeo explicando tudo certinho