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

[@ticia_games]

5:29 - Color highligth 6:13 - DotENV 6:29 - EditorConfig 8:18 - ESLint 9:08 - GitLens 10:18 - GraphQL 10:46 - LiveServer 11:41 - Live Share 12:59 - Material Icons 14:07 - Styled Components 15:01 - RocketSeat

[@becauro]

14:53 - Snnipets (ReactJs e ReactNative) da RocecketSeat Add aí, Letícia.

[@elmocontrabandistadedrogas3563]

Fez a boa lele santinha

[@account-vj2tx]

4 anos depois e ainda muito util este video. Obrigado!

[@rocketseat]

Vou até dar uma olhada se não vale a pena atualizar ele!

[@rogereichert]

O cara ensina muito melhor que meus professores, explica cada plugin, cada ferramenta, cada detalhe que deixa a gente sem nenhuma dúvida e ainda dessa forma, tem gente que negativa... Fico pensando: essas pessoas vivem onde? Em Nárnia? Ta doido.

[@hendelfeliciano6375]

Um dos melhores vídeos sobre vscode que eu já vi, obrigado pelo help!

[@franciscoetizel3158]

Diegão, eu te amo cara. Tudo o que tu faz pela comunidade, ajudando as pessoas da melhor forma póssivel! Teu trabalho irá deixar uma pegada gigante para a próxima geração de programadores. Meu muito obrigado!

[@claudioh.9108]

🤣

[@luca0898]

Cara, vejo que vc é um cara muito experiente na área, então tenho uma ideia pra você. Queria que tivesse um canal pessoal pra falar coisas relacionadas a tecnologia, como seus estudos, seus projetos, quem sabe um daily vlog com seus desafios diários e tal. Poderia começar com um tour pelo seu linux, mostrando as suas ferramentas e configurações que esta usando ...

[@cappp]

Ele usa macOS

[@marvio_rocha]

Amigo, estudar estudar e aprender estudar você vai chegar também a outro nível e o principal praticar! O restante é história

[@jhonyterra9057]

Só uma correção aqui: o sistema operacional não é Linux mas sim um MacOS da Apple. Acho a ideia muito legal.

[@robsong6689]

@@jhonyterra9057 1:09 Ele tava falando disso.

[@jhonyterra9057]

@@robsong6689 nossa me passou completamente despercebida essa parte hahaha obrigado por me mostrar

[@davidsodre]

DICA: Caso vcs não consigam ver a mudança das fontes, após a configuração das fontes, fecha o vs code e abre novamente!

[@viniciusrossado9528]

Fiz isso e mesmo assim nao rolou

[@renanfelipe4169]

@@viniciusrossado9528 tenta instalar a fonte de novo pelo otf

[@gabrielrojas5641]

Aqui deu certo! Valeu, man!

[@talesaraujo979]

Outra: se você estiver no Linux, provavelmente precisa recarregar o cache das fontes com o comando fc-cache -f -v

[@jope7499]

Ajudou mttt, valeu mano

[@alinegomesdeoliveira552]

Excelente vídeo Diego, para quem está iniciando carreira, esse tipo de informação é difícil de encontrar de forma clara, vlw

[@davidsodre]

Atalho para abrir a linha de comando no windows: F1

[@davidsodre]

Atalho para comentar a linha no Windows: CTRL ; (ponto e vírgula)

[@victorcampos258]

Tá doido moço, que adianto do carai

[@gabrielmatos4660]

valeu mano, esse de comentar sempre quis saber..

[@icarosimoes]

obrigado!, to aqui procurando como abriu a linha de comando, kkkkkkk

[@AlandeAlmeidaMatias]

Cacete! Valeu

[@hugo7372]

Pessoal que também encontrou dificuldades para perceber as cores nas fontes, as mudanças serão percebidas somente após salvar o arquivo em algum formato, .js por exemplo. Editando somente o untitled fica sem formatação. Pelo menos foi o que ocorreu comigo. Muito grato pelo vídeo.

[@rocketseat]

Boa Hugo!! Valeeu pelo feedback! 💜💜

[@enioferreirajunior2992]

Informações importantes para quem está começando. Não apenas suas preferências, mas o modo de como configurar o editor e ganhar agilidade. Top Diego!

[@diegodegodoisoares9214]

Rocketseat! Top demais! Já tem mais um seguidor ávido por coisa boa! Obrigado

[@FilipeAndreis]

Dica: Bracket Pair Colorizer 2 , ele coloca um fio colorido entre chaves e parênteses correspondentes.

[@rocketseat]

