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

Подписаться 363 тыс.

Просмотров 338 тыс.

50% 1

✅ Maratona Explorer: Dê seus primeiros passos na programação.
→ Cadastre-se no link gratuitamente: rseat.in/maratona-explorer
Faaala Dev! 💜
Nesse vídeo eu vou mostrar como eu configurei meu ambiente de desenvolvimento no VSCode.. Os snippets que eu estou usando, plugins, atalhos e muito mais!
Link do post em que eu mostro como eu configuro o terminal:
blog.rocketseat.com.br/termin...
Link das minhas configurações do settings.json:
gist.github.com/diego3g/b1b18...
-----
Acompanhe a Rocketseat nas redes sociais:
Site: www.rocketseat.com.br
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rocketseat.com.br
Blog: rocketseat.com.br/blog

Опубликовано:

17 июл 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 244

@_thaizamedeiros 4 года назад

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.

@alinegomesdeoliveira552 4 года назад

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

@luca0898 4 года назад

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 4 года назад

Ele usa macOS

@marvio_rocha 4 года назад

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

@jhonyterra9057 4 года назад

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

@robsong6689 4 года назад

@@jhonyterra9057 1:09 Ele tava falando disso.

@jhonyterra9057 4 года назад

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

@ticia_games 2 года назад

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 2 года назад

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

@elmocontrabandistadedrogas3563 2 года назад

Fez a boa lele santinha

@rogeriofox 4 года назад

A produção aumenta absurdamente! Obrigado Diego.

@enioferreirajunior2992 2 года назад

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!

@brenooliveira2638 4 года назад

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!

@rafaelphs3105 4 года назад

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

@rogereichert 4 года назад

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.

@jack.rsantana 4 года назад

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

@hendelfeliciano6375 4 месяца назад

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

@davidsodre 4 года назад

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 4 года назад

Fiz isso e mesmo assim nao rolou

@renanfelipe4169 4 года назад

@@viniciusrossado9528 tenta instalar a fonte de novo pelo otf

@gabrielrojas5641 4 года назад

Aqui deu certo! Valeu, man!

@talesaraujo979 4 года назад

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

@jope7499 4 года назад

Ajudou mttt, valeu mano

@joaopedroaraujo1433 4 года назад

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!

@cirosouzatec 4 года назад

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

@millasnasser9733 4 года назад

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

@GustavoVianna 4 года назад

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.

@davidsodre 4 года назад

Atalho para abrir a linha de comando no windows: F1

@davidsodre 4 года назад

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

@victorcampos258 4 года назад

Tá doido moço, que adianto do carai

@gabrielmatos4660 4 года назад

valeu mano, esse de comentar sempre quis saber..

@icarosimoes 3 года назад

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

@AlandeAlmeidaMatias 3 года назад

Cacete! Valeu

@jeanbarbosa9 4 года назад

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.

@wagnermattos8745 4 года назад

Muito massa, valeu Diego pelas dicas!

@marciogrecioyt 4 года назад

Parabéns Diego, ótimo tema

@mathgsouza 3 года назад

Eu amo vocês caras! 💜

@FilipeAndreis 3 года назад

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

@rocketseat 3 года назад

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

@andersonluizneto4294 4 года назад

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

@wiataganp 3 года назад

Simplesmente perfeito copiei colei tudo.

@giulianabezerra 3 года назад

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

@marcsolto 4 года назад

Valeu pelas dicas Diego. Gitlens é show!

@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 Год назад

🤣

@danilomartins18 4 года назад

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

@vitotrauz58 3 года назад

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!

@felipeP3277 4 года назад

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

@morpheuz2006 4 года назад

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

@andersongoncalves5149 4 года назад

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

@marlondarosa9035 3 года назад

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

@juliosantos5287 4 года назад

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

@tafadias552 4 года назад

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

@joaobibiano 4 года назад

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

@raphaelrychard4596 4 года назад

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

@jorgevicente5499 Год назад

Ótimo vídeo, obrigado!

@ALEXSILVA-Shorts Год назад

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

@tavareshenrique 4 года назад

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

@leoslemos1 4 года назад

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

@guilhermebrasil8892 4 года назад

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

@EscalaCerrado 4 года назад

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 4 года назад

Descobri esse plugin recentemente. Muito útil mesmo!

@luisgabrielmxm 4 года назад

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

