O Segredo de Como Escrever HTML 50% Mais Rápido no VS Code // Mão no Código #45

[@odonatojunior]

Uma coisa legal é o uso do texto pra encher linguiça Lorem Ipsum dentro do VS Code. Se você no editor digitar lorem15 ele vai fazer a sequência do lorem ipsum com 15 palavras. Caso digite lorem*15 ele fará 15 parágrafos. É bem útil quando é preciso estruturar o site com algum conteúdo dentro. Um forte abraço Casal CDF

[@felipalds]

ótima dica, vlw

[@thiagomelo9098]

tem alguma extensão?

[@JNeto28]

Eu usava o Lorem, mas não sabia dessas "opções". Obg pela dica.

[@_CaioCam]

Muito obrigado por essa dica de ouro. Rsrs... Quebrou um galhão!

[@davilucasmarques7921]

Ao invés de "html:5" também dá pra usar apenas "!" que funciona do mesmo jeito

[@codigofontetv]

Excelente!!! Mais rápido ainda. :D

[@eedinhoo]

quem chegou atrasado aqui pra dizer exatamente isso, dá like aê !!!

[@yaakov.v2615]

valeuu!!!

[@DouglasSantos-hg6dy]

Obrigado 😌 não tava indo do jeito deles... obrigaduu

[@joaopedrooliveira8966]

