Primeiras aulas do curso Vim: Introdução e boas práticas a edição no terminal

Vim: Introdução e boas práticas a edição no terminal

Criando um header - Introdução

Bem-vindo ao Curso do VIM, VIM que é um editor de texto. Praticamente uma IDE, uma nova ferramenta para o seu dia a dia como editor de texto, como programador, seja o que for. Vamos aprender neste curso como alguém que nunca abriu VIM, nem sabe o que é direito, pode muito bem trabalhar com no dia a dia, ser totalmente apto a usá-lo.

Esse será o nosso trajeto, vamos ver o projeto que vamos fazer, as melhorias que faremos nele e o que isso vai acarretar. Primeira coisa que faremos é abrir o VIM, que não tem interface gráfica. Ele roda só no terminal.

Sim, mas o que significa não ter interface gráfica? Que ele se baseia só no terminal e não numa janela extra. Então não quer dizer que vamos editar às cegas. Essa a tela inicial do VIM e você pode pensar, “que feio, não quero aprender isso”. Uma das coisas que você vai fazer durante o curso é customizá-lo quase completamente, a configuração dele vai ser um tema recorrente, para deixá-lo do nosso jeito tanto funcionalmente, veremos os casos em que se faz sentido, como visualmente.

Vou abrir aqui o futuro, essa a aba do futuro agora, em que já configurei o VIM, observa que tem cores mais amigáveis, tem uma indentação do tamanho que configurei, tem alguns recursos visuais novos que aqui (na outra tela) não tem. Por exemplo, as linhas e aqueles números que vamos entender depois o que fazem.

Que é basicamente a distância relativa, então configuração do vídeo vai deixá-lo muito mais confortável de ser usado. E mais importante, deixar do jeito que você quiser, isso é um grande ponto. Outra coisa que vamos aprender imediatamente é que o VIM não usa o mouse, vamos descartá-lo por um tempo, porque a ideia dele é manter a mão no programador sempre no mesmo teclado.

Sempre pronto para fazer novas ações, não precisa tirar o braço para pegar o mouse e voltar, isso é perda de tempo. Quem diria o mouse é uma perda de tempo para esse editor. Então vamos aprender isso. Além disso vamos aprender que VIM se separa modos, que já que não vamos usar o mouse, com usamos o que faríamos com o mouse?

Ele divide as funções dele em quatro modos, que é modo normal, de comando, de seleção e de inserção. Conforme eu falar o que faremos no projeto eu vou apresentar esses modos e vamos aprender a lidar, intercambiar entre eles durante o projeto. Mas falando um pouco do que vamos completamente fazer, esse é o primeiro arquivo vamos mexer.

É o index.html. E se buscar, se pudermos fazer uma busca por header ele vai falar que não encontrou este padrão. Tem duas informações importantes. A primeira que nossos arquivos não têm um header, qualquer site hoje em dia gostamos de fazer um header, poder navegar entre ele. Essa será a primeira coisa que faremos, para isso vamos espiar o futuro.

Vamos fazer este header que está entre as duas ocorrências da palavra header, isso vai envolver aprender a inserir texto, no modo de inserção. Vai aprender a como inserir texto no lugar certo rapidamente, sem ter de selecionar o lugar no mouse, vamos aprender a usar o modo de seleção para selecionar uma parte de texto, copiar e colar, tanto de um arquivo, como para outros arquivos.

E usar também a busca; porque vamos ter de buscar ou inserir esse header nos outros arquivos. Voltando um pouco para cá, a outra informação que ele deu é padrão. Ele não falou palavra encontrada, fala padrão, porque a busca do VIM usa expressões regulares e a substituição de texto também. Significa que poderíamos fazer tudo que conseguíamos só com palavras, só que mais.

Veremos um exemplo de como você pode rapidamente pegar vários textos que são parecidos, mas diferentes e mudar para um novo padrão que continua parecido, mas diferente do jeito que queremos.

Se eu continuar descendo aqui, eu vou ver que nosso footer aqui embaixo é uma “merreca”, ele tem um e meio e um título, vamos expandir esse footer. Novo, dar um “spoiler” do que vai acontecer. Vai ficar maior, aqui e vamos com isso reexercitar algumas coisas que fizemos com header, por ser de natureza parecida, mas vamos aprender a gravar uma sequência de comandos que queremos repetir várias vezes.

E ver como isso pode salvar muito tempo. Agora vou para o momento navegar na estrutura do projeto, vamos aprender a fazer isso, com um plug in faremos NERDTree que abre essa interface da esquerda que nos permite navegar pelas pastas do projeto de dentro do editor, bem como uma IDE faz, mesmo.

