se engana Você que pensa que formatação de código se limita somente entre usar espaços ou tabs para inventar e para te provar isso vamos continuar analisando o Klin Code em nossa série sobre livros clássicos da programação a gente só começou só tem um porém Mais especificamente o capítulo 5 que trata justamente sobre formatação deixando mais uma vez bem claro que esse é o nosso entendimento sobre o conteúdo do livro fica conosco até o fim que vamos te mostrar muito código feio e alguns bonitões Mas o mais importante vamos falar sobre as melhores práticas para tornar
o código legível de verdade e aí você nunca mais vai ficar com aquela cara de fui eu que codei isso para um código seu de dois dias atrás [Música] eu sou Gabriel Fróes e nós somos um casal com um ano de experiência na área de desenvolvimento de software somos apaixonados por tecnologia e com a missão de simplificar o mundo dos códigos para quem nos acompanha uma missão que estamos cumprindo aqui no YouTube desde 2016 então torne-se um inscrito aqui do canal e acompanhe semanalmente nossos vídeos com dicas de programação já somos mais de 500 mil
débitos no canal e queremos que você também faça parte da nossa comunidade podemos começar definindo Qual é o objetivo da formatação de códigos no livro O autor diz que a regra principal não é só fazer o código funcionar a regra na verdade usar de forma consistente um padrão de formatação até porque o código que está funcionando mesmo feio precisará Em algum momento de manutenção a manutenção de códigos é algo que não podemos evitar quanto mais nos preocuparmos com as boas práticas mais teremos sucesso para resolver problemas mais rapidamente então não podemos ignorar o fato de
que tornar o código legível usando regras de formatação adequadas É sim importante e um time saver para você para o seu projeto e para a sua sanidade Mental para provar isso nós vamos precisar começar pelo conceito de formatação vertical que no Livro tem relação direto com a quantidade de linhas que um arquivo de código fonte tem existe uma convenção de desenvolver nossas classes em arquivos separados porém nem sempre isso é uma verdade absoluta Ainda mais se estivermos trabalhando com interfaces que a gente sabe até que é muito recomendável a gente pode lembrar aí do solity
Eu também acho que o tamanho dos arquivos influenciam no entendimento do código Porém se não houver uma organização hierárquica de partes e arquivos o problema só piora não adianta por exemplo colocar três mil arquivos em uma mesma pasta só para exemplificar vou abrir aqui o repositório do Linux na pasta que tem a ver com o Fire System e controla o Cash files nada contra o código do torbal não é nenhuma indireta isso tá até custamos algo encontrar um arquivo tivessem muitas linhas assim pelo menos nesse diretório o repositório do Lenço obviamente é muito organizado porque
muitas pessoas trabalham nele mas com exceção desse arquivo aqui que tem muitas linhas olha 815 linhas como é que a gente vai se entender com tantas funções aqui dentro olha só aqui na lateral como é que fica olha só é até difícil de Navegar nesse código né mas com a ideia é certa a gente consegue né uma dica que a gente já mostrou em outro vídeo é você ir no control P coloca aqui o arroba ele já traz aqui os elementos ó são 114 mas se você coloca o arroba igual ele organiza por Tipo olha
só Então aqui tem campo funções nesse caso aqui é um arquivo desenvolvido em C né Aqui tem AIDS truques tá vendo e aí já fica bem mais organizado para a gente saber e as variáveis né bem mais organizado para a gente saber o que que tem dentro desse arquivo e quais são as funções de qualquer forma é interessante ter menos né menos linhas como por exemplo esse aqui do Cash olha são 384 mas dá dá para se entender né usando a ferramenta certa então essa já é a deixa para você criar arquivos com menos linhas
pois isso é o que vai viabilizar o deve a ler o código em menos tempo só para ilustrar no outro vídeo eu disse que eu fiz já manutenção em uma só pro síndrome no SQL serve em um banco que passava de mil linhas era tanto isso que dava realmente para se perder no código porém aqueles foram tempos em que eu realmente não tinha esse bom senso que eu tenho hoje de forma geral é preferível que seus arquivos não ultrapassem 500 linhas de código o autor fala em 200 para ajudar na leitura quem entendimento como um
todo mas é claro que isso não é uma regra fechada por isso analogia que o ankle bob faz com um jornal pode nos ajudar e a metáfora do jornal é simples o artigo do jornal é lido de forma vertical apresentando no título O que você espera ver no artigo daí o texto é redigido com as informações estruturadas na vertical no sentido que lemos o primeiro parágrafo tem uma sinopse que omite detalhes os demais se aprofundam na história trazendo Aí sim as informações de forma detalhada a mesma estrutura de leitura vertical que deve ter um código
bem escrito tendo um nome simples mais descritivo partes superiores que ofereçam conceitos e algoritmos de alto nível seguidos dos detalhes que irão surgindo até encontrarmos as funções de baixo nível pegamos então um código aleatório em Type script que utiliza a epi do chat GPT para ver se enquadra nessa metáfora esse código ele também tem bastante linhas né a gente consegue também e aqui no arroba dois pontos tudo que ele tem dentro né bastante coisa tá bem entendeu a gente consegue entender exatamente o que que eles propõem que tá chato GPT e pi Ok então passou
no primeiro teste do título exato E aí tem aqui a ordem né tem as constantes aqui por exemplo poderia ter um não precisaria ter esse espaço né aqui no próprio importe também a gente é muito comum ver isso a separação de importe também com um espaço para os tipos ali de importações também não é tão ruim a gente vê também uma documentação extensa aqui com comentários também né mas a gente vê dentro da própria classe você vê por exemplo a definição aqui dos atributos protegidos e depois vem o Construtor com os parâmetros aqui nesse caso
né tudo pulando linha meio que mostrando aqui um definindo né um valor de voo para os valores Então nesse caso os parâmetros do Construtor como são muitos não daria para colocar nenhum do lado do outro então qual é a história que esse código nos conta né é uma classe com os atributos tem o Construtor geralmente Essa ordem que se cria né E aqui dentro depois você tem os métodos então quando a gente usa tem o primeiro método que é o seno Messenger também bastante documentação em código e a mesma coisa olha você tem que sendo
message os parâmetros constante tem aqui as variáveis né que são utilizadas E aí começa a parte mais detalhada né mais uma constante ele tá seguindo na metáfora né porque num primeiro momento a gente consegue entender ali o que que o código se propõe depois a gente consegue admissão dos detalhes E aí ele vai utilizando né métodos que são da própria classe o Ups então ele vai detalhando tudo conforme o código vai passando nessa leitura vertical o livro apresenta algumas regras bem interessantes relacionadas à formatação vertical que interpretamos da seguinte forma espaçamento entre conceitos que nada
mais é que deixar uma linha em branco entre cada grupo de linhas de código que representam um pensamento o que no Livro ele chama de conceito Então esse código ele não tem formatação vertical O que que a gente está fazendo aqui dá para entender de cara com uma força extra você consegue entender aqui a gente pegou aqui no sequel RM um banco de dados imposto Grid uma estrutura de pedidos Costner os dados E aí uma um método que pega os pedidos e traz esses atributos aqui para os pedidos e depois ele retorna O código tá
curto tá seguindo todas as regras o negócio é que como não tem essa ordenação é ve essa separação vertical fica um pouco confuso da gente entender né você não consegue bater o olho e identificar claramente o que que é rapidamente Então vamos ao exemplo correto como ficaria E aí para a gente entender melhor Olha só como é que fica a gente tem a constante aqui importando o sequelise depois tem o uso do circulares aqui né fazendo fazendo a conexão com o banco de dados depois aí sim você tem a criação do warder aqui definindo né
o pedido com os dias corretos né com os atributos né os campos corretos isso tudo já separadinho lá por tipo inventado então a leitura fica bem mais simples né e por fim aqui o método get horders para retornar o pedido também separado aqui então e aqui a chamada né do método o método no caso da função porque não tá dentro de uma classe então você vê que agora de cima e embaixo você consegue ter um Panorama melhor do que esse aqui né Parece que o cara Jogaram o código aí e botaram para rodar sem testar
né Essa aqui é a sensação que fica continuidade e distâncias verticais manter linhas de código e também blocos de código que são intimamente relacionados próximos um dos outros por exemplo declarações das variáveis de uma classe devem estar seguidas linha a linha variáveis devem ser declaradas do mais próximo possível de onde será utilizados funções que são dependentes sempre que possível devem também ficar próximas verticalmente funções como afinidade conceitual que podem ser por exemplo funções com uma variação simples de um determinado cálculo também devem ficar próximas uma das outras novamente voltamos na ipai aqui do chat GPT
não é IPI oficial Tá mas tá bem escrito a gente vê justamente essa separação realmente por espaço em branco de conceitos né Não só aqui nos atributos parece que ele pegou tipos de atributos separados e já separou isso também ajuda no entendimento saber que Poxa aqui olha tem a ver com a conexão com a epi aqui tem a ver com a EPI em si informações que a epi utiliza e aqui são coisas inerentes a qualquer piá né pegar mensagem armazenar a mensagem então isso faz com que você não perca tempo procurando coisas simples no código
você sabe que vai estar cada um exatamente um lugar onde deve estar Então se a gente pegar um método aqui vamos pegar um selecionar um método aqui qualquer a gente consegue ver tem promessa de Messenger nesse aqui por exemplo ele tem aqui os parâmetros E aí a gente consegue ver também um espaçamento obviamente aqui ele fez tem uma condição aqui E aí ele precisou quebrar a linha porque também ficaria muito muito ruim de ler com muito grande assim né uma linha gigante Mas você vê que tem os espaços em branco para delimitar Olha quando você
tem um Duo você tem as constantes que são utilizadas Você tem o if E aí já tem mais espaço aí você tem as variáveis mais um if você vê que estão todo tá tudo devidamente separado né Vamos constante depois vem um bloco com as variáveis depois vem cada um ali das intenções do código então tá tudo bem dividido né fica fácil de ler quando tá separado dessa forma ainda sobre as regras de formatação vertical temos a ordenação vertical que diz respeito à chamadas das dependências da função sempre que possível a ponte para baixo ou seja
que a função que está sendo chamada deve estar embaixo da função que tá chamando mas se você não sabe Existem algumas linguagens que não permitem essa ordenação como por exemplo Pascal nesse exemplo a gente tem um código nada mais é que um código que redimensiona uma imagem e todas as funções ali estão separadinhas né então na função nem por exemplo que é a que a principal ele tem aqui a chamada a uma função que carrega a imagem depois ele redimensiona a imagem e depois ele salva a imagem dá para fazer tudo numa função só dá
mas isso aí fere outros princípios também que a gente já falou né Então nesse caso o que que acontece a gente tem funções menores que cada um tem o seu papel né então são funções que tem código é poucos códigos e aqui ela ela é chamada dentro do bem Então nesse caso a gente tem O make que é o que chama as outras funções e a declaração das funções estão logo abaixo essa quantidade vertical né de você ler uma função aqui é que ela tá sendo chamada dentro dessa tá logo embaixo ou um pouco mais
dependendo da relação de in Então vamos supor que a gente tivesse lá o load image fosse Aqui para baixo então Obrigatoriamente esse essa definição do loading teria que vir aqui para o meio Obrigatoriamente não mas seria melhor para a leitura do código né obviamente isso tudo ajuda quando a gente usa essa navegação com o arroba dois pontos né do vs code que ajuda demais aqui ele nem coloca na na ordem né mas fica mais fácil da gente encontrar então se a gente se a gente navega por aqui ó ela só como é que ele já
vai posicionando o código aonde a gente precisa ir então fica mais fácil ou se a gente coloca o control né com mouse em cima aqui da imagem ele gera um link ó olha só se botar o mouse aqui ele mostra mas se eu colocar o control ele gera um link eu posso clicar e ele vai para definição da função aí facilita também né e aqui a gente tem um código impascal aqui ele nem consegue interpretar com arroba Tá mas o Pascal tem uma estrutura um pouco diferente porque antes do código né Você tem toda a
tipificação aqui tudo que você vai precisar usar de variáveis de funções que você define primeiro tudo que você vai fazer e depois você faz a implementação efetivamente Então essa linguagem é um dos casos em que a gente não consegue fazer essa declaração de uma função que está sendo chamada depois da que está chamando você tem que Obrigatoriamente fazer de forma invertida então a função necessariamente precisa estar declarada primeiro na ordem e depois a função chama mais aí é coisa da linguagem Então nesse caso é uma exceção e formatação horizontal existe o primeiro ponto que podemos
destacar é o tamanho da linha do código diz que os programadores claramente preferem linhas curtas e nós concordamos é como um Bob falou e acho que essa daí é unânime né você pegar uma linha como Aquela da expressão regular que infelizmente não tem muito o que se fazer na expressão regular os que cai numa regra essa exceção você tem uma linha extensa demais é ruim de ler né É ruim ainda mais interpretar ou fazer manutenção numa expressão regular dessa aqui ó não é nada trivial isso aqui nada mais é que uma expressão regular para validar
uma url é válido ou não o ankle Bob até fala que ele tem um limite acho que de 120 caracteres por linha né que ele tenta manter nessa média ele chegava até usar aquela não utilizar nunca rolagem do monitor que faz muito sentido ou melhor fazia né porque hoje em dia os monitores conseguem ter uma resolução uma quantidade de caracteres muito grandes ali então aqui tá 150 a gente tá fazendo rolagem porque a fonte que também tá grande né Se eu colocar no original Olha só daria para ler eu não sei no vídeo fica uma
porcaria provavelmente né mas para codificar fica melhor trabalhar assim do que ficar rolando para fazer uma manutenção isso aqui também mas vamos voltar aqui ó e realmente né quando a gente tem uma linha isso aqui não só para expressão regular mas às vezes com condicional muito grandes muitas condições aí não tem jeito a gente tem que dar uma pulada de linha para tentar simplificar a leitura outras regras da formatação horizontal são espaçamento e continuidade e alinhamento horizontal por exemplo ao declarar uma função que contenha parâmetros colocamos o parênteses de abertura unido ao nome da função
e Isso mostra que estão intimamente ligados usamos o espaço para separar os parâmetros dentro dessa chamada ou ainda para destacar a prioridade dos operadores o igual o maior por exemplo mas é mais fácil de entender tudo isso como exemplo né E nesse mesmo exemplo aqui onde a gente tem um código de redimensionar imagens a gente tem também olha esse exemplo de você declarar as funções e você ter ali o parênteses junto né Tem gente até que gosta de colocar a junto ou numa outra linha dizem que até só existem dois tipos de pessoas no mundo
aqui fazem isso e aqui fazem isso não vamos entrar nessa discussão mas em relação ao uso de parênteses você vê tanto a chamada a chamada das funções também utilizam geralmente utilizam realmente o parênteses colado aqui né e os parâmetros com esse espaçamento depois do vírgula porque isso aqui também atrapalha a visualização script tem também o tipo junto não fica um negócio legal de ler assim como se você pegar ali no que tem ali no image download também se você unificar aquilo tudo também não dá uma leitura muito legal então essa separação por espaços isso essa
simples separação por espaço por linha então nem se fala ela dá ela você consegue visualizar ali a prioridade que naquele exato momento que ela tá sendo utilizada né aqui a gente pode até falar olha só uma função de uma linha sólida como é que ficou mais simples aqui nesse caso não ficou simples de entender né estourou o limite de caracteres Eu também não gosto a gente tem que ter um bom senso entre usar uma linha para simplificar você quebrar a linha para melhorar a leitura ou você exagerar demais número de linhas e aí fica também
volta a ficar impossível de entender faltou te explicar o alinhamento horizontal nós temos que confessar que já usamos muito mais isso faz muito tempo Acredito que vieram lá da época do Cobal e do fortran eu na verdade já vi muito código inclipper assim e reproduzir isso lá nos meus códigos em Aspen ele serve para organizar certas estruturas horizontalmente mal comparando é como se o código fosse escrito em formato de tabela bom chegamos num código velho nosso em Aspen esse aqui é uma classe original lá do código fonte do site código fonte em 2006 que tratava
de anúncios no mercado livre a gente tem um vídeo que explica esse esse essa ferramenta né mas nós viemos aqui é justamente para te mostrar como nós utilizamos o alinhamento horizontal e olha só ele já pode ser visto ali nas variáveis Olha só eu usava o tab para alinhar o igual também tinha isso aqui também na nas variáveis olha só até para formatar SQL dentro eu fazia esse tipo de coisa também podem me julgar não tem problema além desse código a gente tem óleo por exemplo yunion aqui ó com select Tem várias coisas que eu
não faria hoje né esse bando de concatenação aqui eu acho não é muito legal é muitos comentários inúteis porque era difícil de manter olha só tem aqui Um corpo Depois tem o corpo de novo Tem uns parâmetros então uma vez que você atualizava rapidamente esse comentário aí ficava mentiroso né como diz o Bob e falamos sobre comentários também em um dos episódios dessa série Fora que para fazer adequação por exemplo de variáveis o tratamento era feito na própria função Então tem que separar os objetivos ali não tá tão legal olha o tamanho da função já
passaram de 400 é muito grande com certeza ela não tem só uma atribuição no final ainda tem aqui uma um tratamento de palavras que é uma expressão regular que ela só chega aqui tranquilamente 548 colunas aqui né chegamos finalmente no assunto mais gla quando falamos de formatação horizontal a indentação ao nosso ver você pode usar aqui dois três quatro 125 espaços ou teb não importa o que importa mesmo é que você escolha um desses padrões e siga ele em todo o seu código e obviamente não deixe de inventar porque isso é fundamental para leitura e
compreensão do código pois 125 espaços agora se você programa em Python pode pular essa parte pois o código só roda realmente se estiver propriamente inventado e Qual é o objetivo da Independência tornar visível A Hierarquia que existe no código uma exceção do parto que aí tem que para rodar o código a gente voltar naquele código do sequelas né e ia ser além dos espaços a gente tirar a indenização aí fica bem ruim né de entender Ainda mais por exemplo se a gente tirar os espaços aqui também ó começar a acumular Olha só aparentemente tá Tá
tranquilo né se eu botar aqui ela nem na fonte original eu consigo Tem que rolar ter o espaço todo então aí tentação nesse caso ajuda muito na no entendimento Então nesse caso Olha só quando a gente tá aí deitado principalmente aqui quando a gente tá nesse caso aqui com uma hierarquia a gente consegue ver Exatamente olha isso aqui faz parte do aí de Isso aqui faz parte do Cosme e etc então aí tentação é essencial nestes casos mas a gente tem que tomar cuidado também com aqueles códigos que são chamados do código hyuken que usa
na verdade em tentação exagerada e não para de crescer né vai eternamente fica crescendo crescendo crescendo crescendo E aí também não dá para fazer leitura disso agora de tudo que falamos provavelmente a mais importante vem agora a regra da equipe existem formas de formatar um código e raramente Encontramos uma unanimidade Entre todos os programadores em todas as regras por isso é importante que seja definida Quais são as regras que serão utilizadas com todo o time e que você aplique ela como se fosse uma lei a consistência na utilização dessas regras é o que vai manter
o código legível e ajudar na manutenção e muitas vezes nem tenho necessidade de obrigar e puxar a orelha de todos os deves que não utilizam o padrão sabe porque porque existem ferramentas que podem fazer esse trabalho por nós e não deixar nem o código subir lá na Pr Caso esteja fora do padrão um chamado slenders ou lentes de código que ajudam não só na formatação como também auxiliam encontrar bugs codificação mal feita forçar um tipo de nomenclatura entre outras atribuições um dos mais famosos é esse link para java script mas tem diversos outros como PHP
link o TSE lente o check Style o light Run entre outros existem também que funciona com diversas ideias e editores de código onde a formatação desejada é ajustada automaticamente olha só o que ele pode fazer se você identa por exemplo usando o teb mas a sua equipe não você pode configurar o seu pearier para fazer essa substituição do código quando salvar e também quando o editor for aberto então se você ativa o preder e também coloca aqui na configuração do seu vs code o formato on save o que que acontece é quando a gente tem
um código desse jeito e a gente salva o arquivo ele já faz a formatação automática não fez exatamente como estava antes né que aqui aquilo também tinha mas você pode configurar dá para configurar seu seu Pulo linha aqui eu acho que ele já faz vendo Então fica mais simples você tem um código mais legível nós te apresentamos exemplos reais de códigos nossos dos mais antigos aos mais recentes que atendem bem ou não aos padrões de formatação sugeridos pelo Clean code agora é a sua vez de nos contar como você costuma formatar os seus códigos tem
alguma ferramenta alguma configuração especial ou você deixa aí tudo no automático mas se você ficar com vergonha de assumir a culpa dos seus códigos ruins nós perdoamos Esperamos que daqui para frente isso mude você percebeu que as regras são simples e que elas realmente melhoram Deveras a legibilidade do código vamos deixar aqui no card o link para playlist completa que contém Nossa análise dos outros Capítulos do livro Klin code não esquece de deixar o seu like aqui nesse vídeo e até o próximo tchau [Música] [Música]