No meu parou de funcionar usando "!" :(

[@Diolinux]

E esse Linux Mint aí ? 👀🐧 Abraços pessoal, mais um belo vídeo! Likezão! :D

[@codigofontetv]

Estamos adorando ele! Experiência top pra desenvolvimento e também gravação. Grande abraço Dio!

[@ryahpalma]

@@thiagocarvalho1041 Farejador de penguim

[@FernandoLeonid]

Voltei o vídeo umas 3 vezes para ver onde estava o Mint e não achei....kkkkkkk

[@nomecriativo8433]

@@FernandoLeonid na decoração da janela do vscode, tá no estilo Linux Mint

[@FernandoLeonid]

@@nomecriativo8433 nossa, agora vejo igual aquele pixel queimado que nunca tinha visto....kkkkkkk

[@felipecosta5325]

O que mais acho legal é o amor de vocês pelo conteúdo do vídeo,parabéns pela dedicação...

[@codigofontetv]

Obrigado Felipe! Muito legal você ter feito essa avaliação da nossa performance no vídeo, tentamos sempre ser o mais positivo possível, até porque nós amamos o conteúdo!

[@marquesjr7116]

Para duplicar qualquer trecho do código basta utilizar o shift + alt + seta para baixo na quantidade de vezes que desejar.

[@pmdpaula]

Muito bom mesmo pessoal. Uma outra dica que não foi passada. Caso queira colocar um atributo no DOM diferente de classe ou id, coloca-se entre colchetes. e.g. div>input[placeholder="Nome"] Vai se transformar em Pode ser qq coisa, não apenas placeholder.

[@eudenes179]

ola teria como fazer esse mesmo atalhos mais criando um lista e ja colocar o que vai escrito dentre de cada item e palavras diferente?

[@pmdpaula]

@@eudenes179 Nativo acredito q não. Tem extensão para muita coisa, alguma pode fazer o que procura.

[@ytalogabriel3751]

Não sei se vocês já fizeram, mas os atalhos de praticidade do VSCode são incríveis, tipo o Ctrl + ; para comentar a linha, alt + seta para levar uma linha inteira pra cima ou baixo, alt + shift + seta baixo pra duplicar a linha... etc

[@CaioAugustoGTI]

Agiliza dms o processo, mas para quem está começando a programar, eu recomendo escrever tudo a mão, para ver como é a estrutura e entender, e saber organizar bem o código

[@codigofontetv]

É verdade Caio! escrever na unha também faz parte para assimilar o aprendizado. Até papel e caneta são muito úteis nesse processo.

[@danielabraao1045]

Esse casal é Demais Para duplicar qualquer trecho do código no vs code estando LINUX basta utilizar o comando é Crtrl + Shift + Alt + seta para baixo na quantidade de vezes que desejar. ( Eu geralmente vou arquivo -- preferencias -- atalhos do tecledo e altero para (Ctrl + Shift ) ajuda muito )

[@robertosoaresdefreitas]

Também uso a tecla " ! + Enter " dai ele abre a estrutura html. Parabéns Código Fonte TV! Mostrando todos os dias como podemos ser DEV com alegria e energia!!!

[@jorgehenrique2643]

não consigo usar essa função, como faço para ativar?

[@1LY4x8s96r]

@@jorgehenrique2643 Na ultima atualização eles deixaram algumas funções off como default. "emmet.triggerExpansionOnTab": true, Adiciona isso no settings.json que ai vai dá pra usar qualquer dica do video tambem. So escrever e depois apertar tab.

[@jorgehenrique2643]

@@1LY4x8s96r muito obrigado!

[@MrCjmt]

Conteúdo muito bom.Parabéns! Tem um atalho muito bom também ,para ajudar na criação de formulários: label*5>input[value][name][id]*1 (*5 e *1)São o número de labels e o número de inputs. Facilita muito. Espero ajudar. Um abraço!!

[@codigofontetv]

Excelente Cleber!!! Muito obrigado. 🤓

[@raphaelfloriano8938]

Ai papo reto, a ultima dica foi a cereja do bolo. Sensacional !!!

[@denysantos9012]

Não sabia dessa ultima

[@rocktech7063]

Outra dica interessante é selecionar algo e apertar CTRL + SHIFT + P > apertar Enter e digitar a TAG que você quer que seja aninhada, e apertar enter

[@ShekideePuuulll]

Boa noite, Você usa esse atalho no WIndows, Mac ou Linux? Aqui no meu Linux não deu certo...

[@Pedro200219]

@@ShekideePuuulll Selecione o conteúdo onde quer colocar a TAG e use o comando CTRL + SHIFT + P , vai abrir uma caixinha lá na parte de cima do VS code, não se esqueça de primeiro selecionar a opção "Emmet: wrap with abbreviation", depois é só escrever a TAG desejada e dar enter.

[@pmdpaula]

Um F1 faz o mesmo das 3 teclas indicadas

[@mifh11]

Pra quem está começando com html como eu isso é uma mão na roda!! obrigado pelas dicas!

[@renatamelomendonca]

6:30, Usa o "loremX" no lugar do "Texto", onde "X" será o número de palavras do respectivo parágrafo.

[@eusouthiagooliveira]

Quando você acha que não poderia se surpreender mais tem Vanessa com a mão no código, sensacional !

[@DevLJL]

Jesus Cristo, muito top as dicas, comecei ontem a estudar html, css, bootstrap com vscode e isso vai me ajudar mto. thxxxxxx

[@claudiakruger]

Super top. Aprendi essa semana também que tem a extensão HTML End tag labels que automaticamente comenta as tags.

[@AdrianaSilva-it1hj]

Gente que tutorial SENSACIONAL . sou iniciante e nossa ... como isso me ajudou

[@codigofontetv]

Que bom Adriana! Ficamos muito felizes.

[@emer_songs]

Primeiramente, muito obrigado pelo video! Segue minha contribuição: Eis que você quer mover um trecho de texto selecionado para dentro de uma tag... Simples! Pressione "ctrl + shift + p" e escreva "wrap with abbreviation" (calma, o Emmet vai completar pra você) + ENTER + e, agora sim, digite apenas o nome da tag e dê enter. Espero ter ajudado! Rodei pra achar isso e não paro mais de usar! ;)

[@marcelonovaesnovaes1604]

Óla, este vídeo e antigo, e duvido que vão ler meu comentário kkkk, mas vcs não tem ideia de como esta dica simples de apertar o TAB me ajudou, apesar de gostar muito do VS Code, estava quase desistindo dele, muito obrigado, continuem este ótimo trabalho que vcs fazem, dando a cada vídeo mais animo para nós, os iniciantes, sorte com o canal.

[@tiagoqueiroz9836]

No trabalho usamos o vs code como bloco de notas e usamos os snippets para agilizar o processo de escrita de alguns relatórios. Embora não seja para programar em si, é muito útil.

[@codigofontetv]

Bem interessante! Gostei dessa ideia. Por aqui eu já utilizei ele até pra escrever lista de comprar rsrsrs