Vamos aprender a, por exemplo, abrir arquivos em abas, arquivo testimonies.html, e vamos comparar um segundo com o que tinha antes e o quanto testimonies no final acaba com footer e tem e tem uma estrutura carrossel aqui no meio.

Isso também teremos aqui, se procurar footer vai ter, antes dessa estrutura de carrossel vai ter vários pequenas depoimentos, quase iguais, fazendo um painelzinho na nossa página. Para isso vamos usar outro plugin, o emmet, vamos discutir o quão útil é procurar plug in e procurar a comunidade do VIM, antes de começar a dar problemas.

Outra coisa que notamos é que tem ideia para as coisas, por exemplo esse daqui figure-3-testimonies que aqui não existe. Então vamos preencher esses ids para fazer um Java script com VIM; sim ele é capaz de editar varias linguagens, como Java Script.

Outra coisa que vamos aprender é a abrir arquivos, dividindo a tela, então, aqui abriu o Java script na metade da tela que estava o nosso arquivo testimonies, vamos aprender como editar, porque isso é bom e quando isso é útil. E esse é o Java Script que a gente vai montar.

Vamos ver como editar o VIM com Java Script, como completar automaticamente arquivos e navegações simples, como pular para o final arquivo ou para o início. Por fim vamos largar um pouco dessa máquina e criar uma máquina virtual, dar ssh entre outra máquina e fazer todo processo de testar o deploy do nosso site que é subir máquina virtual e servidor lá e acessar de fora.

Vamos aprender como o VIM pode ser usado muito bem para isso, porque servidor hoje em dia não tem nem interface gráfica. Vamos ver esse terminal aqui que temos do mesmo jeito, só que vai ser o terminal do servidor, então, não tem interface gráfica para mexer lá.

E o VIM não usa interface gráfica, que maravilha vamos usar o mesmo editor para resolver esse problema, vamos inclusive passar configurações da nossa máquina para lá rapidinho.

Fazer um pequeno script em dash para fazer um deploy. Feito tudo isso que eu disse de ampliar as coisas do projeto e testar deploy, vamos também nos adequar a alguns padrões de código da equipe, por exemplo, codificação, uma discussão de usar tab ou espaço, tudo isso virá no curso e te deixará uma pessoa muito capaz de usar VIM. Espero que você esteja tão ansioso quanto eu.

Criando um header - Começando o header

Beleza, como já falei a Luana que é front end da Alura, começou um projeto para essa empresa TopCasaFina e você é o responsável por terminar o projeto, não sem ajuda. Vamos dar uma olhada no que ela já fez para podermos retomar o projeto?

Vou abrir os arquivos no browser e dar uma olhadinha, já tem uma pagina de depoimentos, uma pagina dos projetos da empresa, uma pagina sobre eles, até uma home, mas na home não tem nada que mande para a página de projetos. Falta colocar navegação no site que permita ao usuário interagir, navegar e conhecer o site.

Caso contrário teremos arquivos desconexos. O que vai resolver, que vai ser nossa primeira tarefa é um cabeçalho. Se você der uma olhada no site da Caelum, você poderá observar que isso (mostra na tela) é um cabeçalho. É uma barra no topo do body, a primeira coisa do site e que tem links para outras áreas. Assim, se eu clicar em cursos, os cursos vão aparecer, se eu clicar em sobre um pouco sobre Caelum.

Exatamente isso que queríamos e esse será o modelo que seguiremos, vamos fechar tudo. A ferramenta que usaremos para resolver esse problema, que é acabar o projeto é o VIM, que é editor muito poderoso e flexível, está disponível em praticamente todo ambiente Unix. Então vamos começar abrindo, para conhecê-lo.

No Mac e no Linux vou abrir o terminal, no Windows abre o prompt de comando e basta digitar vim, enter. Beleza, esse nosso editor.

Ele não vem com interface gráfica, como a maioria dos editores, ele roda no terminal e não tem botões, cores e indicações, interface gráfica, ele é realmente apenas isso. E ainda assim é muito poderoso. O abrimos sem nada, a tela em branco, não estamos editando nada.

Porque não sabemos onde está o vim. Vamos sair dele e abrir os arquivos da Luana. Para fazer isso dois-pontos Q, saímos do editor, estamos de volta ao terminal, vou entrar na pasta onde joguei o projeto. No caso, cd Documents/victoras/topcasafina/, dou ls, realmente estão aqui os arquivos do projeto.

No subdiretório deve ser outra pasta. Para abrir o arquivo, vou digitar vim index.html. Consegui abrir o arquivo. Está aqui todo o conteúdo dele, mas como está vai ser ruim de digitar, o fundo branco, com azul piscina, rosa choque e o verde, nem comecei a editar e meus olhos já estão ficando cansados de olhar para essa tela.

