Emmet: escreva HTML+CSS como um ninja

1. Apresentação do curso: Oi, aí. Sou Rich Armstrong. Sou designer, animador e programador. Eu tenho programado há mais de 10 anos, mas eu particularmente não gosto de escrever código. Escrevo código para fazer coisas. Quanto menos tempo eu passar codificando, melhor. Então, esta cláusula é sobre o uso do Emmet para acelerar a escrita de HTML e CSS. Se você implementar o que cobrimos nesta aula, você pode economizar dias ou semanas a cada ano. Isso é muito tempo. Vamos cobrir coisas como HTML e CSS abreviações, quebra de código, atalhos de teclado, passagem de código e algumas joias escondidas estranhas e maravilhosas que Emmet tem para oferecer. Emmet trabalha em todos os principais editores de código e até mesmo em lugares como CodePen e JSFiddle, escrever com Emmet é o próximo nível. Se ninjas realmente escreveram código, eles usam Emmet. Então, vamos entrar. 2. COMEÇANDO: Olá, estou super feliz por estares a ver. Eu estruturei esta aula em vídeos curtos para que você possa tentar por si mesmo após cada vídeo e para que você possa facilmente encontrar e assistir vídeos novamente. A classe é dividida nas seções a seguir. Ir indo, abreviaturas CSS, atalhos CSS, abreviaturas HTML, atalhos HTML, mais grandiosidade Emmet, produtividade com sublime e a seção final, conclusão. Na aula, farei tudo em texto sublime em um Mac, mas fornecerei atalhos e informações do Windows sempre que possível. 3. Teoria rápida: Aqui está a teoria direta de Emmet. Passo 1, escreva em HTML ou CSS abreviatura. Passo 2, expanda a abreviatura em HTML ou CSS totalmente formado. Passo 3, repita. Fazer isso várias vezes vai te poupar um monte de tempo. Então vamos entrar nisso. 4. Instale o Emmet: Precisamos instalar Emmet não editor de código para começar. Então visite o EMMET. Faça o download e siga as instruções dos editores de código IDEO. No próximo vídeo, vou mostrar-lhe como instalar Emmet no Sublime Text. Além disso, Emmet funciona e editores de código on-line como CodePen e JSFiddle se você quiser testar pontos, expansão de abreviação. 5. Instalação do Emmet no Sublime: Neste vídeo, eu vou mostrar como instalar Emmet em Sublime Text em um Mac. Há várias maneiras de fazer isso, mas vou te mostrar uma maneira muito fácil. Então você vai para as ferramentas e nós vamos instalar o controle de pacotes, que nos permite instalar coisas da Internet muito facilmente. Vou clicar em instalar o controle de pacote, e depois de um tempo, devo receber uma caixa de diálogo de confirmação dizendo que ele está instalado. Agora, eu posso ir para as ferramentas e usar meus pellets de comando, ou eu posso pressionar o comando Shift P, e isso traz minha paleta de comando. Esta é uma ferramenta de texto Sublime muito poderosa. Em seguida, vou digitar, instalar. Eu poderia digitar pacote de controle de pacote instalar pacote, mas eu posso apenas digitar Instalar e, em seguida, pressionar return ou enter. A partir daqui, ele vai trazer uma lista de pacotes que podemos instalar. Eu vou digitar um Emmet, então basta pressionar enter, e daqui ele vai instalar Emmet. Fantástico. Eu deveria ter um pouco de educação me dizendo que Emmet foi instalado. Posso fechar isso. Muito obrigado. Agora, vamos verificar se isso está funcionando. Então isso muda para HTML. Se eu digitar div e pressionar tab, lá vamos nós. Ela se expande. Fantástico. Está funcionando. 6. // ABREVIAÇÕES CSS: Deixe-me mostrar-lhe os conceitos básicos de usar Emmet para CSS muito rapidamente neste vídeo. A primeira coisa que eu preciso fazer é ter certeza de que a sintaxe do arquivo em que estou trabalhando é realmente CSS. Podemos ver a sintaxe do arquivo no canto inferior direito. Portanto, este arquivo é atualmente um texto simples. Posso clicar aqui para alterá-lo para CSS. Eu também posso alterá-lo usando a Paleta de Comando. Então eu poderia ir para Ferramentas, Command Pallet ou usar um atalho de teclado, Command Shift P, e eu poderia digitar o conjunto de sintaxe CSS. Poderíamos fazer o mesmo para HTML, definir sintaxe HTML. Podemos ir definir sintaxe CSS. Outra maneira é que poderíamos apenas salvar isso, então Command S, e podemos salvá-lo como style.css. Isso deve definir automaticamente a sintaxe para CSS. Assim que tivermos isso fora do caminho, podemos começar a escrever alguns CSS. Agora, vamos apenas escrever alguns CSS para uma tag de corpo e eu posso pressionar C, e Sublime automaticamente vem com um monte de opções. Eu posso pressionar Enter, e assim, isso é um pouco de imagem bem ali. Se não quisermos pressionar Enter, podemos simplesmente pressionar C e Tab, ou poderíamos pressionar C e Control E para expandir a abreviatura. Essas são três maneiras diferentes de realmente expandir abreviaturas. Mas podemos usar isso para qualquer regra que quisermos. Então, margem, vamos fazer isso. Que tal estofamento? Vamos fazer isso. E quanto ao fundo? Vamos fazer isso. Muito legal, certo? E quanto ao fundo? E quanto à fronteira ou à direita? E quanto ao border-top? Muito legal, certo? Que tal um raio de fronteira, brds? Radio-limite. Super legal, certo? Quero dizer, isto é uma coisa poderosa e é muito, muito fácil de usar. Assim, já tenho um monte de regras para a minha etiqueta corporal. 7. Abreviação com valores: Sabemos o básico, mas vamos começar a coisas mais avançadas. Pos um toque, posição: absoluto, tac, text-align: centro. Que tal m12, margem: 12 pixels. Que tal t100p? Tap, 100 por cento Isso é uma coisa maluca bem ali. Que tal C e FFO, cor? E quanto ao cr, tap, rgb? E quanto ao CRA? RGB com um canal alfa. Agora podemos ir algo como, 200 torneiras, 125 torneiras, 123 torneiras. Agora você pode colocar a opacidade. Isso aí é uma coisa maluca legal. E se quiséssemos fazer um pensionista BD1? Boarder1 pixel? Isso é ótimo. Que tal bd1-s, e então colocamos o valor da cor, ffo-tap-one pixel sólido com a cor. Confira isso. C de cor. Então colocamos o valor da cor, então ffo, que seria amarelo. Então, colocamos na guia 0.3. Ele coloca o valor rgba bem ali. Quero dizer, se você não pode ver como isso vai acelerar sua produtividade, eu não sei. Que tal algo como m, que será margem. Então colocamos em 12rem. Que tal p, e colocamos algo como 80em. Muito legal. Cara, isso é loucura. Este é apenas o início das abreviaturas CSS. Podemos fazer coisas loucas com cores, gradientes, fundos. Coisas incríveis. 8. O que é a abreviação?: Como sei qual é a abreviatura? Como é que conheço esse atalho? Eu tenho que aprender todos eles? Bem, o que é realmente legal é que há alguma sintaxe adequada como pausa, dois pontos, um para posição absoluta e, sublime pode vir acima com todo esse lixo. Só vou pressionar “escape”. Quando eu pressionar tabulação aqui, posição absoluta. Essa é a maneira correta de fazer isso, mas também podemos pausar um, assim, ou talvez até mesmo como PA, o que isso faria? Acolchoamento. Ok, mas p também faria estofamento. Interessante. O que realmente está acontecendo aqui é que Emmet usando essa coisa chamada pesquisa difusa, ele basicamente tenta adivinhar ou entender o que você está escrevendo, o que você está procurando. Se você não sabe o que é, digite, teste. Se eu quisesse fazer algo como um raio de fronteira, eu seria tipo, raio de fronteira ou algo assim. border-style, que pode ser uma boa. Eu não sei. E o BDRS, limite de raio. Está bem. E o BDR? O que é bdr? Direitos fronteiriços. É intuitivo, o que é muito legal. Às vezes eu não tenho idéia do que eu realmente preciso escrever, mas eu apenas escrevo e testo. No entanto, se você realmente precisa, há uma folha de truques on-line e há um monte de documentação emmet que você pode olhar, você pode ir assistir. Se você usar algo muito parecido com você está lidando com um monte de cor tipo de sintaxe ou planos de fundo ou gradientes, vá pesquisar como fazer isso super bem, e então mantê-lo em seu cérebro. Então você pode usá-lo como um profissional. 9. Gradientes: Uma das coisas mais legais que Emmet tem a oferecer é a sintaxe de gradiente. Isto é muito fixe. Você vai LG para gradiente linear e não se deixe enganar pelo Sublime. Sim, basta pressionar Escape, e então colchetes, e eles vão fornecer a direção. Vamos para a esquerda, e eles vão fornecer o ponto médio, que seria 10%. Você nem precisa colocar isso. A primeira cor, então poderíamos dizer F zero, zero para vermelho e, em seguida, preto zero, zero, zero no final. Então, vou expandi-lo. Whoa. Escreveu tudo isso para mim. Obrigado, Emmet. Você arrasa. Mas agora, você pode estar se perguntando, “Bem, isso colocou todos esses valores lá para mim, o que acontece se eu quiser mudá-los? Teria que trocá-los três vezes?” Não, veja isso. Vamos mudar isso para branco e você pressionar Tab ou Control E para expandir novamente, e isso muda tudo para você. Fantástico. Vamos para a linha de cima e talvez vamos tirar os 10%, pressionar Tab. Voilá. Incrível, certo? 10. Regras múltiplas: O que acontece se quisermos escrever todas as nossas regras ao mesmo tempo? Pausa A. Agora, eu não quero apenas expandir isso e escrever outro, eu quero escrever tudo uma vez. Podemos ir mais t 0 mais b, 0 mais o, 0 mais r 0 guia. É absoluto e está posicionado na parte superior, inferior, esquerda e direita tudo em zero. Também podemos fazer algo como M e podemos dizer 12 e também mais p, e podemos definir isso em oito e 12 por cento, tab, Voila. Agora, vou voltar para trás até ter a minha linha de posição aqui. Se eu quiser tudo isso em uma única linha porque é posição e todos esses valores se relacionam uns com os outros, eu posso colocar tubo S e depois expandir, e assim eu tenho todas essas regras que se relacionam um com o outro em uma linha. Essa é uma característica muito legal de sublime, a outra é fotos pontuadas únicas, que vamos começar mais tarde, mas esta é realmente útil. Neste caso, você tem pipe S e coloca tudo em uma única linha. Isso é muito legal, você pode fazer várias regras ao mesmo tempo e você pode colocar todas as suas regras em uma única linha. Super radical. 11. Informações extra: Digamos que queríamos um pouco mais de informação para as nossas regras. O que podemos fazer é colocar um plus após uma abreviação, então bg+, expanda isso, e de repente você tem tudo o que precisa para sua regra de fundo. Aqui poderíamos escrever algo como ffo, pressionar Tab para chegar ao url, e poderíamos fornecer um valor, pressionar Tabs, definir sua posição x, então é 12 pixels, Tab novamente, e poderíamos definir 40 pixels e “No Repeat”. Fantástico muito legal. E quanto à fronteira? bg+ guia borda ele muda para 10 pixels, guia sólido. Que tal tabulação? E podemos mudar isso para vermelho novamente. Ou acho que pode ser amarelo. Isso é muito legal sobre obter mais informações em suas regras, você só tem que colocar um plus depois delas. Obviamente, alguns destes não funcionam. C plus, nada muito mais lá, mas coisas como talvez f+ o que seria isso? fonte. Lá vamos nós. Muito legal, certo? 12. Os prefixos vendor: Vamos contar um pouco mais sobre prefixos de fornecedor. A maioria das propriedades de tempo que precisam de prefixos de fornecedor as aplicarão pelo Emmet. Então TRF transformar, Eu só vou pressionar escape aqui. Então você vê que não é sublime fazer é coisa sorrateira. Tab, olha para tudo isso. Fantástico podemos dizer, todos digitando sempre que quisermos lá. E o TRS? Basta pressionar a transição de tabulação, ok, ou o que quisermos lá, desfazer, e sobre sombra de texto? Sombra de texto da guia. Então, o Emmet não prefixa isso por si só. Então, o que queremos fazer aqui é adicionar um traço antes da mão, e então pressionar, expandir. Assim como que nenhum prefixo tudo sobre propriedades para nós. Muito obrigado. Então, poderíamos escrever algo como os deslocamentos H são 12 pixels guia, desfoque quantidades. Tudo bem, você pega a foto. Então desfaça. Se quiséssemos apenas mostrar um tipo de prefixo de fornecedor, vamos digitar o prefixo de fornecedor do traço W, e então poderíamos expandir, e eu iria apenas adicionar kit web. Se quiséssemos adicionar Opera, faríamos assim. Muito legal. Assim, podemos começar a adicionar prefixos de fornecedor às nossas regras. O que é ótimo é que se você estiver escrevendo Sass or Less, que são compilados em CSS, ele não adiciona prefixos de fornecedor automaticamente. Isso torna a leitura e escrita de seu código muito mais fácil e seu compilador deve lidar com os prefixos por si mesmos. 13. Abreviações legais: Haverá um monte de abreviaturas e eu não vou mostrá-las todas para você. Você tem que escolher quais você quer aprender, quais você quer pesquisar, mas há um casal que eu acho incrível. Uma delas é a declaração importante, então veja isso. Nós vamos P para preenchimento 12 pixels e bang. Nós apenas expandimos isso e obtemos uma declaração importante bem ali, ou talvez tenhamos M e só queremos ter certeza de que é importante e então podemos inserir o valor. Podemos dizer 80 pixels. Muito legal, certo? E se quisermos fazer uma escala de transformação muito rápida, T-R, F para transformar e, em seguida, dois pontos e S, e pressionamos tab e assim, podemos dimensionar o valor x e y. Eu estou indo para ir 1.2 e eu posso pressionar tabulação e eu posso ir em 1.2, mas isso é o mesmo, então eu vou apenas remover tudo e lá vamos nós. Temos uma propriedade de escala de transformação prefixada de fornecedor. A seguir é algo que eu realmente não gosto fazer e que está digitando uma nova família de fontes. Podemos ir em F, expandir isso e voilá, temos uma cara de fonte, mas isso não é muito útil. Ainda podemos guia entre a família de fontes e o URL de origem, mas se eu colocar mais depois disso e depois expandi-lo, uau, verifique isso. Agora tenho uma declaração completa sobre font-face. Eu posso digitar a família de fontes, minha família de fontes legal e, em seguida, eu pressionar tab e eu posso alterar o nome do arquivo agora para minha fonte e pressione Tab, font-style, font-weight. Isso é super legal. A seguir é algo que eu também não gosto de fazer muito, e esses são os meus quadros-chave. Na K-F, expanda. Uau. Olhe para isso. Escreveu tudo isso para nós. Eu vou chamar isso de meus quadros de tecla de fade pressione tab para que eu possa mudar o meu de valor para zero por cento se eu quiser, e então eu posso pressionar tabulação e digitar opacidade e defini-lo para zero, pressione tab vai para dois. Agora eu posso definir isso para 100 por cento se eu quiser. Eu vou então pressionar tabulação novamente e digite op e expandir isso e, em seguida, eu vou configurá-lo para um. Assim, temos toda a configuração do quadro chave completa. Nossa animação de desvanecimento. 14. // ATALHOS CSS: Nós cobrimos as abreviaturas de CSS, mas há um monte de coisas que Emmet nos oferece, especialmente em Sublime Text. Vamos cobrir estes a seguir. 15. Incrementar e decrementar número: Uma das grandes coisas sobre Emits é a funcionalidade adicional que ele oferece. Digamos que fizemos um pouco de CSS aqui, dissemos 12 pixels, e eu só quero editar isso muito rapidamente. Vou pressionar Alt e usar as setas do teclado para subir ou descer. Ele incrementa em 0,1 pixels. Fantástico. Agora, se eu pressionar Command e Alt e subir e descer, ele aumentará em 10 pixels, e se eu pressionar Control para cima ou para baixo, você verá que isso não funciona. O que precisamos fazer é ir para Preferências do Sistema e ir para Mission Control, e vamos mudar Mission Control para off e Application Windows para off e agora, quando voltarmos para o texto Sublime e pressionar Control para cima ou para baixo, e vamos mudar Mission Control para off e Application Windows para off e agora, quando voltarmos para o texto Sublime e pressionar Control para cima ou para baixo, incrementa por um. Muito fixe. Não precisamos digitar na parte superior do teclado, podemos usar atalhos de teclado. Isso também funciona em HTML. 16. Matemática instantânea: Agora, como desenvolvedores de HTML e CSS, temos que fazer um monte de matemática, mas às vezes nosso cérebro recebe um atributo não tão bom em matemática. As imagens são muito legais. Se tivermos algo como largura ou altura, podemos fazer alguns cálculos na hora. 100 menos 47, Comando Shift Y 53, assim. Que tal mais 1.278? Eu não sei se você sabe isso fora de mão. Turno de comando Y Voila. E que tal multiplicado por dois turnos de comando Y Voila? E quanto a menos 349? Turno de Comando Y. Muito legal. E quanto a menos 2.000? Isso deve ser bem fácil. Comando Shift Y, muito legal. Basta adicionar pixels depois disso. Muito fixe. Só fazendo matemática em tempo real. 17. Refletir o valor do CSS: Digamos que temos algumas propriedades prefixadas de fornecedor aqui e mudamos isso para 0.4 e, em seguida, pressionamos “Ctrl + E” para expandir e nada acontece porque isso acontece às vezes. O que vamos fazer? Pensei que isto era para ser produtivo. Agora tenho que mudar quatro linhas de código. Acalme-se. Tudo o que você precisa pressionar é “Cmd + Shift + R” e reflete os valores. Olhe para isso. Veja, você pode até mudar isso para, digamos, dez. Cmd + Shift + R. Bang. Incrível. 18. Alternar comentários: Então, ainda não abordamos os comentários. Portanto, normalmente no texto de sublinha, você pressiona o comando e a barra. Assim, sua linha é comentada, mas às vezes os comentários não funcionam muito bem. Então, com Emmet, o que podemos fazer é ir Alt, Shift, barra e um conjunto de comentários 2. Muitas vezes, um conjunto comum é melhor, é mais inteligente. Então, assim, você pode comentar seu código com Emmet ou você pode apenas usar o comentário de sublinha padrão. 19. Pré-processadores CSS: Faz o trabalho de emitem para pré-processadores como Less e Sass, A resposta é sim. Se você não sabe o que é um pré-processador, não se preocupe, você pode simplesmente pular este vídeo. Vou entrar em outra classe, outro tutorial sobre o que são pré-processadores se você sabe, confira isso. Vou instalar rapidamente o Sass. Eu vou para a minha paleta de comandos e eu vou dizer instalar pacote, procurar SAS. Vamos apenas instalar isso. Fantástico. Eu vou então definir minha sintaxe para SAS e, em seguida, eu vou estilizar um elemento filho. Podemos dizer, vamos estilo UC controle E. Assim como, podemos usar emit para estilizar nossas folhas de estilo Sass and Less. 20. // ABREVIAÇÕES HTML: Então nós cobrimos o uso de emmets para acelerar rapidamente a escrita CSS, agora vai ser a mesma coisa para HTML. A primeira coisa que preciso fazer é alterar a sintaxe do meu arquivo. Então eu posso pressionar Command Shift P em Sublime e digitar HTML e definir a sintaxe assim. Ou eu posso clicar em texto sem formatação aqui e selecionar HTML. Ou a maneira final que eu posso fazer isso é apenas ir comando S. Nesta pasta eu posso salvá-lo como index.html. Assim, minha sintaxe do conjunto é HTML. Agora, usar emmets para escrever HTML é muito parecido com escrever CSS. Então, se eu digitar p e eu expandir p, Control E ou tab, ele cria uma tag de parágrafo. Se eu fizer div e eu pressionar tabulação, ele, expande para um div. Se eu quisesse criar uma div com uma classe, eu poderia fazer isso. alguma classe, muito parecido com CSS. Quando eu expiro isso, torna-se um div com uma classe de alguma classe. A mesma coisa com uma identificação, my-cool-div, veja isso. Eu também posso fazer a mesma coisa com uma extensão. Por exemplo. Algum tempo frio. Isso é muito, muito poderoso. O que também é muito legal é que dentro de um ul, por exemplo, se eu pressionar enter e eu digitar li, o que também é muito legal. Se eu tivesse que digitar em alguma classe, isso normalmente se tornaria um div, mas porque está dentro de um ul, torna-se um li. Quando eu expiro isso, torna-se um li com uma classe de alguma classe, super poderoso, super legal. Isso é apenas o básico de usar emmet dentro do HTML. Ainda há muito para cobrir, mas é o suficiente para te animar. 21. Vários cursos e IDs: Assim como em nossos arquivos CSS, podemos ter elementos com várias classes e um id. Se quiséssemos escrever um ul com um monte de classes em alguma classe.red.amazing ul, e expandimos isso. Você vai ver que ele recebe essas três classes aplicadas a ele. Se quisermos, em seguida, criar uma div com um id, com um monte de classes em. Poderíamos escrever algo assim. Nós não temos que escrever div, mas eu vou fazê-lo de qualquer maneira div e eu vou colocar algumas aulas em. Então eu também vou colocar uma identificação nele. Algo como cabeçalho. Certo, isso é muito legal. Em uma linha, adicionamos um id, adicionamos três classes diferentes, e não escrevemos muito. Fantástico. 22. Tipos de tags: Alguns elementos que escrevemos em HTML têm um atributo chamado tipo. Então você reconhece isso de uma entrada. Então, se formos expandir isso, o tipo será texto. Agora, você também pode ter um tipo de caixa de seleção ou um tipo de senha, por exemplo. Então, uma maneira fácil de fazer isso com HTML é ir entrada, dois pontos e senha. Quando você expande isso, você obtém o tipo de senha e também lhe dá um nome e atributos de ID. Isto é muito fixe. Então você pode digitar o nome aqui, pressionar “Tab” e, em seguida, digite o ID. É muito, muito útil. Você também pode dizer entrada, dois-pontos e caixa de seleção. Assim, o tipo é caixa de seleção. Há um nome e uma identificação. Fantástico. Você também pode fazer isso com uma tag, que por padrão lhe dá um HREF também. Mas, se você tivesse que digitar o link após os dois pontos, ele lhe daria um endereço HTTP ou se você tivesse que digitar o e-mail e expandir isso, agora podemos ter um e-mail para link, que é ótimo se você quiser clicar em um link e ele abre um e-mail cliente. 23. Atributos HTML: Agora, e quanto aos atributos? Bem, vimos que a tag a quando expandida tem o atributo href, mas e outros atributos? Só com uma tag, e o atributo de destino? Um emmet isto é muito fácil. Há essas chaves quadradas que podemos então escrever alvo é igual a sublinhado em branco, assim como fazemos no CSS. Quando expandimos isso, temos um href e um alvo. Às vezes pode não ser tão rápido, mas certamente é o mesmo que CSS. Às vezes, você pode até copiar do arquivo CSS para o arquivo HTML. Fantástico. Se quiséssemos ter vários atributos, talvez como TD, e dentro do nosso TD temos um colspan, e dizemos colspan é igual a três, e então nosso rowspan é igual a dois. Então, se quisermos, podemos até colocar um título lá e dizer: “Ei aí.” Então, quando expandimos isso, assim, obtemos todos esses atributos todos em um elemento. Fantástico, muito legal, muito útil, e muito parecido com CSS. 24. Crianças, multiplicação e números incrementais: Quão produtivos Emmet realmente nos torna? Quero dizer, se quiséssemos escrever 1.000 elementos de itens da lista, como faríamos isso? Baseado no que aprendemos até agora, poderíamos escrever ul, expandir isso, pressionar “Enter” li, expandir isso, escrever primeiro elem e então poderíamos ir li, expandir isso. Isso ainda leva um pouco de tempo, eu vou apagar isso. Agora olhe para isso, ul e então eu vou fazer um maior que li, então eu vou expandir isso. Primeiro de tudo, estamos escrevendo os elementos de um pai e os elementos filho. Agora, vamos desfazer isso e multiplicar isso por 10. Uau, olhe isso. Temos 10 elementos de item de lista. Incrível. Poderíamos criar 100 ou 1.000. Agora, o que podemos fazer é dizer, elem 1, pressionamos “Tab” agora e ele vai automaticamente para o conteúdo do item da lista número 2. Podemos ir elem 2, e assim por diante. Isso é muito legal. Vamos desfazer isso um pouco. Agora, veja isso. Dentro de cada item da lista, poderíamos então colocar uma extensão com uma tag âncora. Bam, olha isso, quão incrível é isso? Agora podemos preencher o href. Se quisermos ir HTTP assim e digitar taptapkaboom.com. Pressione “Tab” aqui e, em seguida, vai para o conteúdo do um que podemos dizer Website, pressione “A” ele vai para o próximo href. Isto é incrível. Virando legal. Agora, este é mesmo o próximo nível acima. Vamos apenas recuar um pouco aqui. Temos agora URL, vou criar 10 elementos de item de lista lá. Mas agora quero encerrar isso. Então eu vou para li.some-class.some-, e então ele vai colocar um número depois disso. Quando eu expandir isso, olhe para aquilo. Ele só colocou um monte de números lá para mim, eu não tenho que escrevê-los. Confira isso. Usando este cifrão, podemos realmente colocar em números. Podemos colocar três números se quisermos, ou dois, ou quatro, ou o que você quiser, ou podemos até ir para trás. Confira isso. Em negativo, e então quando expandimos isso, ele vai de cima para baixo. Ou podemos até dizer cinco negativos e assim vai para 14 para cinco. Se não quiséssemos começar do número superior, poderíamos remover esse negativo e ir de cinco, e quando expandimos isso, vai de cinco para 14. Isso aí é uma coisa maluca. Se a sua mente não está impressionada com isso e você não vê como pode ser mais produtivo usando Emmet, eu não sei o que há de errado com você. 25. Irmãos e grupos: Nós cobrimos elementos criança agora e sobre elementos irmãos? Se tivéssemos uma div, e tivéssemos “criança” assim, como eu conseguiria “criança 2”? Se eu tivesse que ir “.child2" expandir isso. “ Child2" estaria dentro de “criança1" Eu quero que “criança2" esteja ao lado de “criança1" Eu quero que eles sejam irmãos. Como é que fazemos isto? Bem, em vez de usar o símbolo maior que, nós apenas usamos o símbolo mais. Então, quando expandimos isso, temos “child 1" e “child2”. Mas agora o que acontece se “criança 1" tem um monte de elementos dentro disso? Então talvez haja um 'ul' e há um 'li' e há três elementos lá dentro, e eu quero um 'a tag' dentro desses três elementos e eu carrego “Tab”. Bem, o que aconteceu? Não quero que o meu “filho” seja repetido três vezes, só queria que este fosse um “filho”. O que precisamos fazer aqui é, onde começa aqui, e dizer “child1”, começamos com um suporte, e logo antes do plus, fechamos o colchete e dizemos, que é um grupo. Podíamos colocar um grupo na turma “Child2", mas não precisamos. No final da linha nós expandimos isso, e assim, temos “child 1" com seu conteúdo, que é incrível e temos “child 2" sem conteúdo, que é exatamente o que queríamos. Agora podemos começar a escrever nosso HTML, HTTP, e então pressionamos “Tab” e assim por diante. Incrível. 26. Escalar: Outra maneira de trabalhar com irmãos e filhos e hierarquia é usar o método de escalada. Se temos um div e dentro deste div, temos um elemento com uma classe de C1. Dentro desse elemento, temos outro elemento com uma classe de C2 e dentro desse, temos outro para a classe de C3. Dentro desse, temos outro com uma classe de C4. Quando expandimos isso, temos uma hierarquia muito agradável acontecendo. Mas o que acontece se eu não quiser que meu elemento de classe C4 esteja lá? Bem, o que eu posso fazer aqui é em vez de usar este símbolo maior que, eu posso usar este pequeno símbolo de acento, modo que quando eu pressionar expandir, você verá que o elemento com uma classe de C4 está agora sentado ao lado da classe de C2. Se eu desfizer isso e eu colocar outro desses lá e eu expandir, você verá que a classe C4 está agora sentada em C1. É basicamente dizer, vamos subir um nível e subir um nível, e hey, se formos mesmo fazer outro e expandir isso, seria um irmão para a tag div inicial. Muito legal, certo. 27. Texto HTML: A próxima coisa é, e quanto ao conteúdo? E quanto ao texto? Se tivermos que escrever uma tag e expandir isso, teríamos que escrever o h ref e, em seguida, tab e, em seguida, escrever o conteúdo. Mas há uma maneira diferente de o fazer. Então, A, colocamos essas chaves dentro das chaves, então dizemos conteúdo aqui, e então expandimos isso e o conteúdo vai lá. Agora, se quisermos dizer conteúdo aqui, e vamos fazer algo assim, multiplicado por 10, nós expandimos que o conteúdo aqui é um, todo o caminho para 10. Isso é incrível. Assim, você pode escrever seu conteúdo dentro de suas abreviaturas. Fantástico. 28. Lorem Ipsum: Talvez o seu trabalho seja criar este belo site, mas ele ainda não tem nenhum conteúdo, que deve tocar alguns sinos de alarme porque como você pode realmente projetar um site ou desenvolver o site não há conteúdo? Mas às vezes você tem que fazer isso, e às vezes é ótimo fazer isso. Mas você ainda não tem nenhum conteúdo. Então, em HTML, como podemos gerar algum Lorem ipsum? Bem, esses sites, plug-ins e todo tipo de coisas, mas veja isso. Lorem200, expanda voilà, um monte de Lorem ipsum. E quanto ao lorem10? Só um pouco de Lorem ipsum. Que tal lorem2 Controle E, Lorem ipsum, apenas duas palavras. Então, assim, você pode gerar um monte de lixo. Ele também funciona em arquivos CSS, mas eu uso principalmente isso dentro de um arquivo HTML. É incrível. 29. Abreviações desconhecidas: Até agora tem sido agradável, tem havido muito pequenos erros, as coisas têm corrido bem. Mas o que acontece se você escrever uma abreviatura inteira e tentar expandi-la e nada funcionar? Bem, vamos tentar isto. Ei, nós temos esse elemento legal com a classe de “hey” e queremos expandi-lo. Então, nós tocamos “tab” e não está expandindo é apenas realmente usando tab como ele deve ser usado. Então nós os forçamos com “Control E”, e então percebemos que, Oh, na verdade isso não é uma classe e isso criou um “hey” elementos que é um pouco estranho. Se as coisas não funcionarem com guia, há uma boa chance de que haja um erro. Talvez você tenha escrito um atributo um pouco estranhamente, você perdeu uma citação, por exemplo, e você o expande e nada está funcionando ou mesmo seu controle não está funcionando. Há um problema. Conserte isso. Se você está usando algo como reagir e você tem, “SomeCoolComponent”, e você está pressionando tab e não está se expandindo, tudo bem. Basta pressionar “Control E”, e assim, você tem seus componentes personalizados. Se você pressionar “Command Shift” e citar exatamente assim, você pode obtê-lo em uma única tag. Vamos cobrir isso na próxima seção. Se você pressionar esse atalho novamente, “Command Shift” e aspas, você pode obter a tag de fechamento. Lá vamos nós. Isso é o que acontece se você cometer erros ou se você tentar expandir tag que não existe em HTML por padrão. 30. Abreviações favoritas: Há toneladas de abreviaturas que você pode aprender ou que você deve aprender ou que você pode querer aprender, mas se há algo que você particularmente faz frequentemente, vá pesquisá-lo, aprenda. Aqui está o site onde você pode encontrar todas as abreviaturas. Dito isto, vou mostrar-lhe alguns dos meus favoritos. Um dos meus favoritos é um:mail. Quando você expande, assim mesmo, diz “mailto”. Outra é a ligação. Quando você expande, ele só vai para “stylesheet”. Mas se você ir para o link, clique em CSS e você expandir isso, ele coloca seu arquivo CSS lá imediatamente. Muitas vezes meus arquivos CSS são chamados style.css. Isto tem fantástico. Agora o final é quando você tem que escrever sua etiqueta de documento e sua etiqueta de cabeça e sua etiqueta de corpo e todo esse tipo de coisa, o que é realmente frustrante. Bem, agora, você só escreve ponto de exclamação porque isso te deixa zangado. Eu não sei. Então você expande, e assim, tudo isso é escrito para você. São algumas das minhas favoritas, adoraria saber quais são as suas favoritas. 31. Nomenclatura BEM: Se você gosta de convenções de nomenclatura B-E-M ou BEM, então você vai adorar esse recurso. Se você não está em convenções de nomenclatura BEM ou você não tem idéia do que é, tudo bem, você pode simplesmente pular através. Farei uma aula sobre isso mais tarde. Mas usando um filtro Emmet, podemos adicionar todas as classes BEM que precisamos sem ter que fazer tanto trabalho. Confira isso. Se escrevermos conteúdo ponto bloco traço sublinhado grande e expandir isso, então controle E. Eu vou colocá-lo em padrão. Mas, se tivéssemos que fazer tubo BEM e este é um filtro, controle E. Verifique esse bloco de conteúdo, bloco de conteúdo grande. Vamos desfazer isso e vamos escrever em ponto sublinhado laranja e, em seguida, expandir esse bloco de conteúdo grande, bloco de conteúdo laranja agora são classes nesta div. Incrível. Vamos desfazer isso e dentro daqui, vamos colocar uma classe de avatar então, sublinhar, sublinhar avatar, e então expandir tudo isso. Então, desse jeito, aquela classe de avatar tem um bloco de conteúdo na frente. Ele adere às convenções de nomenclatura BEM. O que é muito doce. Isso na minha opinião é uma vitória dupla porque você está escrevendo um código que é realmente descritivo. Ele adere a alguma convenção e você está escrevendo rapidamente. 32. Juntando tudo: Com o EMMET, você pode escrever um site inteiro expandindo uma abreviatura, mas isso geralmente leva muito mais tempo do que vale a pena. Não se envolva em escrever abreviaturas longas e complexas. Escreva em pedaços gerenciáveis. O EMMET deve ser produtivo e não demorado. Se você praticar e você pode escrever CSS e HTML muito rapidamente, uma coisa que o EMMET não substitui é um bom planejamento. EMMET combinado com um bom planejamento é o caminho do verdadeiro ninja. Estou falando sério, é o caminho. 33. // ATALHOS HTML: Expandir abreviaturas não é tudo o que Emmet pode fazer, há um monte de outras coisas que ele pode fazer por você em seus arquivos HTML. A maioria deles exige que você aprenda um novo botão de atalho de teclado, mas estou dizendo que vale a pena. 34. As tags do equilíbrio: Se você tem muita hierarquia acontecendo ou seu código é bastante complexo, uma das melhores coisas que você pode fazer é equilibrar suas tags. Confira isso. Vou pressionar “Controle J”. Controle J novamente, e você verá que ele seleciona a tag de abertura e fechamento. Quando eu pressioná-lo novamente, ele vai para a área de conteúdo. Se eu pressionar “Control D”, ele vai continuar selecionando para fora. Controle D novamente, e você verá que ele seleciona as tags pai A e, em seguida, Control D, novamente, as tags pai li e assim por diante. Você verá aqui que ele seleciona o conteúdo entre a tag ul de abertura e fechamento. Controle D, ele seleciona as tags ul, Controle D, a mesma coisa, a mesma coisa. Quando eu pressionar “Control J” novamente, ele vai me levar para dentro até chegar direto ao ponto mais íntimo. É assim que equilibra o aparelho. No Sublime, você pode acessar isso se você esquecer o atalho de teclado através da sua paleta de controle, então Command Shift P e você apenas digita em equilíbrio. Lá vamos nós. Equilíbrio para dentro, equilíbrio para fora. Ele também oferece seus atalhos de teclado no lado direito. Você também pode acessar Ferramentas e Paletes de Comando se não souber o atalho de teclado para isso. Essa é uma maneira muito útil de navegar no seu código. É rápido, fácil, e muitas vezes me ajuda a evitar erros confusos e muito estranhos. 35. Tags split e join: Há momentos em que você precisa dividir ou participar de uma tag. Em reagir, por exemplo, se você está para escrever imagem e, em seguida, expandi-la, isso não seria uma tag de reação válida. Então o que você teria que fazer aqui é então você tem que escrever uma imagem assim, que é estranho, ou você teria que fechá-la na tag de abertura. Com Emmet por perto, tudo que você precisa fazer é pressionar Command, Shift e citar. Assim, ele fornece a etiqueta de fechamento. Se você fizer isso de novo, ele se fechará. 36. Avançar para o ponto de edição de conteúdo: Este atalho é muito legal quando você está escrevendo expressões Emmet. Se vamos escrever entrada, texto, e então temos que expandir isso, se eu quisesse saltar para id e depois voltar para o nome antes de eu ter escrito qualquer coisa, eu apenas pressionar Control Alt e direita, ou esquerda. Então eu posso pular entre esses dois pontos de edição. Realmente útil. Assim que escrevo algo e salto para trás, não posso mais avançar porque já mudei o conteúdo. 37. Selecione o próximo e a anterior: Temos um monte de conteúdo e eu quero ir rapidamente para o próximo elemento. Como faço isso? Vamos Comando Shift e maior que. Assim, podemos saltar entre os nossos elementos ou se quisermos ir para trás, vamos menos do que muito fácil, certo? É realmente útil. 38. Remover tag: A maneira padrão de remover essas tags, se não quisermos mais “li”, seria apenas clicar nelas, talvez mover um mouse e, em seguida, excluí-las. Mas há uma maneira mais rápida, “Command” e “Cotação”, sem mais tag. Quando você usa isso em conjunto com outros atalhos, a vida se torna simples. 39. Renomear tag: Então fizemos um monte de codificação, nosso site está pronto, mas cometemos alguns erros, e agora precisamos mudar algumas das tags. Então, uma das maneiras que podemos fazer isso, a maneira padrão, é apenas ir para a tag de abertura. Selecione o pedaço de texto UL e altere-o para OL. Se pressionarmos “Enter” aqui, isso nos dá um resultado indesejado. Então vamos deletar isso e então podemos ir até a etiqueta de fechamento e digitar “OL”. Essa é a maneira padrão. Agora, olha como isto é rápido. Se eu for “Command Shift K”, ele seleciona tanto a abertura quanto a tag de fechamento, e agora eu posso apenas digitar “UL” ou “Div”. Agora, veja isso. Se selecionarmos todos esses Li e pressionarmos “Command Shift L”, ou vamos seleções, dividimos em linhas e, em seguida, pressionamos “Command” e “Seta para a esquerda”. O que está acontecendo aqui é que nós selecionamos todas as linhas, e agora nós começamos a digitar em cada linha. Então eu vou pressionar minha “seta para a direita”, e então a partir daqui eu vou pressionar “Command Shift K” para renomear minhas tags. Então, eu posso apenas mudar esses dois vãos ou etiquetas A ou o que eu quiser. Muito poderoso. 40. Ir para o par correspondente: Você pode ter muito conteúdo e, ao rolar para baixo, não sabe onde está. Mesmo que haja linhas e sublinhas de texto ou alguns editores tenham uma maneira mais clara de distinguir qual é uma tag de fechamento para sua tag de abertura. Uma maneira realmente fácil é clicar em algum lugar perto dessa tag de abertura ou tag de fechamento, e então ir Control Shift T, e ele vai para o início daquele, e depois Control Shift T, e então, ele vai para o final. Control Shift T novamente, de volta à abertura. Ele encontra o seu par. Isso não seria ótimo se todas as pessoas pudessem encontrar seu par exato no universo apenas com o Control Shift T? 41. Wrap com abreviação: Aprendemos como especificar o conteúdo de uma abreviatura. Quando expandirmos isso, você verá que meu conteúdo 1, é o texto dentro do último filho dessa abreviatura, fantástico. Mas agora o que acontece se já tivermos o conteúdo? Bem, poderíamos apenas pressionar A e então expandir isso, mas então o conteúdo não estaria dentro desse elemento. Vamos desfazer, o que podemos fazer aqui é selecionar o conteúdo e, em seguida, vamos embrulhá-lo. Então controle W para embrulhar. Ei, podemos colocar uma abreviatura aqui. Então div ou poderíamos colocar um nome de classe, my-class, ou poderíamos escrever uma abreviação inteira tão span e dentro do span é my-class, e dentro dela é uma tag, muito legal. Pressione “Enter” e lá vamos nós. Acabamos de embrulhar o nosso conteúdo com um monte de etiquetas. Não tem que ser apenas o conteúdo sozinho, podemos envolver todo esse elemento com uma abreviatura. Então controle W e talvez você só queira escrever em ou talvez div.my-cool-class. Assim mesmo, ele recua para nós, fantástico. É assim que fazemos embrulhos, não vou embrulhar para ti. 42. Alternar comentário: Vamos falar sobre comentar. Em Sublime, se pressionarmos “Command” e “Slash” ele comenta, se pressionarmos novamente, ele descomenta. Em Emmet, se pressionarmos “ALT”, “Shift” e “Slash”, ele faz exatamente a mesma coisa, então realmente fácil fazer isso. Mas agora vamos falar sobre o próximo nível de comentários. Se tivermos um monte de divs dentro de divs, e todos eles têm nomes de classe, slide.class-1 e dentro de.class-2. Dentro disso é.classe-3 e dentro disso é.classe-4 e nós expandimos isso. Nós cometemos um erro, ali. Expandimos isso. O que acontece é que, as tags de abertura são ótimas porque eles dizem que classe é, mas nunca diz que classe é quando fecha. O que podemos fazer aqui é usar um filtro, você canaliza e você pressiona “C”, e então você expande. Então ele coloca comentários, e diz que, “Ei, acabamos de fechar a classe 4, acabamos de fechar a classe 3". Isso é realmente útil quando você tem uma página muito longa como URL, e dentro da URL você tem muitos itens de lista. Confira isso. Agora você não tem certeza quando seus divs estão fechando e quais divs é, mas agora ele diz a você. Muito legal. 43. Atualizar o tamanho da imagem: Agora imagine que temos uma tag de imagem e temos essa imagem de rosto rico. Confira. Cara rica, sou eu puxando uma cara. Sim, agora eu tenho essa imagem cara rica pequena que eu quero colocar lá em vez da imagem de rosto rico. Então voltamos para o nosso index.html e mudamos para o rosto rico pequeno, e agora eu preciso mudar minha sabedoria, altura dos olhos, que é sempre uma missão. Como sei o quão grande isso é, então vou verificar isso. Basta ir Control Shift I e [inaudível] largura e altura ajustadas para 300. Ele sabe o quão grande essas imagens. Usar este atalho de teclado também funciona muito bem com o plugin sublime de nome de arquivo automático. Você deveria conferir. 44. // MAIS FANTÁSTICOS ITENS DO EMMET: Você já viu algumas das coisas que Emmet pode fazer em seus arquivos HTML e CSS, mas há mais algumas coisas que você deve saber. Os próximos vídeos serão sobre mostrar essas coisas. 45. Codificar imagem para dados: Isso vai explodir sua mente, explodiu minha mente. Eu tenho essa imagem, que se chama icon.png, um ícone incrível. Agora, dentro do Safari ou de algum outro navegador, eu tenho isso aqui. Mas, se vamos ao Finder e vamos remover o nosso icon.png, remover e, em seguida, vamos atualizar, haverá um problema. Voltamos ao nosso Finder, pressionamos Command Z, nosso ícone volta, nós atualizamos, graças a Deus, ele está lá novamente. Se formos para Sublime Text agora, para evitar que isso aconteça, e por várias outras razões, se não quiséssemos confiar em um arquivo real em nosso sistema de arquivos ou em um servidor, o que poderíamos fazer é codificar isso. Muito legal. Mas, normalmente isso leva um pouco de pensamento, você precisa de um conversor ou qualquer coisa, mas Emmet tem isso resolvido. Confira isso. Controle Shift D, e assim, converte sua imagem em texto simples. Sei que é um pouco longo, mas tem seus benefícios. Vamos verificar isso agora. Nós o salvamos, vamos para o nosso Finder e removê-lo. Adeus. Depois voltamos para o Safari, atualizamos, confira isso. Não precisamos mais de uma imagem, temos tudo em texto. Quão legal é isso? 46. Mesclar linhas: Às vezes, você tem conteúdo em várias linhas, HTML ou CSS, e você quer que eles estejam todos em uma única linha. Portanto, a maneira mais fácil de fazer isso depois que você realmente tem seu conteúdo é selecioná-lo. Então, neste caso, eu só vou selecionar tudo e então você pressionar “Command Shift P” para obter suas paletas para cima. Em seguida, digite mesclagem ou algo semelhante. Você pressiona “Enter” e, assim, tudo está em uma linha. É o mesmo com CSS. Você tem um monte de regras e você seleciona-as, deslocamento de comando P, mesclar linhas, assim, tudo está em uma única linha. Realmente útil. Agora, a outra maneira de fazer isso, se você pode pensar um pouco antes, é escrever assim. Então você vai até a minha lista, li multiplicado por três. Em seguida, você coloca um tubo porque você quer filtrá-lo e você quer que ele seja uma única linha. Então, você expande e assim, tudo está em uma linha. Então você pode dizer, “Ei, aí.” Aperte, “Tab”. “ Como está, pressione “Tab”? Muito fixe, certo? É exatamente o mesmo com CSS. 47. A paleta de comando: Se você é como eu ou a maioria dos outros humanos, você provavelmente esqueceu esses atalhos de teclado. Felizmente, em texto sublime, é realmente fácil encontrar os atalhos. Você vai para “Ferramentas”, “Command Pallets”, ou você pode pressionar “Command Shift P”, se você se lembrar desse atalho, e então a partir daqui você pode ver o que todos os comandos Emmet fazem, então Emmet e lá vamos nós. Todos os comandos estão lá com todos os atalhos de teclado no lado direito. Super, super útil. 48. Configurações do Emmet: Às vezes você pode não gostar do que Emmet está fazendo. Bem, eu encorajo-te a ir ver as configurações. Em Sublime Text é muito fácil, você vai Sublime Text, Preferences, e então você vai para Package Settings, Emmet, e então confira as configurações padrão. Em seguida, para alterar qualquer um deles, você deve abrir seu próprio arquivo de configurações. Nós vamos para Configurações de pacote, Emmet, e depois Settings-User, e então o que você pode fazer é se você não gosta de algo, você pode simplesmente copiar isso e, em seguida, colocar essas chaves porque é objeto adjacente e, em seguida, você apenas alterar isso, salvar ele. Talvez seja necessário reiniciar o Sublime Text ou o editor de código antes que a configuração comece a funcionar. É assim que você atualiza suas configurações. Ter um retiro configurações padrão é um monte de comentários aqui que dizer-lhe exatamente o que está acontecendo. Pesquise online se precisar de ajuda para descobrir o que significam. 49. Filtros: Vamos falar sobre filtros. Vimos filtros em ação nos vídeos de abreviação HTML e CSS, mas vou mostrar como fazê-los e alguns exemplos. O que é um filtro? Bem, vamos fazer um exemplo primeiro. Então você tem um div, e você tem um ul, e você tem três itens li dentro disso. Quando você expande isso, ele os coloca em várias linhas. Mas se você não quer isso, e você quer tudo em uma linha, você coloca um pique e S. Agora, este pique é o filtro, e filtrando mais alto, é o S. Então você vai controlar E e expandir isso, e tudo estaria em uma linha. Fantástico. Agora, em vez de S, você poderia escrever jade, e criaria uma marcação de jade para você, assim. Ou você pode escrever haml, e ele irá criar alguma marcação haml para você. Muito legal. Agora, se o seu ul tinha uma aula nele, chama-se “Minha Lista”. O que é realmente legal aqui é que em vez de haml, poderíamos escrever c, o que significa que eu quero comentários. Quando expandimos isso, recebemos esses comentários no final de nossos elementos com a classe, e dizemos: “Ei, acabamos de fechar essa etiqueta.” É assim que se usa filtros. Há muito mais. Vá checá-los online. 50. // PRODUTIVIDADE COM SUBLIME: Os próximos vídeos mostram como ser um pouco mais produtivo no Sublime Text, mas certamente não são todas as maneiras. Eu também encorajo você a pesquisar como acelerar todos os tipos de tarefas, não apenas em seu editor de código. 51. Sem um mouse: Agora, quando você está digitando e, em seguida, usando um mouse e, em seguida, digitando e, em seguida, usando um mouse, ele fica realmente frustrante e não é produtivo. Às vezes você nem sabe onde o mouse está, mas você sabe onde está seu pequeno cursor. Podemos simplesmente não usar o mouse em tudo. Que tal só usar o teclado? Vou mostrar-lhe algumas coisas que o ajudarão a usar apenas o teclado. Os atalhos de teclado eles realmente útil para saber. Eu sei que suas mentes provavelmente explodem com todos os outros atalhos de teclado que você deve saber, mas estes são realmente úteis, especialmente no Sublime. O primeiro que gostaria de mostrar é usar o comando. Se você pressionar “Command” e esquerda ou direita, ele salta para o início ou fim da linha. Se você usar o comando e para cima ou para baixo, ele salta para o início ou o fim do documento. Vamos para o topo do documento pressione “Command” e para a direita, e vamos para o final dessa linha. Agora, quando pressionamos “Down”, vai para o fim dessa linha. Para baixo, para baixo, para baixo, para baixo, e assim por diante. Agora, o comando para a esquerda vai para o início dessa linha e se formos para cima, cima, para cima, e não fica mais no início dessa linha, mas tudo bem. O comando à esquerda vai para o início dessa linha. Muito fixe. Agora, o que Alt faz? Bem, Alt e para a direita , salta para a próxima palavra. Isso é muito legal. Às vezes ele faz coisas estranhas como ele não saltar para a próxima palavra e pode saltar para o próximo personagem se houver caracteres especiais. Como este Alt e para a esquerda, vamos apenas saltar para o início de Li. Para a esquerda, vamos pular para o final do feno, e assim por diante. O que faz o turno? Mude para a direita Aha, ele cria uma seleção. Realmente útil se você quiser copiar e colar. Então “Command C” para copiar e, em seguida, nova linha e colar. Agora, há uma maneira muito mais fácil de copiar e colar. Podemos pressionar “Command”, “Shift” e para a esquerda e seleciona toda a linha. Agora, podemos cortar isso, então Comando X e agora podemos pressionar “Command backspace” para remover toda a linha e backspace novamente e lá vamos nós. Chega de linha e não temos que pressionar “Backspace” 1000 vezes. Se você quiser algo no meio da remoção alinhar completamente e escrever um pouco a pouco, você pode pressionar “Alt” e “Backspace” e ele não vai remover coisas pedaço por pedaço, que às vezes é muito legal. Agora, se você quiser selecionar uma palavra que você está no meio, basta pressionar “Comando D” e ela seleciona essa palavra e se você quiser selecionar a linha inteira, você pressionar “Comando L.” Isso é realmente útil para selecionar linhas inteiras, palavras inteiras. É muito rápido. Super. Outra maneira de fazer isso é apenas pressionando “Alt”. Alt para a direita e para a direita novamente. Depois, mude para a direita. Em seguida, você pode selecionar palavra a palavra em vez de tentar selecionar um pouco a pouco pouco. Você pode começar a ver o que os comandos Alt e Shift fazem. Eles são muito, muito poderosos. Às vezes também usamos o controle em alguns dos atalhos, mas não estou mostrando muito do que o controle pode fazer agora. Uma das coisas mais úteis que vou mostrar agora é se você tem que selecionar essas três linhas e depois copiá-las e nós temos que ir para fora da UL, e nós colamos as coisas não parecem tão boas. Quando você colá-lo de outra área que tem um recuo diferente, você pode usar “Command Shift V” e basicamente colar no lugar, realmente, muito útil. Outra coisa é, é que, o que acontece se você quiser colar essas coisas em uma ordem diferente? Bem, vamos subir algumas linhas e vamos copiar hey, vamos copiar lá, e vamos copiar como você. Então descemos aqui e vamos retroceder, pressione “Tab” novamente, e então “Alt Command V.” O que é que isto faz? Bem, veja isso. Mantém o histórico de todas as suas cópias. Podemos começar com a forma como você pressiona “Enter ”, “Comando Alt V”, e então podemos dizer lá, como você está, e então Comando Alt V e então podemos dizer “oi”, ou poderíamos até mesmo colar um monte de aliados. Muito fixe. Essas são algumas maneiras legais de copiar e colar. Agora, o que acontece se você quiser adicionar uma linha rapidamente abaixo ou rapidamente acima? “ Command Shift Enter” um acima. “ Command Enter” um abaixo. É praticamente o mesmo que entrar. Eu realmente gosto de “Command Shift Enter”. A outra coisa que é realmente legal é quando você tem um monte de texto selecionado, você pressiona “Tab”, ele vai recuá-los e se você pressionar “Shift” guia, ele vai desdentá-los. Super-útil em vez de fazê-lo linha por linha. A última coisa que quero mostrar aqui é que se você está escrevendo um pedaço de texto, então digamos que você acabou de escrever como href. Você pressiona “Igual a”, não precisa pressionar dois conjuntos de aspas. Basta pressioná-lo uma vez e seu cursor está no meio dessas duas aspas. Realmente útil. Você pode então escrever algo. Outro grande exemplo disso é se eu tivesse que selecionar “Como” e então eu tive que pressionar “Shift” e citar, e vamos envolver essa palavra com aspas. Ou eu envolveria isso com colchetes ou com colchetes. Muito, muito fixe. Esses são alguns atalhos que eu uso no Sublime. Há uma tonelada a mais. Se você realmente quer saber se algo pode ser feito para acelerar o processo, faça alguma pesquisa. Ele provavelmente estará disponível ou alguém terá criado um plug-in que permite que você faça isso. 52. Dividir em linhas: Uma das coisas mais legais que eu encontrar sobre Sublime Text é a capacidade de dividir um monte de texto em linhas. Vou pressionar Comando A, selecionar todos eles, e então eu vou para Seleção, Dividir em Linhas, mas poderíamos usar o atalho de teclado, então Command Shift O, e de repente, temos um monte de linhas selecionado. Se começarmos a espaçamento aqui, podemos escrever um monte de coisas, mas isso não é muito útil. Se eu pressionar Comando e sair, ele vai para o início de cada uma dessas linhas. Daqui, posso fazer algo como div e expandir. Eu posso então selecionar a tag de fechamento, cortar isso, pressionar Command e para a direita, e então, colar isso. Está fazendo isso para cada linha. É muito, muito poderoso. 53. Tab de navegação: Quando você tem um monte de guias abertas, é realmente frustrante ir com o mouse e, em seguida, clicar e, em seguida, clicar em e, em seguida, clicar em. Há algumas maneiras de fazer isso. Ele imita o Google Chrome muito bem, então você pode pressionar Command um, dois, três para navegar entre suas diferentes guias. Às vezes, você tem tantas guias abertas que você não sabe qual guia você está ou qual guia você quer ir. Você poderia apenas pressionar Control Tab e ele irá alternar entre suas guias ou Control Alt Tab e ele vai alternar para o outro lado, ou se você queria ser realmente intencional sobre qual caminho você foi, Command Alt direita, Command Alt esquerda. Há três maneiras de navegar entre as guias. Eu costumo usar a guia de controle, ou se eu tiver algumas abas abertas, Comando um, dois, três. Super fácil, super simples. 54. Seletor de Emoji: Quando você escreve coisas como, “Oh meu Deus, eu amo unicórnios”, você só precisa colocar um emoji lá, certo? Como fazemos isso? Bem, num Mac, é muito fácil. Você vai para o Controle, Comando e Espaço. Assim, você pode procurar unicórnio, lá vamos nós. Então, colocamos o unicórnio ali. Fantástico. Se quando você fizer isso, sua tela fica assim, então você apenas aperta este pequeno botão no lado direito aqui e ele se torna este pequeno pop-up. Da próxima vez que usar isso, você vai para Controle, Comando e Espaço, e então, seu seletor de emojis aparece. Super útil para emojis. Sim. 55. // CONCLUSÃO: Agora você se sente como Near, certo? Discagem Matrix ou algum centro de hackers de classe mundial já que você é como o Sr. Hacker, ou o Sr. Near ou a Sra. Near Trinity, quem quer que pense que é. Tenho um desafio para ti e uma pergunta. O desafio é, eu quero que você escreva um site em uma única abreviatura e poste essa expressão em sua galeria de projeto. Todo mundo pode copiar, colá-lo e expandido e voilá, eles devem ter um site. Então a pergunta é, por favor, diga-nos, o que devemos fazer com todo o tempo extra que você economizará quando começar a usar o Emmet. Essas são suas duas coisas que eu quero que você faça agora. Divirta-se com eles. É o fim da aula. Eles são, no entanto, muitas outras maneiras de acelerar sua produtividade, especialmente quando você está codificando e especialmente quando você está em texto sublime. Se você gostou da aula, revise e compartilhe com qualquer pessoa que você acha que vai se beneficiar com ela. Se você quiser ficar em contato, confira o meu site e siga-me nas redes sociais. Eu sou @TAPTAPKABOOM na maioria das plataformas. Ok. Vejo-te em breve. Tchau.