Que sensacional! 😮 Valeu demais pela dica, Filipe! 💜 🚀

[@_thaizamedeiros]

Muito obrigada Diego! facilitou muito o trabalho com essas configurações. E parabéns ao restante da galera da rocketseat tbm, pelo belo trabalho de vcs.

[@mathgsouza]

Eu amo vocês caras! 💜

[@rogeriofox]

A produção aumenta absurdamente! Obrigado Diego.

[@EscalaCerrado]

Um plug-in que utilizo é o "Settings Sync". Ele sincroniza as configurações do VS code com o gist, tanto dos plug-ins instalados como as configurações do editor.

[@JonathanVeg]

Descobri esse plugin recentemente. Muito útil mesmo!

[@luisgabrielmxm]

Sim também uso, eu ia recomendar, muuito util, alem do settings.json dle salva todos os seus pluggins

[@davidsodre]

vou ver aqui como funciona vlw irmão!

[@CharlesMendes1985]

top dica obrigado

[@jerryalmeida]

para quem usa windows muda a linha para: "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",

[@brenooliveira2638]

Haha que coincidência. Assisti recentemente o curso grátis de React Native, ótimo por sinal, vim correndo ver se tinha uma vídeo de configuração do VS Code. rsrs. Parabéns Diego. Muito bom seu trabalho!

[@edupazz]

Todos que eu vejo que usam Dracula eu atribuo a influência ao Diego, haha. Recomendo o Synth Wave '84 e o Night Owl se quiserem uma variada

[@rocketseat]

Diego sem Dracula não é o Diego! 💜

[@rafaelholanda3105]

Tutorial fantástico. Ótimo para quem está começando a estudar essas tecnologias. Por favor faz um vídeo do Live Share!

[@allasmaycon4706]

Nossa... até um extensão própria vocês tem no vs code... woooww!!!!

[@rocketseat]

Somos chiques 💜

[@ALEXSILVA-Shorts]

Ótimo video cara, me ajudou demais... valeu, tava perdidão.

[@juliosantos5287]

Top, criou até uma extensão que engloba as outras duas que já tinha criado... ducaralho véi... assim que possível farei o teu curso... sucesso.... e bora codar

[@andersonluizneto4294]

Esse tema Dracula é tão bacana que coloquei no meu Vim ;)! Parabéns meu Camarada!

[@MatheusProtzen]

Caso alguém use mais de um computador (Ex: casa/trabalho) existe a extensão "Settings Sync (shan.code-settings-sync)", ela sincroniza as configurações do VSCode usando sua conta do GitHub com o Gist. It Syncs All extensions and complete User Folder that Contains 1. Settings File 2. Keybinding File 3. Launch File 4. Snippets Folder 5. VSCode Extensions & Extensions Configurations 6. Workspaces Folder

[@jack.rsantana]

Por favor, faz um vídeo falando sobre aquela extensão de Live Coding. Necessito muito!

[@wiatagan]

Simplesmente perfeito copiei colei tudo.

[@BrocchiRodrigo]

Legal a dica dos módulos! Baixei alguns também principalmente por estar aprendendo JS. Para Python tenho algumas e isso ajuda muito também. Show de bola a dica!

[@rocketseat]

Faala, Rodrigo! Valeeeu por compartilhar sua experiência com a gente 💜

[@jeanbarbosa9]

Uma extensão interessante que eu gosto de usar é o TODOTree. Essa extensão organiza em uma aba todos os TODO's do projeto e tem como configurar como vai ser exibido no código e criar outras tags. As que vem por padrão são TODO e FIXME.

[@marlondarosa9035]

Uma pergunta qual configuração preciso fazer para que ele idente quebrando linha automaticamente em cada ponto por exemplo em migrations. Exemplo this.table('users', (table) => { table .foreign('image_id') .references('id') .inTable('images') .onDelete('cascade') }) Excelente vídeo todos vídeos da Rocketseat são de alto nível de conteúdo e conhecimento obrigado mais uma vez

[@marcsolto]

Valeu pelas dicas Diego. Gitlens é show!

[@niltoncjr]

Muito bom!! Vai direto ao assunto - raridade!!

[@rocketseat]

Que massa que curtiu, Nilton! Valeu demais pelo feedback! 💜 🚀

[@rossywanfranca604]

Curto muito seu trabalho man!sempre ajudando bastante os novos e os antigos com boas práticas e dicas, sempre bom ouvir um desenvolvedor experiente

[@erisonnicodemos]

Diego você é um influenciador VSCodal rs