Além disso, olha o tamanho no tab, oito espaços, o arquivo rapidamente sai de controle, não fica bom de editar. Por nossa sorte o VIM é muito customizável e vamos nos acostumar desde o começo a mudar tudo que não gostarmos e deixar do nosso jeitinho. Então, vamos descobrir como fazer isso? Se dermos outro comando, não o Q para sair, mas dois-pontos eco cifrão home, vocês veem aqui embaixo da tela onde digita comandos, ele vai exibir também o direito onde tem de estar o arquivo de configuração.

Então vamos mais uma vez sair do editor e criar esse arquivo. Dois-pontos, Q, de novo comando embaixo escrito, enter, sair do editor. No meu caso cd /user/alura/ e vou criar o meu vim .vimrc, esse o nome do arquivo de configuração, se estiver no Mac ou no Linux, se estiver no Windows coloca underline no lugar do ponto.

Vou criá-lo já usando o editor, editando arquivo novo “.vimrc”, ele vai dizer New File, arquivo novo, somente escrever. Digita hxjr essas teclas não estão fazendo nada, por quê? Porque o VIM tem modos. A ideia dos criadores foi afastar a mão do programador do mouse e jogar para longe. Fazer tudo que fazia no mouse, no teclado de maneira mais eficiente; como ele consegue isso?

Com modos, para criar mais atalhos e mais maneiras de usar as teclas do teclado sem ter de usar vários modificadores, como control mais shift mais alt, aquilo só serve para dar tendinite. Eles fizeram modos e no que entramos não é de inserção, é o modo normal e nele você consegue fazer varias coisas, mas não inserir texto.

Então, vamos aprender a mudar de modo para finalmente fazer as configurações que queremos. Se eu apertar i minúsculo, tem diferença maiúsculo e minúsculo para cada atalho, INSERT. Aqui embaixo da tela aparece insert mode. Agora posso digitar à vontade.

Queríamos duas coisa, esquema de cores mais agradável, porque aquele estava muito cansativo para a vista e queríamos mudar o tamanho do tab, vamos lá. Primeiro colorscheme, que vem do inglês esquema de cores, industry, por exemplo, é um dos esquemas de cores padrões que tem o fundo escuro, tem vários padrões você pode baixar na internet se você quiser.

Vou usar industry, está ótimo. Por fim vou colocar set tabstop=2, no html somente quero dois espacinhos, sempre que mudar a indentação, para mim está ótimo. Agora vamos sair do arquivo e ver se mudou. Dois-pontos Q. Não esta saindo, por que não está no modo normal, está no modo de inserção e o que digitamos é inserido no texto. Portanto, vamos apagar isso e voltar para o modo normal.

Para fazer isso é fácil, usa o esc, aqui embaixo sumiu o insert, como não tem nada é o modo normal e eu posso, finalmente, sair. Porque no modo normal você entra em outro modo que é o modo de comando, quando você aperta dois-pontos você abre essa barra de escrita e pode usar comandos.

Chamamos isso de modo de comandos e para usá-lo você precisa estar no modo normal. Comando Q sai. Não deu. Avisou que precisamos salva-lo antes de fechar, porque teve mudanças desde que o abrimos. Para fazer isso outro comando W, dois-pontos w, cuida de salvar o arquivo. Aparece o nome e written, que significa salvo.

Agora dois-pontos Q, saímos, vamos dar uma olhada lá. Vou navegar para a pasta em que está o projeto, usa vim o nome do arquivo para abri-lo, conseguimos o que queríamos de fato. O fundo está escuro, o esquema de cores mudou e o tab diminuiu, apenas dois.

Mas perdemos as cores. Isso é muito ruim, porque não sabemos o que é tag o que é texto. As cores dão sintaxe para a linguagem que estamos programando e será igualmente ruim programar assim. Por que isso aconteceu? O VIM quando foi instalado ele vem com arquivo de configuração padrão, quando começamos a editar esse arquivo e escolher o que queremos para o editor, temos de falar tudo mesmo.

Temos de especificar que queremos cores. Vamos consertar. Dois-pontos Q, enter, saindo do arquivo, mais uma vez para a pasta de configuração. Vamos editá-lo: .vimrc. Precisamos colocar mais linhas para dizer que queremos cores. Como criamos texto?

Há duas opções, aperta em i estamos no modo de inserção e como qualquer editor, usamos setinhas para ir até o final, chegou enter e digito mais. Ou tem mais uma opção nova do VIM. Dá esc e vai para o modo normal, as setas funcionam, mas qual o problema delas?

