20 Extensões para o VSCODE que Você PRECISA Instalar se é Front-end

Se cadastre na minha lista de email para receber as comunicações em primeira mão : www.joaobibian...
-----------
Muitas pessoas pediram esse vídeo! E aqui está ele.
Descubra a configuração do meu vscode e quais configurações eu fiz para aumentar a minha produtividade 🔥🔥🔥
Link para as minhas configurações gist.github.co...
Meu instagram: / joaovbibiano
Meu site: joaobibiano.co...

[@joaobibiano]

🚀 Conquiste a sua liberdade financeira com a programação em 2022! 🔥 Desafio A Rota da Programação Front-end. 100% Ao Vivo e Gratuito. Inscreva-se. 👉 joaobibiano.com.br/inscricao-desafio

[@DaviSilvaGuitar]

Compilado das extenções do vídeo: 1. Color Highlight 2. Dracula Official 3. ES7+React 4. ESLint 5. Github Copilot 6. GitLens - Git superchard 7. Live Server 8. Live Share 9. Material Icon Theme 10. Omni Theme 11. Prettier - Code formatter 12. Prisma 13. Python 14. Rocketseat React Native 15. Rocketseat ReactJS 16. Setting Sync 17. Tailwind CSS IntelliSense 18. vscode-styled-components 19. Winter is Coming Theme 20. XML Tools

[@joaobibiano]

🚀🚀🚀

[@canaldometius]

Me ajudou bastante João, muito obrigado, sucesso!!!

[@BrandevTech]

Sempre vejo a recomendação do tema dracula apesar de achar muito monocromatico. Meu favorito é o Bear. Deixa um clima Noir

[@user-is2de1cj1b]

Gostaria de sugerir uma atualização para o seu vídeo, a fim de descobrirmos se você ainda utiliza as mesmas extensões que mencionou anteriormente ou se encontrou outras novas. Gostei muito da sua didática e acredito que esse tipo de conteúdo seja extremamente valioso para a comunidade.

[@joaobibiano]

opa, nesse momento estou usando nvim, isso é uma coisa viva, né? cada dia uma coisa diferente

[@Carlos.Soares]

Muito obrigado 🙏🙏 👍

[@BrandevTech]

Me apaixonei pelo Copilot. A IA dele é surreal. Cheguei a APRENDER NOVAS técnicas e métodos só com as sugestões dele... Infelizmente agora é um serviço pago.

[@rogeralmeida7298]

Show essas dicas! valeu Brother

[@miguelsamzevedo]

João fantástico cara, que legal sua forma de explicar. Gostei muito

[@joaobibiano]

Valeu Miguel! Obrigado!

[@rendaextraAO9]

Ganhou +1 inscrito. Sou de Angola e vc me ajudou bastante

[@joaobibiano]

Valeu pelo feedback

[@felipemathias4069]

Opa João, tudo bom? eu uso quase as mesma que você, porém uso uma a mais que é a Bracket Pair Collorizer 2 que aplica uma cor diferente para cada {} ou (), achei que facilita muito saber onde abre e fecha

[@joaobibiano]

Opaa, sensacional! Essa foi adicionada nativamente pelo vscode recentemente, dá uma olhada depois!

[@miguelsamzevedo]

Opa Felipe, que legal sua sugestão, estou começando agora os estudos, vou aplicar esta sua ideia. Valeu

[@juniorf28]

João, você poderia colocar suas configs json em um repositório pra gente usar.

[@joaobibiano]

fala junior, vou ver se providencio isso ;)

[@joseliojjn]

Pergunta de leigo. é possível baixar extensões para um pen driver e depois instalar no editor de códigos de um computador sem internet?

[@joaobibiano]

Sim, é possível fazer o download de uma extensão do Visual Studio Code (VSCode) e instalá-la em uma máquina sem internet. Aqui estão os passos básicos que você pode seguir: 1. Conecte-se à internet em uma máquina que tenha o VSCode instalado. 2. Na barra lateral do VSCode, clique no ícone de extensões (pode ser o ícone de um cubo ou quatro quadrados). 3. Procure e selecione a extensão que você deseja baixar. 4. Clique no botão de instalação para baixar a extensão. 5. Depois que a extensão for baixada, encontre o diretório onde as extensões são armazenadas em seu sistema operacional. Normalmente, pode ser algo como: "C:\Users\\.vscode\extensions" no Windows ou "~/.vscode/extensions" no macOS/Linux. 6. Copie a pasta da extensão baixada para o seu pen drive. 7. Em seguida, vá para a máquina onde deseja instalar a extensão (sem conexão com a internet) e conecte o pen drive. 8. Navegue até o diretório de extensões do VSCode na máquina de destino e cole a pasta da extensão do pen drive dentro dessa pasta. 9. Reinicie o VSCode na máquina de destino. A extensão deve estar instalada e funcionando corretamente, mesmo sem uma conexão com a internet. No entanto, lembre-se de que as atualizações futuras da extensão precisarão ser feitas manualmente, copiando novamente a pasta atualizada para a máquina de destino, se necessário.

[@Juceliocoelho2023]

muito bommmmmmm

[@princenogueira1618]

Top