[@ricardopouza4198]

Adorei o /c pra já fazer a TAG comentada, esse não sabia

[@cesarfiorio9607]

Melhor video que ja viu na minha vidaaaaaaa

[@cibelemagalhaes7882]

Uhuuullll que top esse conteúdo! Grata!!!!!

[@lelezinhodamamae]

Iniciando na área e codando com emmet abreviate...mto agradecida!

[@DanielPabloSheng]

Nossa, agora, achei interessante, eu meio que detesto html, isto aí pode facilitar minha vida. Obrigado.

[@100willsilva]

Já estou compartilhando pra todos meu amigos de programação. Isso é um vídeo de utilidade pública. Parabéns!

[@MarceloFDias]

top. pra quem é novo em html, como eu, num tem atalhos melhores !!! show.

[@rbmdesenvolvimento]

Vocês são muito TOP!

[@messiasjan2008]

Nunca usei o VS code. Fiquei curioso. Vou baixar! Excelente dica! Façam mais sobre JS! Obrigado! Parabéns pelo excelente canal!

[@leandrodener6174]

melhor abandonar o bloco de notas lek hsuahsuahsuash

[@MrCHJack]

SUPREMO DEMAIS Nossa mano, além de vocês serem apaixonados vocês também são brabos demais Céloko

[@codigofontetv]

Muito obrigado pelo carinho Charles!!!

[@leandrolopesleal26]

A Cara de alegria do Gabriel hahaha, gente adoro vcs, obrigaduuu!!!

[@douglasmoreira4148]

Nossa amei o vídeo, veio em hora perfeita pra mim, estou estou front agora, isso vai agilizar muito o processo todo, Deus abençoe

[@ferreirace2005]

Gente adorei, mais um vídeo sensacional, vcs são nota 1000. Obs: não é querendo ser chato e já sendo, mas o óculos dela fica com reflexo, e mal a gente consegue ver os olhos dela.

[@cimentocaue]

Sei lá, eu venho aqui a maioria das vezes pelo conteúdo que é ensinado, mas vocês são tão simpáticos! que eu assistiria até conteúdo de montagem de móveis kkkkk

[@codigofontetv]

Kkkk muito obrigado pelo carinho! Estamos casados há 19 anos, imagine a quantidade de móveis que já montamos juntos? Podemos dizer que somos especialistas nisso também. 😁😁😁

[@wilrocha]

Pra mim o VS Code é o melhor editor já lançado nos últimos tempos. Não consigo utilizar outro para trabalhar com frontend e em alguns casos, backend Excelente vídeo, parabéns

[@Humor1735]

Poxa que legal, estou fazendo um curso front end e estou no HTML, dicas muito úteis, agilizam o código!!! Obrigado

[@renarfreitas]

Agora eu entendi o trocadilho!! "Mão no código" == "Mão na roda!" Hahaha, muito bom. mais um ótimo vídeo.

[@81jlgregorio]

Que legal, não conhecia esse lance da iteração e dos comentários. Excelente vídeo! Vou recomendar aos meus alunos. Obrigado!

[@JotaCarvalho7]

Não lembrava como criar várias listas com um único comando, pesquisei muito na net e não achei nada, porém, achei esse video que me ajudou no que eu precisava e ainda me fez lembrar de várias outras coisas! Valeu time do #codigofonte

[@ricardoelias7143]

Nossa que super rápido e bacana eu adorei super prático facilitar muito vcs são top

[@andrebomfim1550]

Mano do céu que foda, meu celebro deu um "boom" aqui, muito bom. Parabéns.

[@wellingtonr3384]

Pode usar o atalho de envelopar: selecionando uma parte do documento que queira inserir alguma tag ou até mesmo usar estes atalhos que ensinaram: ctrl+shift+p da enter e digitar tags.

[@eudenes179]

nao aparece o envelopar pra mim , como faço pra caher ele

[@viniciusbatista9666]

Essa parada de comentário já agregou pra mim, desse eu não sabia.. heheh.. Belas dicas casal.

[@brandmek]