O primeiro é que os criadores queriam que ficássemos com a mão no teclado, perto de onde digita, de onde faz comando para fazer com que o programador, editor de texto, fosse mais ágil. E a seta não esta no meio, está na ponta do teclado.

Fora o fato de ter de ficar teclando muitas vezes para chegar no final. Tem duas coisas do VIM que nos ajudarão com esse problema, primeiro, se apertar l (ele) você vai para direita, j para baixo, k para direita, h para o lado. Essas são as setas e estão no meio do teclado onde fazemos todas as outras coisas.

Já não precisamos tirar as mãos, já estamos andando mais livremente. Ainda tem o problema que estamos repetindo várias vezes, todo atalho do VIM pode ser repetido de uma maneira bem fácil. Se você digitar um número antes do atalho o VIM vai repetir aquele número de vezes.

Imagina que eu preciso andar dez caracteres para a direita, então, digito 10 L e o cursor pula 10 caracteres para a direita. Se eu quiser ir para o final da linha 100 L ele vai identificar e vai te mandar lá para o final, 100 h para voltar e dois j para ir onde eu queria, descer duas linhas.

Agora sim e minúsculo, modo inserção, vamos editar os comandos. Precisamos pedir cores, como ele vai saber como colorir nosso arquivo? Precisa meio que adivinhar de acordo com a extensão dele .html, primeiro vamos fazer isso antes de pedir cores. E o comando para isso é filetype plugin indent on, onde ele vai identificar o tipo de arquivo.

Se eu disser syntax on ele vai colorir. Vamos novamente para o modo normal com esc. Dois-pontos W, salvar, dois-pontos Q para sair. Vamos testar? usei o histórico do besh para voltar para pasta que eu estava. Ls e vamos editar o index, beleza, da maneira que queríamos.

Está com fundo escuro e com cores. Vamos usar a dica que acabamos de aprender para chegar até o começo do body. Afinal o cabeçalho é a primeira coisa do site. Dez j, passei um pouco, dois k, dez L, estou no final da linha. Estou onde eu queria. Se entrar no modo de inserção, basta um para direita e enter que vou para a próxima linha.

Repara no que eu desci uma linha ele foi lá para a direita e agora a identação está curtinha, de dois espaços. Tinha de ir para a esquerda, novamente esqueci de falar alguma coisa para as configurações. O que era padrão que mudei não está mais funcionando.

Esse é bem simples, lembra quando falei que queria tabs menores, precisa falar para ele dar pulos menores de identação. Vamos sair do arquivo, descartar o que fizemos antes de começar a editar.

Esc, dois-pontos Q, não quero salvar, lembra que ele pede para salvar? Se eu quero descartar as mudanças ele mesmo fala, eu posso dar dois-pontos Q exclamação, ele ignora tudo, não salva o arquivo, exatamente o que eu queria. Voltando para o arquivo, vim .vimrc para editá-lo, 5 J para descer lá embaixo, 10 l final da linha e enter. Faltou um comando.

É bem simples, tem a ver com tab stop, tab stop diz que o tamanho que ele vai mostrar o tab - é um caractere invisível, então quando ele mostra, ele decide o tamanho, falei que queria dois. Vamos falar para ele dentar com dois também, para bater um com outro, para isso set shiftwidt que justamente é o comprimento do shift que é esse mover para direita igual a dois para ficar compatível. Esc e agora na hora de salvar e fechar como sei que é isso mesmo que eu quero.

Pode usar um comando um pouco diferente que é dois-pontos wq. Usa o w e logo em seguida q, salva e logo depois fecha, agora não falta nada. Se formos editar o index.html. vamos testar o que fizemos.

Navegando com j, para baixo, k para cima, l para direita, enter. Beleza, desceu para o lugar certo. Agora sim pode editar texto tranquilamente, sem ter nenhum problema com nosso editor.

Queremos um cabeçalho, header, tem uma tag com esse nome feita especialmente para isso, uso essa tag. E quero uma lista de links, é uma lista não ordenada, tem uma tag para isso, o nome é unorder list ou lista não ordenada. Elementos são li, repara como cada vez que dou enter a identação está seguindo. Isso foi uma das coisas que garantimos quando dissemos para identificar o tipo de arquivo, sabe que html quando damos enter é para ir descendo níveis.

Até fechar a tag, ele reconhece isso e nos ajuda a editar, vamos criar um link dentro daqui, por exemplo, ourprojects.html um de nossos arquivos, o nome do link vai ser projetos. Vamos deixar somente um link para ver se funciona, depois testa.