[@wagnermattos8745]

Muito massa, valeu Diego pelas dicas!

[@cirosouzatec]

parabens em amigo... muito bem explicado sem enrolação... de parabens mesmo...

[@leoslemos1]

Live Share - Seria interessante ter o vídeo sim!!! Ah.... e valeu pelas dicas!!!

[@romuloluis8992]

Quem mais é iniciante e não entendeu nada mesmo depois de rever incontáveis vezes...da UP.. pra mim não me sozinho oahsjd

[@millasnasser9733]

Uma extensão muito massa também é a Better Comments, que adiciona cores para diferentes tipos de comentários, por exemplo um TODO ficaria com cor diferente de outras linhas

[@birobirobiro]

"Se eu pudesse botar um tema no meu carro eu botaria pintado de Dracula" - Diego Schell Fernandes

[@vroxlon]

Meu Jesus da agonia ver uma pessoa escrever a palavra "bota" para se referir a "colocar" eu já começo a conjugar o verbo, eu boto, tu botas, a galinha bota e ai vai.

[@birobirobiro]

Lon Henrique Apenas reescrevi o que ele disse! Está em aspas

[@vroxlon]

@@birobirobiro tranquilo cara não estou te criticando não, isso se chama "regionalização", mas é estranho para um Paulista, escutar a pronuncia "botar", em alguns lugares do país é extremamente comum

[@birobirobiro]

Lon Henrique #paz 😂

[@cedricmatheus4881]

Mas o que é isso... temos um professor Pasquale entre nós... kkkkkkkkkkkk zuera @@vroxlon... mas ai, sou paulista e aqui em Campinas é comum as pessoas conjugarem o verbo "botar" kkkkkkk abçs!

[@GabrielGarcia-uo1bu]

3 Palavras... Eu te amo!!!!

[@GustavoVianna]

Diego, explica por favor como são feitas todas essas configurações no Windows, inclusive a configuração do node.js, chocolatey entre outras ferramentas alternativas que usamos no Windows, ou seja como montar todo ambiente de desenvolvimento no Windows, desde já agradeço parabéns pelo conteúdo, vou participar do próximo bootcamp com certeza.

[@thalesalonso4046]

Fantástico Diego

[@carloslucas909]

Brother primeiramente boa tarde e olha esse vídeo me ajudou muito pq quero seguir essa área de dev web muito bom seu vídeo, curti muito pq tenho uma queda por esse editor vscode

[@rocketseat]

Que legal, Carlos! Ficamos muito felizes 💜💜

[@fabianofilho3973]

o mue vs sempre abre no ultimo documento que eu criei, algum sabe responder como fazer para abrir em um arquivo untitled?

[@andersongoncalves5149]

Gosto muito do seu trabalho.. hehe ,Muito massa esse vídeo.... faz um configurando o cmd!!! hehe

[@marciogrecioyt]

Parabéns Diego, ótimo tema

[@lucasviece]

um plugin que acho muito bom é o "Settings Sync " ele vai colocar automaticamente no teu git os plugins e configurações q vc usa no seu vscode, pra quando vc formatar seu pc, ele ja baixa td automaticamente

[@rocketseat]

Faaaaala, Lucas! Wooow! Aí sim, hein? Muito bom! Vou dar uma olhadinha! Valeu demais por compartilhar com a gente! 💜 🚀

[@AlexxHarper]

Salve Diego, você disse que usa linux em casa, faria um passo a passo configurando ReactNative no linux? toda vez que eu tento aparece uma serie de erros de dependências, em um monte de tutorial que eu vi, nenhum da 100% certo, meu processador não suporta virtualização, tem como mostrar na pratica o desenvolvimento em ReactNative em linux com o dispositivo físico rodando a aplicação? ate tive que instalar windows para tentar rodar mas os mesmos erros de dependências persistem (core-js, deep-assign, hapi e etc), expo vive dando erros que eu não vejo nos seus videos Sou usuário de linux mint

[@snakygamer]

Alexx Harper up

[@jean4470]

cara me ajuda muito pq eu tenho problema com identação em js hahahah

[@joaopedroaraujo1433]

Muito massa Deigo! Com certeza vou integrar algumas desses configurações no meu VSCODE! Vendo esse vídeo fiquei muito curioso com sua extensão "Live Share", vídeo sobre ela seria *ótimo*! Grande abraço!

[@ricardovasconcelos5580]

Faz um vídeo usando react + oauth2!!

[@joaovictorcavalcante9948]