Caramba! Adorei, vcs são muito fera! A única coisa q eu já sabia, q é diferente do q vcs ensinaram é o macete de criar a estrutura do html5. Se vc digitar o uma vez o símbolo de esclamação ' ! ' ( sem aspas), aguardar 1 segundo e selecionar a esclamação única, vc também tem a estrutura montada de html5. Abraços para o casal mais lindo de programação do KZbin!!

[@edsoncarlos82]

Todos os seus vídeos são ótimos! Embora eu sabia de muitos comandos que aumentavam a nossa produtividade, sempre há como agregar. E assim foi o que fizeram neste vídeo sensacional! A grande novidade foi o id dinâmico e o último e extenso comando onde ele comenta o fechamento de cada tag. Legal ver a Vanessa digitando no Mão no Código! Acho que foi a primeira vez que vi. Amo vocês! Abração!

[@mairarocha7426]

Amei demais esse vídeo, vou levar pra vida, ganho de produtividade absurdo que nunca imaginei! Obrigada mesmo!

[@gesseferreira7194]

Muito bom. Grato por expor esses conhecimentos.

[@yuminstallnmap1623]

Uso o Emmet desde o Sublime text. Mil anos atrás. Acho q o Emmet se chamava “zen” naquela época. Depois mudou de nome. Enfim. Hoje uso o Emmet no Atom. Ja usei tbm no notepad++. Nao sei pq mas nao me adequo ao VSCode. Sou das antigas... mas o Emmet tem pra todas as IDE’s da atualidade

[@louvairlima108]

Muito legal, estou conhecendo o Vscode e estou gostando muito. Abs

[@josealysson2166]

nossa eu tô aprendendo html e não sabia desse macete, vai me ajudar muito, obrigado cdfs

[@codigofontetv]

Excelente Jose! Vai ajudar com certeza. :D

[@Elite4_DennysFlow]

caraca q top essas dicas !! Vlw vou praticar

[@ataideti]

Já tinha visto alguns vídeos, não virei seguidor, esse vídeo, cliquei na hora para ser seguidor. Parabéns pelo conteúdo !

[@emersonpessoa05_10]

Me divirto muito com a Vanessa. Ela é muito engraçada!!!!

[@universoquiz4u]

Muito obrigado, eu já sabia bastante porém, com esse vídeo eu aprendi muito mais.

[@mmcrocci]

Eu amo a extensão o Tabnine, ele adivinha pensando, kkkkkkk instale e confira!

[@skylucacius8463]

uso também, é excelente

[@anthonimathias8500]

Muito boa essa dica eu já sabia disso mas não tinha visto nenhum vídeo na internet

[@roddmachado]

Muito boa as dicas, parabéns e sucesso!

[@mus.igorfranco]

Muito bom. Fiquei feliz pois funcionou no PhpStorm também.

[@edevilsonmendesdasilva1303]

Casal top, sempre com conteúdo e dicas maravilhosas, parabéns e que Deus os abençoe!

[@codigofontetv]

Muito obrigado 😊

[@augustoeu8862]

Muito obrigado, me ajudou muito. Parabéns ao casal.

[@JoelsonMedeiros]

Essas dicas de aninhar tags são tão lindas que deveriam estar na cédula de 100 reais

[@afranio.garcia]

Tbm tem a parte de cobrir todo um texto selecionado com um tag. Sem precisar abrir e fechar varias vezes. alt+w em texto selecionado.

[@pedrovictorsaraiva1125]

Tenho que dar os parabéns pra vcs, ajudaram demais seloko

[@jrnalves]

Ultimamente tenho utilizado o tabnine.. uma extensão que usa IA para te sugerir trechos de código, de acordo com o que você tá criando.

[@codigofontetv]

Conhecemos! Muito interessante.

[@tiagovilanova8698]

Parabéns! Gostei!

[@rotognin]

Show de bola Cdfs! O vscode tá bem animal mesmo. As extensões que me encantaram foram: php debug e mysql, para consultar o banco dentro do próprio vscode. Tá bem legal. Ainda não consegui migrar pra ele ao editar os programas em cobol, pois o notepad++ funciona mais rápido e simples. Abraço

[@gabrielrochaleite4216]

melhor video que ja vi ate hoje

[@jonasvalereo239]