Beleza. então vamos fechar tag ul. Fechei. Ocorreu algo muito legal aqui, quando fechei a tag ul, automaticamente ele veio para esquerda, porque ele identificou que era justamente aquilo que precisava, descer o nível de identação de volta.

Vamos fechar o header e ver se funciona. Maravilha, foi para esquerda, é outra coisa que o mandamos identificar e nos ajuda muito não preciso me preocupar com identação. Agora vamos salvar e olhar se está certo, esc dois-pontos wq, fomos do modo de inserção para o normal e agora no modo de comando, usando comando wq que salva e fecha. Agora se formos na pasta do arquivo e abrirmos no browser, temos um link e se clicarmos, maravilha, fomos para outra pagina. já sabemos como fazer header e como fazer usando VIM inclusive. no próximo vídeo vamos ver como terminá-lo entre outras coisas.

Criando um header - Continuando o header

Estou com o projeto aberto do jeitinho que deixamos no último vídeo, ou seja, já tem um link funcionando para os projetos. Precisa de mais links para navegação para todo site. Então isso que vamos continuar fazendo nesse vídeo. Vamos dar uma olhada no site da Caelum e ver como os links estão dispostos.

Estão dispostos um do lado do outro e vai ser esse padrão, essa disposição que vou manter, conforme adiciono mais links, vou tomar esse cuidado. No terminal, no diretório do projeto vou usar o comando vim index.html, para abrir o arquivo index.html.

Vou ver como está; quero colocar mais links no header, precisa primeiro navegar até o header, achá-lo para começar a inserir mais texto. Vamos, como fizemos na aula passada, usar J para descer uma linha, ou melhor, ainda usar 10j para copiar dez vezes o atalho J. Feito isso estamos nessa linha.

Poderíamos de fato começar a digitar, mas por acaso caiu aqui. Chutei um número, deu certo. Eu estou no header. Tem uma forma melhor de navegar, usar o k que sobre uma linha, 100 vezes então 100k para subir até o início do arquivo como se eu nunca tivesse feito nada nele, acabei de abrir arquivo e vou procurar header no arquivo. Vou buscar a palavra, para isso vou digitar barra invertida, aparece como se fosse um modo de comando, mas é a busca.

Vou digitar header, aqui embaixo vai estar se der enter o meu cursor pulou para o primeiro header. Se der n minúsculo ele vai para o próximo; então usei e está aqui no fechamento header. Ou passei e quero voltar shift n para o resultado anterior. Agora sim vai voltar para o header, abertura da tag. Rapidamente, não importa onde estivesse esse arquivo poderia estar lá no final eu posso achar o header sem ficar chutando números.

Feito isso vamos adicionar mais um link, vou usar o J para descer duas linhas, vou usar 1000l que a seta para direita para ir para o final da linha, vou entrar no modo de inserção, usando i minúsculo, seta para direita, enter e finalmente estou numa linha nova, pronto para digitar o link.

Li abre a tag, mas está muito ruim. Para editar uma linha tive de usar três comandos, tive de ir ao final da linha, entrar no modo inserção, vamos voltar para o modo normal com esc; desfazer o que acabei de fazer, para fazer de uma maneira mais eficiente.

Desfazer é um atalho também u minúsculo, que desfaz a última coisa que foi feita. Se eu apertar u agora ele vai apagar o li que acabei de escrever, se por acaso você deletar coisa demais, desfazer demais e precisar refazer isso o comando é control R. Como desfiz o li, control R vai refazer o li. Observe.

Voltamos a ter li a mais, mas como eu queria voltar para ensinar coisa nova vou usar o u e voltar. Vou mudar meu cursor com h para primeira linha, porque não precisa estar no final, pode estar no final, pode ser em qualquer lugar. Vou usar um atalho que vai criar uma linha nova embaixo, vai entrar no modo de inserção e vai manter a indentação correta.

Como se eu tivesse escrevendo mais dentro da tag mesmo. O comando é o o minúsculo, feito, estou no modo inserção como está escrito embaixo, estou logo abaixo, já posso começar a digitar muito mais rápido; então vou criar um link para depoimentos que é o arquivo testimonies.html.

Vou escrever aqui depoimentos e fechar as tags, vamos salvar e ver se funciona, dou esc para voltar ao modo normal, dois-pontos para o modo de comando e vou usar o comando w, que salva. Avisa aqui written, escrito, salvo.

Se eu recarregar a página no navegador, tenho mais um link depoimentos, inclusive indo para a pagina depoimentos. No entanto, não ficou do jeito que eu queria, comentei mais cedo que queria os links um do lado do outro e nessa estrutura estão empilhados.