Mano faz um vídeo falando como deixar o vs code com a configurações padrão, sai mexendo no meu que nem doido é tá tudo errado.

[@luizcarlostomebasilio4319]

Olá. Gostaria de um auxilio em uma configuração. Meu VS CODE não está puxando automático o DOCTYPE "index.html" ao inserir ! ou escrever o próprio DOCTYPE.

[@GabrielOliveira-ln7cm]

qual é a função que depois do auto complete o ponteiro do mouse vá para o final? quando uso o auto complete ele adiciona o ponto e vírgula porém o mouse fica antes do ponto e vírgula ... tipo: var idade[ponteiro do mouse fica aqui] ; [ao invés de vir para cá] ...não sei se fui claro kkkk

[@robmlopes]

Aqui uso o GitGraph ajuda muito a ver o projeto visualmente.

[@felipeP3277]

Diego parabéns pelo canal... cara qual é o tema do seu chrome? Bem legal essas cores

[@joaobibiano]

Só uma dúvida ... por exemplo, com o styled-components... eu não preciso adicionar a ferramenta em meu package.json ?

[@jorgevicente5499]

Ótimo vídeo, obrigado!

[@MatheusCosta-lk1fu]

Como se faz para ativar as extenções ? No meu caso eu baixei algumas para executar o código mas não funciona, tentei mexer no launch.json mas não adiantou.

[@bitcoiner7]

# *AJUDA* estou (tentando) acompanhar a semana oministack 10 e ja logo me aparece algo para atrapalhar meu terminal do vscode esta usando o gitbash, e o terminal do Diego, no video, esta usando o Node quando clico na flexinha nao aparece o Node, apenas o Bash e o Default Shell e entao quando tento iniciar o "node index.js" (para abrir o localhost no navegador) nao da certo. achei q iria encontrar a resotresposta nesse video, mas nao :(

[@giulianabezerra]

Nice! Faltou falar do vsc-organize-imports , eu gosto muito para ordenar e agrupar direitinho os imports dos arquivos.

[@josiclerlemesilva317]

Obrigado por compartilhar teu conhecimento excelente conteúdo me ajudou bastante!!!

[@rocketseat]

Valeeeu por esse feedback, Josicler! 💜💜💜

[@ThomasCouto]

Otimo video ! Você utiliza o Hyper no VS ? Abs

[@guilhermebrasil8892]

Diego, porque comigo não apareceu aquela coisa do master, que aparece no seu vs code la embaixo nos videos?! (Do post do terminal)

[@oracioo4206]

usa Silver Yarra do tema Silver Gray, ele é mt bom

[@raphaelrychard4596]

obg! Pelo visio a um tempo atras tava querendo saber como duplicava linha agoa sei obrigado!

[@JeanCarlos-cs3zt]

Vei eu estava tentando colocar a fonte do fira code e estava me dando trabalho ate que eu consegui, mas depois eu nao sei o que fiz e nao esta aplicando a fonte Fira conde pode me ajudar

[@lucianomoreira2935]

Fala irmão blz, utilizei suas configurações do settings.json: e me ajudou a corrigir um erro e deu certo, porém fui dasabilitar a opção de compact folder ele não deixa, diz que tem um erro no settings.json e quando tiro as suas configurações ele me permite desabilitar a compact folder. Pode me ajudar a descobrir onde está o erro? agradeço irmão e obrigado pelo tutorial!!!

[@henriquebarros8303]

Diego, da uma atualizada naquele post lá sobre as customizações no terminal

[@tafadias552]

Fala mais sobre o Live Share! Vi que tem o live share áudio também.

[@kaykerocha]

Eu queria quebrar linha as propriedades HTML, porém em React o .js tem html dentro, ou configuro ele como HTML ou como JS, os dois não da? Alguma sugestão de como fazer isso? Fazer as configurações aplicarem tando ao JS com ao HTML?!

[@rodfreitas1935]

Onde está o link para o video do ZSH???

[@alekyscoelho8333]

Show! Tem algum vídeo teu ou postagem mostrando como mudar as cores, tipo variable.other.objects, algumas do textmate. Vi alguns vídeos que tu tinha alterado algumas, como o document. Eu tentei, consegui no arquivo .js (não sei bem como, se foi do jeito certo), mas ela não alterar em arquivos .html, dentro das tags , não sei se pq era bloco html. Tem alguma dica ? Obrigado!

[@natalopes3400]

tem algum plugin que carregue as tags html/css automaticamente igual em um arquivo html só q em um arquivo js?

[@rocketseat]

Fala Natã! O próprio Intellisense do VSCode faz exatamente esse trabalho! 🚀