Show de bola, gostei, muito boa dica , valeu obrigado

[@dayanesantos5331]

gente de verdade, vocês não querem ser meus professores? aprendi mais nesse vídeo do que no semestre todo da faculdade

[@lobotonigga]

Qual faculdade vc faz ?

[@tonyribeiro55]

Show de bola, muito massa mesmo, parabéns!!

[@eduardomunareto]

Baita vídeo, bom trabalho. Obrigado pela força

[@andrepereiraalves8029]

Muito legal! Com certeza agiliza o processo .

[@andjeckson]

*Mt boa, estas dica eu testei no SPCK Editor (Android) também funcionou.*

[@Marujhin]

Nossa, como eu queria aprender isso. Valeuzão!!!

[@thiagocostapereira8560]

Algo que gosto muito de usar é copiar e colar linhas com um único clique. Basta selecionar as linhas e clicar em Shift+Alt+cima(para colar acima) ou +baixo(para colar abaixo).

[@misaelcostahomem7999]

Ultra dicas! Fera! Vlw casal!

[@hemerson327]

Mais uma dica, como divs são muuuito utilizadas, o Emmet utiliza ela como padrão e com isso caso você queira adicionar uma classe, id ou qualquer outro atributo, você pode, ao invés de escrever: div.classe#id Escrever: .classe#id Tendo o mesmo resultado.

[@gabrielmoreira-htmlcssjsph656]

eu uso só ( div.nomedaid )e dou enter . sem aspas.

[@lyrabruno1]

Obrigado, acompanho todos os vídeos. Abraços de Garanhuns-PE.

[@isaacl4094]

Incrível de vdd, amei esse vídeo, mais tempo pra poder ver seus vídeos kkkk

[@TheVictorcor]

Amei! Parabéns pelo conteúdo!

[@aledepaulaaa]

Que diga fodaaaaaaaaaaaa!! isso me ajudou demais Valeu pessoal, parabéns pelo vídeo

[@marcelobitencourt3438]

Que vídeo bacana! muita dica boa! Obrigado casal CDF!

[@LucasCoutinho]

Gostei do novo formato de vídeo, bem mais soltos :) Sucesso!

[@joellisfsantana]

Ótimo conteúdo, muito obrigado.

[@TalesCembraneliDantas]

Uma dica muito importante é direto no console, se já estiver dentro da pasta q irá fazer o projeto digite "code ." q vc já abre o VS code com a pasta de projeto selecionada

[@leandro-mana]

Zen Coding é demais, ajuda muito mesmo

[@VictorRockss]

Uso há um tempo o VS code e não sabia desses truques kkk Valeu mesmo Ces sao os melhores haha

[@mouravocal]

Eu usava esses Emmets mas não sabia algumas partes do final, muito bom! Todo vídeo ando mais alguns passos pra frente, muito obrigado 😁🤘🏻

[@brennowarleymartins7189]

Parabéns pelo vídeo, realmente vai agilizar muitos projetos!

[@codigofontetv]

Que legal que ajudou Brenno!!! Grande abraço!

[@caiooliveira5183]

Pra mim a melhor função do vscode é a criação de snippets customizados para cada linguagem

[@amandacleto8396]

exibido kkkkkk

[@AutoEntusiastas094]

Shooowww demais

[@ProjetoAgathaEdu]

Lembrando que o Emmet funciona no Brackets, notepad++, Sublime, Atom, Eclipse etc

[@leopcsn]

O melhor vídeo de hoje.

[@PedroHenrique-vt6ud]

Parabéns para os conteúdos que vocês disponiblizam. Amo vocês, Deus abençoe sua familia!

[@f_alves]

Não conhecia, mas usava muito o Shift+Alt+Setas para copiar várias declarações...enfim, sempre tem um truque novo.

[@lucasgoncalves9652]

Muito bom o vídeo parabens, eu ainda uso um plugin para quando eu quiser renomear a tag, ele renomea a tag de abretura e de fechamento se ouver. O nome é Auto Rename Tag

[@kaiophillipe6004]

Já usava os emmets da vida a anos atrás

[@DiogoLScarmagnani]

Rapaz q dicas de ouro! kkk Muito obrigado.