Isso pode se resolver com css, mas tem um jeito se resolve isso só html dando mais semântica para o código, que vai ser o jeito vamos preferir. Voltando para o arquivo, o que causa o empilhamento dos links é estrutura de lista, ul, com certeza vamos ter que tirar o ul. Vamos substituí-lo pela tag nav, o Legal dessa tag é que é uma parte de navegação, dando semântica para o nosso código e, além disso, deixa os links um do lado do outro.

Como pode rapidamente trocar o ul por nav? Vou fazer do jeito mais natural, eu vou navegar até ele, então vou dar dois k, para cima, para eu subir duas linhas. Estou na linha dele, vou entrar no modo de inserção e vou deletar com backspace e trocar por nav. Mas não funciona. Por quê?

Porque em muitos sistema o backspace movido por padrão não deixa deletar o que você acabou de escrever, como esse é o caso no meu sistema, ele não vai apagar. Eu vou mudar o arquivo de configuração para dizer eu quero que apague sim qualquer coisa com o backspace.

Então eu vou dar esc, para voltar ao normal, vou sair do arquivo com dois-pontos Q para poder digitar o meu arquivo de configuração. No meu caso ele fica em /User/alura/.vimrc, na sua máquina pode ser outro, vou abrir com VIM. E vou usar o que aprendemos para colocar mais uma linha aqui; vou descer cinco linhas com cinco j e vou dar o minúsculo porque eu quero mais uma nova linha para começar a editar. Prontinho. E comando que vou digitar que é 7 backspace.

Backspace = 2, igual a dois significa apenas um segundo comportamento que se sabe que vai fazer as coisas que precisa o comportamento, e sete backspace que estamos mudando algo do backspace. Vamos salvar e fechar o arquivo, o comando para isso é wq.

Modo normal com esc dois-pontos wq. Se formos novamente para o index, ou navegar até o ul, usando a busca, então barra para começar a buscar onde está ul e cursor foi direto para ul. Rapidamente eu achei o que eu estava procurando e vou começar a editar, usei duas vezes l para direita e i para entrar no modo de inserção e agora sim posso digitar tentar caracteres.

Vou colocar nav que é o que se queria em primeiro lugar, mas isso foi bom. Porém agora precisa mudar a tag embaixo do fechamento da tag ul. Tem maneira melhor de fazer isso. De novo, vamos voltar atrás, vou dar esc, apertar u para voltar atrás, agora tem ul. O que quero fazer é rapidamente substituir todo lugar que está escrito ul para ficar nav, é um comando. Então vou entrar no modo de comando com dois-pontos, e o comando é porcentagem s, mas precisa escrever mais para dizer que quero substituir todo ul por nav.

Vou teclar uma barra digitar ul que é o que eu quero substituir por nav, vou dar outra barra e escrever nav que é o que eu quero que seja substituído por e agora eu vou outra barra para opções (%s/ul/nav/g), que são g – global, para procurar todo arquivo, toda linha que eu quero fazer essa substituição.

Global é sempre bom. Vamos testar com ela para ver o que mais precisa indicar. Vou dar enter para substituição ocorrer e imediatamente três substituições em três linhas. Você pode ver onde tinha ul tem nave, deu certo.

Porém, apareceu um nav onde não era para aparecer em fullscreem – fnavlscreem. Sem querer substituímos mais do que queríamos. Vou voltar atrás com u daí três mudanças ele desfez todas e vamos colocar mais uma opção para ter controle sobre isso.

Eu vou apertar dois-pontos para entrar no modo de comando, vou apertar uma seta para cima, para ele navegar no histórico, então uma seta para cima ele rapidamente pegou meu último comando. Vou adicionar c, de choose ou escolha, vamos vê-lo funcionando na prática, vou dar enter e o meu cursor estará aqui.

No primeiro ul ele vai perguntar se você quer substituir por nav e eu vou digitar y, de yes, sim. Vai virar nav; mesma coisa para o segundo, eu também quero que vire nav, então, y. No terceiro eu não quero que vire nav, então vou dar n, de no ou não.

E agora eu substituí somente o que eu queria rapidamente, trocando a estrutura do html. Eu vou salvar, porque já fiz algo que não quero perder, dois-pontos w para salvar.

Vamos continuar, para mudar a estrutura não pode mais ter lis, porque li são apenas dentro de ul; vou sumir com eles. Temos duas opções para isso, uma delas é usando a própria substituição, substituindo li por nada. Então eu vou dar dois-pontos porcentagem S, porque eu quero substituir, vou dar barra e vou digitar toda a tag de lis.