[@kextia]

@@rocketseat ele esta falhando sabe como resolver? exemplo antes ele me dava uma lista de tags para escolher ,test - , só que não aparece mais mesmo apertando simultaneamente ctrl + barra de espaço.

[@kextia]

Descobri segue solução nossa ! kzbin.info/www/bejne/aWG9fGqphtWCj6c

[@Philltou]

Diego, sabe me dizer o porque do meu vscode não me mostrar a lista de métodos que podem ser aplicados a uma variável depois de eu digitar um ponto após a variável? Isso acontece em qualquer linguagem, tentei procurar na internet e não encontrei nada a respeito.

[@tavareshenrique]

Traz o vídeo falando d Live Share, Diego!

[@vitotrauz58]

Boa noite! Estou pensando em me tornar desenvolvedor mobile (React Native/Flutter/Nativo) e gostaria de saber quais configurações de hardware recomendáveis de um notebook para trabalhar profissionalmente. Obrigado!

[@davidsodre]

Boa Diegão!!

[@elton486]

Faz um video sobre o live share, vai ser da hora....

[@edu_amr]

*domingo dia de sol e de ferias num hotel* Diego VAMO: PROGRAMA!!

[@rocketseat]

Hahahahaha 💜

[@LucaSzsi-qwert]

Ai Diego faz um video mostrando como vc "pede" pro Material Icons incluir novos itens assim como vc disse aqui: 13:24 .. pfv '-

[@lucasarmindo8238]

Um pull request no github amigo, github.com/PKief/vscode-material-icon-theme.

[@brunopetrolini]

Alguém sabe qual a diferença entre a Fira Code Regular e a Fira Code Retina?

[@labufes]

Pra quem usa a fonte Fira Code, dá pra instalar ela no Windows, se você usa o Chocolatey, pelo comando "choco install firacode"

[@joaquimsouzaribeiro4187]

Muito bom fera

[@gilsonRodrigocwb]

Cara que tope este video

[@morpheuz2006]

mostra a funcionalidades do LIve share. Como configurar com git local

[@mierukoy]

to iniciando meus estudos como programador, to começando com o JS pra dps partir pra outras coisas, tomara q eu consiga pq meu sonho é esse ;-

[@TheNuGamers]

Iai mano. dps de 7 meses, como está seu desenvolvimento?

[@classicoaprendiz874]

Tentei aumentar a fonte do meu como foi demostrado no vídeo, e não funcionou

[@danilomartins18]

Falai Dieeeeego (deeeev), ótimo video cara! Se puder faz um video depois falando um pouco mais do Live Share, fiquei interessado em saber como funciona! Abraços

[@McLipinhoTv]

A cor no seu tema muda quando é function e quando é var. Eu instalei o Dracula e as cores são iguais: rosa. O que devo fazer pra configurar?

[@langelalins8478]

Ótimo conteúdo.

[@hugoleonardo1394]

POR FAVOR ALGUEM PODE ME AJUDAR NAO TO CONSEGUINDO FAZER ESSA PARTE DA FONTE SOU NOVO NISSO .VALEU

[@marciogrecioyt]

Diego tem algum comando par Indentar o código ?

[@rocketseat]

Você pode usar o ESLint com o Prettier que ele faz automático :)

[@marciogrecioyt]

@@rocketseat Show de bola, Muito Obrigado

[@Eugenii2233]

will be a video about your config terminal?

[@sidicleiluiz7747]

# não estou conseguindo acompanhar as mudanças pois os comandinhos não estão funcionando com o window 7 32 bits

[@DanielPabloSheng]

Boas dicas, obrigado.

[@nathansantos8218]

Perfumaria que eu amo kkkkk

[@renatonascimento7885]

Só passando pra agradecer ao Diego e o time da rocketseat por disponibilizar material de qualidade gratuito. Parabéns. Agora o mimimi de certas pessoas é de doer: ainnn fala rápido, ainnn não explicou no Windows... molecada preguiçosa da porra, quer tudo mastigado. Assim vcs nunca serão programadores! O que vcs não sabem e não foi apresentado em algum vídeo, vão atrás caraio. A informação tá aí, ao alcance de alguns cliques, valorizem isso. Utilizem tutorias para serem meios e não fins do seu aprendizado . Teve um cara aí nos comentários reclamando que queria apenas configurar o node no viscose e não um vídeo completo de config...ah vai pra pqp !

[@rocketseat]

Faala, Renato! Valeu por compartilhar sua opinião com a gente 💜💜