[@gmartins-dev]

@João Bibiano Vou evitar o CoPilot por enquanto, a impressão que me dá é "fazer autoescola num carro de câmbio automático" facilita mas limita o iniciante, num é? (que no caso ainda não consegue dirigir um carro manualmente)

[@viniciusalvesdaguirra3101]

👏👏

[@Renato.correia]

massa

[@darthlinox]

Muito importante e esclarecedora essas dicas e instruções. O link com as configurações está inativa ou com algum problema?

[@joaobibiano]

Opa Rodrigo! Valeu Corrigi o link ;)

[@semnick648]

pode me ajudar? quando salvo meu codigo nao identa automaticamente como seu prettier faz...

[@ALEXRUDSONMV]

existe alguma extensão wysiwyg para o visual studio code que eu possa editar o html visualmente? em tempo real, na página mesmo ou só dá pra editar no código e ir visualizando no live preview?

[@edugrubel]

Meu vscode, no live server, não roda nenhum php ! Só rodam os html ! Qual a solução ?

[@ABmaxdrive]

Tem alguma extensão que complete uma tag mas com o texto selecionado?

[@FernandoRicardoMeira]

Estou treinando como iniciante no Visual Studio Code. Estou treinando tabelas, link, e etc. Na hora de visualizar o material que eu fiz, eu clico em CTRL + SHIFT + P e ele abre lá em cima, o Open In Default Broswer, clicando nele, era pra visualizar o material feito. Mas acontece que desde hoje, ele não está abrindo a nova página para mim visualizar o material. Ontem estava normalmente. O que pode ser isso ? Eu consigo digitar na pagina, mas agora não consigo visualizar. Aguardo resposta e desde já agradeço !

[@joaobibiano]

fala Fernando, como é uma questão específica, pergunta lá na comunidade joaobibiano.com/discord

[@silvaneimartins2487]

Bom dia senhores, tutorial interessante, gostaria de tirar uma dúvida com a comunidade aqui, ultimamente meu VSCode está travando, tenho as extensões que referente a stack react. Mas mesmo assim continua travando. Alguém tem passado por isso também?

[@joaobibiano]

Olá! Entra na nossa comunidade para tentarmos te ajudar por lá joaobibiano.com/discord

[@Oculterous]

Vi que a Sync não está mais sendo mantida, tem uma sugestão de substituta?

[@joaobibiano]

Agora tem nativo dentro do vscode :)

[@konossam7977]

ola você conhece alguma extenção que da pra selecionar o html e css na pagina tipo quando vc usa o F12 no navegador o chrome tem uma opção de vc clicar no elemento ele destaca o codigo daquele elemento que vc clicou tipo inspacionar elemento. vc saber de alguma extançao ki faze isso no vs code ou outro software que faça. eu trabalho com design de land page e assim facilitaria focar mais no design

[@joaobibiano]

nos próprios elementos você pode copiar o html, botão direito no elemento pai, e te aparece a opção

[@geansouza94]

nao consigo edidar as configuracoes do json, como consigo obs: sou novato

[@joaobibiano]

Opa manda lá na comunidade que eu ajudo joaobibiano.com/discord

[@voceestacertoquiz]

Por favor me ajudem, meu VS CODE o comando ctrl+ alt + N imprimi a primeira vez no entanto se eu mudar o código e tentar imprimir ele imprimi o anterior antes de ser editado, para imprimir o código já editado tenho que apertar F5 e depois apertar ctrl+ alt + N, se eu editar o código outra vez ou criar um novo para imprimir tenho que apertar F5 de novo, e toda vez esse processo, já desinstalei e instalei e não muda, continua o mesmo esquema, não sei se é a atualização que esta fazendo isso, por favor me ajuda.

[@joaobibiano]

Cara, não entendi direito o que você quer dizer. Manda pra gente lá na comunidade joaobibiano.com/discord

[@rogevansouza]

Qual é esse tema azul?

[@joaobibiano]

Dracula!

[@JoaoCarvalho-vu1sd]

Alguém pode me ajudar, quando eu digito uma palavra em português no meu codigo html no vscode ela fica grifada de azul, como eu faço para tirar isso?

[@joaobibiano]

isso é provavelmente porque você instalou uma extensão de gramática de inglês, e ele não compreende a palavra, e marca assim.

[@JoaoCarvalho-vu1sd]

@@joaobibiano Não cara, eu conseguir ver qual a extensão estava atrapalhando e o nome dela é: Code Spell Checker, ai desinstalei kkkkk vlw

[@joaobibiano]

@@JoaoCarvalho-vu1sd exatamente o que eu disse :)

[@luiz1014]

alguem me ajuda, no html eu n consigo usar o code "id" e nem "class"

[@alexandrexisto9355]

Oi Luiz, especifica melhor o que houve

[@joaobibiano]

Caso queira, entra no discord e manda um print lá :) joaobibiano.com.br/discord

[@Oculterous]

Pq os portugueses quere que a gente se mude para ai nas vagas ?

[@joaobibiano]

A europa toda está com falta de mão de obra, já com relação ao trabalho presencial pode ser por causa do fuso horário, ou mesmo benefícios fiscais que as empresas tem