Vou substituir por nada, essa barra deixo vazia. Então estou subindo a tag li inteira por nada, com as opções global e choose, enter. Eu quero substituir esse, quero, esse também quero, yes nos dois. Veja que não tem li, sumiram totalmente. Mas sobraram lis do outro lado, porque eles têm barra de fechamento de tag.

Vamos apagá-los também, dois-pontos para entrar no modo de comando, porcentagem s para substituir, barra e eu quero substituir agora a tag li nova, então vamos escrevê-la com a barra.

Outra barra, eu quero substituir por nada então vou deixar nada no meio e gc, é para funcionar? Não. Por quê? Você está vendo que estou separando comando com barras. Quando eu coloquei a barra do fechamento da tag o comando vai se confundir com a própria barra que divide o que ele faz, então eu vou voltar no comando e eu vou escapar essa barra. vou indicar que essa barra não é a barra que ele precisar ler, é uma barra do meu texto.

Para isso eu vou usar a outra barra, a barra invertida que é basicamente dizer, o próximo caracter depois disso ele é especial, não usamos para tudo, mas quando precisa. agora sim se eu usar o comando ele vai conseguir detectar os lis e apagá-los, dou enter.

Marcou tranquilamente meu fechamento de tag, vou dar y para dizer que eu substituí-lo por nada e vamos para cima, também. Rapidamente transformei minha estrutura de html de ul para nav. Vou salvar dois-pontos w para salvar e vamos testar no browser, ver se de fato conseguimos que eles ficassem um do lado do outro.

Vamos voltar lá e acabar os links, vamos escrever os dois que faltam. Poderíamos entrar no modo de inserção, digitar mais um link, testar, entrar no modo de inserção com o, digitar mais um link. Vai funcionar, são 4 links, não são assim 15 ou 20 links, daí você apenas mostraria alguns.

Quando são muitos links para escrever no html eu não quero escrever toda essa linha, que é quase tudo igual várias vezes, então vamos aprender alguns comandos novos, atalhos novos para poder gerar todos esses links. No modo normal, vamos ver o que se consegue fazer ou se precisa de mais alguma coisa.

Estou navegando com l e k para meu primeiro link, o que eu quero é copiá-lo, quero ter várias cópias do link, porque são todos iguais e daí eu altero só que eu quero. No modo normal tem comando de copiar e colar.

Estou com o cursor no a, se apertar Y ele não vai fazer nada porque ele copiou o a. Por exemplo, se eu der um l para andar 1 para direita e um p de paste ou colar, agora sim eu colei o meu a. Tinha copiado um a, colei um a.

Mas isso está muito ruim, vai ser pior copiar caractere por caractere. Bem melhor eu escrever tudo de novo de uma vez. Por isso eu vou usar u minúsculo para desfazer e mostrar que precisa de outro modo para fazer isso de maneira eficiente. O modo que permita que esses comandos sejam usados em uma grande parte em uma seleção do texto.

Esse modo é um modo visual, modo de seleção, para ajudar a copiar e colar muito rápido. Mas não quero copiar e colar essas linhas quase feitas. Quero um template, uma base um hf igual .html e preenche as partes que é o nome do arquivo e o nome do link, não precisa deletar o que já tem.

Então vamos deletar esses dois links para poder criar uma base e copiar do jeito que quero. Para deletar tem as opções já conhecidas - uma delas é entrar no modo de inserção e começar a deletar, péssimo se a linha for enorme, vamos passar muito tempo deletando e tem o novo modo substituição.

Substituindo por nada, mas como essa linha é enorme isso não vai ser muito rápido. Até como só tem uma ocorrência uma substituição só vai nos ajudar com uma linha, diferente do que foi usado para deletar todas as tags que não usaríamos mais.

Tem um comando no modo normal que é o x, que ele deleta o caractere, estou aqui com o cursor no t, se eu usar x, o t some. De novo não ajuda. Isso é quase igual backspace. Não estaremos deletando muita coisa de uma vez; o modo visual vai ajudar.

É por isso que vamos aprender sobre ele, para resolver esse problema dos links. Ele tem três tipos, o modo de seleção um deles é o seleção por linha, para entrar nele vamos usar shift v. Estou no canto inferior, está escrito visual line, ou seja, o modo visual de linha ou modo de seleção de linha.

E está aqui a linha selecionada, se apertar J eles seleciona a linha debaixo, agora posso apertar k e subir, ele seleciona linhas acima. Vou selecionar as duas linhas que eu quero deletar e vou apertar x e quando eu faço isso o comando que era do normal vai ser aplicado em toda a seleção.