@davidsodre 4 года назад

vou ver aqui como funciona vlw irmão!

@CharlesMendes1985 4 года назад

top dica obrigado

@MatheusProtzen 4 года назад

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

@BrocchiRodrigo 4 года назад

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 4 года назад

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

@McLipinhoTv 4 года назад

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?

@kaykerocha 4 года назад

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?!

@ThomasCouto 4 года назад

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

@josiclerlemesilva317 4 года назад

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

@rocketseat 4 года назад

Valeeeu por esse feedback, Josicler! 💜💜💜

@alekyscoelho8333 3 года назад

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!

@jerryalmeida 4 года назад

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

@joaovictorcavalcante9948 4 года назад

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.

@DanielPabloSheng 4 года назад

Boas dicas, obrigado.

@hugo7372 3 года назад

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 3 года назад

Boa Hugo!! Valeeu pelo feedback! 💜💜

@ricardovasconcelos5580 4 года назад

Faz um vídeo usando react + oauth2!!

@birobirobiro 4 года назад

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

@vroxlon 4 года назад

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 4 года назад

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

@vroxlon 4 года назад

@@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 4 года назад

Lon Henrique #paz 😂

@cedricmatheus4881 4 года назад

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!

@bitcoiner7 4 года назад

# *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 :(

@edupazz 4 года назад

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 4 года назад

Diego sem Dracula não é o Diego! 💜

@lucasleonardofr 4 года назад

Sensacional !!!

@GabrielOliveira-ln7cm 11 месяцев назад

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

@thalesalonso4046 4 года назад

Fantástico Diego

@MatheusCosta-lk1fu 3 года назад

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.

@brunopetrolini 4 года назад

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

@erisonnicodemos 4 года назад

Diego você é um influenciador VSCodal rs

@niltoncjr 2 года назад

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

@rocketseat 2 года назад

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

@robmlopes 3 года назад

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

@davidsodre 4 года назад

Boa Diegão!!

@zoomcwb 4 года назад

Cara que tope este video

@JeanCarlos-cs3zt 4 года назад

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

@Philltou 4 года назад

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.

@joaquimsouzaribeiro4187 4 года назад

Muito bom fera

@elton486 4 года назад

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

@devsantiag 2 года назад

Perfeito!!!

@fabianofilho3973 3 года назад

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

@gumbts 4 года назад

Diego, faz um video usando websocket com redux, usando Duck Pattern e Redux Sauce se possivel plz

@lucianomoreira2935 3 месяца назад

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!!!

@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.

@carlosalmeida7693 4 года назад

Gosto muito das suas aulas, porém não consigo dar inicio aos meus projetos porque não consigo baixar os componentes e frameworks da maneira correta

@rossywanfranca604 4 года назад

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

@langelalins8478 2 года назад

Ótimo conteúdo.

@glhermeguimaraes 4 года назад

Excelente !!!!

@jean4470 3 года назад

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

@felipemenezes3373 4 года назад

Diego, instalei o VS Code no meu pc mas quando vou rodar o debug nao funciona. Já tentei de tudo. Você sabe o que tenho que fazer? Atualmente a aba launch.json está o seguinte: "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}/app.js", "skipFiles": [ "/**" ] } ] } Ele dá o seguinte erro: Attribute 'program' does not exist ('C:\Felipe\JavaScript/app.js').

@rodfreitas1935 10 месяцев назад

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

@lucasviece 2 года назад

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 2 года назад

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

@carloslucas909 3 года назад

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 3 года назад

Que legal, Carlos! Ficamos muito felizes 💜💜

@israelfilipe8812 4 года назад

Sensacional, valeu!

@rocketseat 4 года назад

Valeu pelo elogio, Israel! Diego é top, não? 💜

@hugoleonardo1394 4 года назад

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

@allasmaycon4706 4 года назад

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

@rocketseat 4 года назад

Somos chiques 💜

@Eugenii2233 4 года назад

will be a video about your config terminal?

@franciscomenezes6970 4 года назад

show de bola!

@sidicleiluiz7747 4 года назад

tem como dar uma idéia do que esta acontecendo com o meu VS Code

@ipdmartins 2 года назад

Show!!!

@RobsonAlvesJJ 4 года назад

Muito bom valeu......

@oracioo4206 2 года назад

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

@AlexxHarper 4 года назад

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