Esse é o poder do modo x e as duas linhas sumira, legal. Vamos criar um template para copiá-lo, vou subir aqui k, para subir, vou dar o minúsculo e começar a digitar.

Vou fazer um template então não vou colocar o nome do arquivo, só que eu sei que é html. Vou fechar aspas. Fechar a tag, não precisa mais nada que template. Quero copiar essa linha várias vezes, sabemos copiar e colar; então vamos fazer isso.

Eu vou dar shift v para selecionar a linha, vou dar y para copiar e p para colar. Eu tenho duas linhas iguais, mas isso é muito pouco eu quero quatro links, então vamos usar a repetição de comandos para fazer várias linhas de uma vez.

Eu vou dar shift v para entrar no modo de seleção, y para copiar e faltaram dois links, então usa 2p para copiar duas vezes. Com 2 p eu vou ter quatro links, perfeito.

Estaria pronto para editar se não fossem os meus erros na hora de criar o template. Acabei de perceber. Eu não só criei os links de indentação errados, como eu criei aspas a mais. Vamos resolver, mas será que precisa realmente apagar tudo e refazer?

Não. O modo visual pode ajudar com esses problemas, mas com um novo tipo de seleção, por bloco. Vou subir o cursos até a primeira aspa que eu errei. Quero deletar as duas últimas aspas de cada linha, pois ficaram a mais. Digitei sem querer, então eu vou usar control V para entrar no modo visual block, como indicado embaixo, ou modo seleção por bloco.

Não tem jeito melhor de entender esse modo do que usando. Vou usar H para ir para esquerda e parece que ele está selecionando parte da linha, se eu usar j para descer uma linha, ele selecionou um quadrado. Ele ignorou que tinha linha, ele está fazendo por quadrados, por blocos.

Vou usar 2j e agora selecionei todas as aspas extras e sabemos deletar coisa a mais selecionada. Vou usar x e pronto, as aspas extras sumiram. outro problema é o nível de indentação. Esse o modo de seleção não ajuda muito, mas tem uma coisa do VIM que é muito bacana, estou no aplicativo da primeira linha que está com indentação errada.

Se eu apertar duas vezes o igual, ou seja, igual igual, a linha vai cair para o nível de indentação certo. Eu posso repetir esse comando como qualquer atalho ou comando do VIM, então se eu usar 4 igual igual, quatro linhas vão ser indentadas, tudo voltou para indentação correta.

Fácil de alterar a estrutura de indentação, errar e voltar, o VIM permite isso. Está pronto, vamos preencher com nossos links. Também tem o testemunhos que havíamos feito, então tem a página sobre ou about.

Então, queremos um link que volte para a página inicial, vai ser a própria home.

Então, vamos ver se os links deram certo, vou dar um esc para sair do modo de inserção, dar dois-pontos w, para salvar e dar uma olhada no navegador. Tem quatro links, ao testá-los todos funcionando e todos ao lado do outro, perfeito, conseguimos montar o nosso cabeçalho. Mas o link para home geralmente é o primeiro e o sobre é o segundo, ficou meio estranho. Será que conseguimos rapidamente mudar isso?

Sabemos que conseguimos copiar e colar, então podemos copiar e colar lá em cima e deletar embaixo. Então seria o Y para copiar, o p para colar e o x para deletar embaixo, muita coisa para mover de lugar. Vou selecionar a linha home, que é a linha que eu quero para mover para cima, um shift V, está selecionada, vou usar x para deletá-la, mas o x não é só delete, ele é um cut, cortar, e ele funciona para colar em outro lugar.

Então se eu der 4K, subindo lá para nav e meu cursor está nessa linha da nav e eu apertar p, ele vai copiar a última coisa que eu cortei. E uma linha abaixo, então abaixo dessa linha vai aparecer a linha do home, perfeito. Vamos fazer a mesma coisa com about?

Para ele ficar na segunda posição. Vou descer três linhas com três J vou dar shift V para selecionar a linha inteira do about, vou dar X para deletar ela. Subir três linhas com k, e agora logo embaixo da home se eu der um p, vai aparecer o meu sobre.

Vou salvar e maravilha! Está tudo feito, nosso header, dando reload, home, sobre, depoimentos, um do lado do outro, perfeito! Conseguimos montar esse header e aprender muita coisa nova.

Sobre o curso Vim: Introdução e boas práticas a edição no terminal

O curso Vim: Introdução e boas práticas a edição no terminal possui 217 minutos de vídeos, em um total de 42 atividades. Gostou? Conheça nossos outros cursos de Linux em Infraestrutura, ou leia nossos artigos de Infraestrutura.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Linux acessando integralmente esse e outros cursos, comece hoje!

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana