How to make your code look like mine (with ESLint + Prettier + Tailwind)

We know that for code to work perfectly, it doesn't have to be very beautiful.
But even though it doesn't make a difference in the functioning of an application, aesthetics can transform the way you perceive your work and your entire development process.
Within the Next.js + Tailwind setup, the current styling tip is ESLint + Prettier (which has an extension for Tailwind!).
Today's video is a quick tip that will transform the appearance of your code.
Follow Rocketseat on social media:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat

[@CuriousCat-mw3sl]

Só sei de uma coisa: Um código nunca será tão lindo quanto o Diego. Agradeço muito por compartilhar tanto conhecimento ❤

[@dieegosf]

Que isso

[@CuriousCat-mw3sl]

@@dieegosf ❤️

[@Joa764]

3:18 Muito útil a explicação do eslint, como o prettier está sendo usado como plugin e como usar as extensões do prettier e eslint no vscode.

[@vitorgomes7938]

Muito bom o vídeo Diegão, até a ultima NLW eu não usava Eslint por puro orgulho e agora que vi o quão maravilhoso ele é para trabalho em times eu estou dando uma estudada nele. O formato do vídeo é muito bom, seria top trazer mais vídeos assim.

[@rogeriomq]

Tenho utilizado esse plugin do prettier-tw, tem funcionado muuuuuuuito bem! Recomendo d+.

[@evandrogasparribeiro9643]

Basicamente uma parte do NLW Spacetime, mas valeu demais essa dica, fica ai um relember. Valeus!

[@raimundoclessyo8943]

Amei, seus vídeos são muito didático. E com certeza quero mais vídeos.

[@lucasduarte7558]

muito show esse vídeo! Configurações de eslint são muito confusas nas documentações, e você deixou simples todo esse processo.

[@matheuspimentel9666]

Video top, continua com as dicas rápidas!!

[@dolfera1962]

Top! Dicas rápidas são bem vindas!

[@pedrogrigorio]

Queria usar esse pacote do ESLint da Rocketseat já com tudo certo, mas queria mudar o estilo dos braces do if else, curto mais o formato stroustrup, mas dá algum conflito com o prettier eu acho e não consegui ajeitar, se tivesse um vídeo mostrando como criar a própria configuração seria massa. padrão: if (condition) { // code } else { // code } stroustrup: if (condition) { // code } else { // code }

[@samueloliveira4465]

Valeu, Diego, usei em um portfólio Vite/React que estou desenvolvendo

[@juniortomazzoni]

Diego, existe alguma configuração para as classes do tailwind também não ultrapassarem o limite de 80? Seria legal fazer a quebra automática ao salvar 😊

[@ramonStones]

Nas configurações tem uma opção "word wrap", uso desde quando comecei a programar.

[@juniortomazzoni]

@@ramonStones valeu pela resposta mano, mas o word wrap nesse caso não funciona, pois o prettier entende a class como uma string única, então ele não quebra automaticamente. no próprio exemplo do vídeo isso acontece: as propriedades quebram, a classes não.

[@igorribeiro632]

@@juniortomazzoni Acredito que o que ele quis dizer é o próprio "ALT + Z" que quebra linha automático no vscode, mas o que você queria é que o eslint fizesse de forma otimizada

[@ursochurrasqueira]

fala Diegod, qualquer hora da uma conferida no Rome, ele pretende unificar eslint e prettier (e futuramente mais coisas) e evita termos que criar trocentos arquivos de configuração e de ignore

[@filipesilva432]

Nossa agora estou entendendo tudo do eslint e prittier que usei quando participei do evento da criação do projeto do último evento. RS Diego as suas dicas são excelentes, estou estudando React e aprendi a gostar mais de programação por sua causa. A forma como você ensina e passa as informações não deixa o processo de aprendizado chato. Parabéns por ser essa pessoa maravilhosa, creio eu que muito em breve irei ser um Dev empregado. 😊 Obrigadão pelas dicas, tudo que você fala faz muito sentido, tudo se encaixa, quando aprendo algo contigo depois de alguns dias vejo pessoas falando e fazendo a mesma coisa até fora do país.

[@ojCezarFerreira]

Se o plugin o Tailwind não pegar, segue o tutorial da página do plugin e cria o .prettierrc ao invés de prettier.config.js

[@robsonsousa3796]

Uma coisa que sempre acontece cmg que quando eu uso o eslint toda vez que crio um arquivo ele fica com esses sublinhado vermelho , mesmo eu apertando cntrl+s para formatar ele nao vai , ai tenho que usar o npm run lint que é um comando de organizar la , e so dps disso quando eu dou o cntrl+s ele organiza

[@sogoid8278]

Parabens pelo conteúdo. De pois poderia fazer outros videos mostrando a criar esse plugins do eslint com prettier, uma dúvida tem como fazer um plugins do eslint com prettier genérico para server em vários projetos?

[@felipebrito1497]

Diegao já usando Arc, tô apaixonado por esse browser

[@JosePedroBern]

Vídeo muito útil, valeu!!

[@thiagodiniz8224]

Como faz pra otimizar os nomes das classes do tailwind, ex: .flex na build fica .ab, .grid fica .ac etc?

[@weslleyfillipe1532]

salve diegão, atualiza a gente do Ignite quando vai sair o curso de tailwind? ♥

[@allanfarias1988]

Excelente vídeo Diegão.... Só uma coisa: Não teria como fazer para que ao instalar esse Setup da Rocketseat não precise fazer esses pequenos ajustes manualmente?

[@heloir1563]

Amo as aulas do Diego, porém não curto muito o tailwind por que por mais que você organize, o código continua sujo na minha opinião.

[@darlleybrito4198]

É só separar em outro arquivo e usar o apply uai

[@joseguilherme318]

pra isso é muito simples: uso a extensão tailwind fold. ele esconde todas as classes tailw no htmld trocando com apenas um símbolo do tailwindcss e aparece no hover do mouse. assim você só olha o html sempre, sem classes. e tem um comando pra tornar invisível ou não.

[@rmauto6273]

​@@darlleybrito4198 exato. Acho bem útil o apply

[@matheuspimentel9666]

Interessante, já trabalhei com tailwind mas foi pouca coisa, tive vontade de criar um projeto do zero mas ver o HTML sujo do jeito que você falou, me desanima um pouco, mas os comentários aí em cima me fizeram a ter mais vontade sabendo que tem como esconder isso

[@joserubens5505]

Vai se acostumando. O mercado tá adotando bastante.

[@pedrobenicio4955]

o unico defeito na extensão ESlint da Microsoft para o vscode é que a mesma nao formata o código pra os arquivos CSS ao salvar. Esse comportamento só tem na extensão do prettier

[@joaowictorfelipe9993]

Salve D.F. queria muito um video seu com as suas principais extensoes do VScode

[@CanalColaco]

Opa, blz? Me da uma ajuda por favor...eu uso o vscode para mexer com node. Fiz a configuração que vc falou do eslint , instalei pelo git de vcs e tal. Adicionei o extends lá, mas quando eu salvo ele só fica mostrando os "erros" e não faz nenhum ajuste automático no código, ta certo ?

[@noriller]

Tem umas config/plugin que da pra fazer pro prettier usar as config do eslint e mostrar o que tem de conflito entre eles

[@ramonStones]

Tem um site aí bem conhecido que é meu conselheiro das melhores práticas hehe

[@Bernardo-im5fu]

eu sempre tomo susto com essa logo deles no canto do vídeo

[@arthurdesouzasilva144]

Fala do husky tambem

[@joilton5857]

Instalei a biblioteca prettier-plugin-tailwindcss, mas antes tinha instado e biblioteca da rocketseat do eslint. Mas mesmo assim com essa configuração a biblioteca do prettier tailwinds css não funcionou e não formatou a orderm do css. Isso no utilizando o nextjs.

[@frank511]

Aconteceu o mesmo aqui.

[@frank511]

Eu consegui resolver o meu, pelo que li pode ser que esteja acontecendo o mesmo com você, a rocket fez um update na lib deles, se for um projeto com next tem que colocar no extends "@rocketseat/eslint-config/next"

[@joilton5857]

@@frank511 Agradeço pela informação. Valeu.

[@sergiovasquez7686]

Diego, Compartilha o seu settings do vscode também?

[@marcosdomingos9933]

Essa configuração do eslint da rocketseat react, também serve para projetos react native?

[@dieegosf]

Simmm

[@Black_9]

Já migrei para Preact, Next só passo raiva, ele dificultou várias coisas que facilitava vida que tem no React.

[@LionMonkeySketch]

primeiro tem que funcionar como foi pedido.... a regras de negocio ok..ação e reação ok ... tudo .... ai sim se quiser refatorar e deixar mais limpo ou bem explicado pra quem for chegar depois no projeto e entender bem o que ta acontecendo... é bom.... "pq nao adianta usar cleancode se no final nao funciona bem, entao antes de escrever bem precisa funcionar bem..."

[@felipeheredia4523]

Nossa, quais extensões de ícones está utilizando no VSCode? O ícones dos arquivos e também na sidebar ficou muito bonito!

[@Celsogil1]

Ícones dos arquivos: Symbols. Ícones do VSCode: Fluent Icons.

[@ribastudio]

Diegão, tenho problema com NextJS e estados de context quando o usuário atualiza a página. Qual a melhor forma de tratar e/ou persistir isso? O problema do Material dar uma piscada quando carrega então, esse aí é uma batalha eterna hahaah. excelente conteudo

[@phantoxetv]

Faltou mostrar como o ESLINT pode coloccar as props ordenadas

[@uaiLeleu]

mesmo utilizando um plugin do tailwind pro Prettier, não é necessário instalar o plugin do Prettier no vscode?

[@kaiquevinicius6941]

Seria da hora um video ensinando a fazer widget para android e ios no react native

[@dieegosf]

Isso é massa mesmo! Baita desafio interessante.

[@filipearuan6029]

Fiz isso e ele funciona certo quando eu aperto para salvar, mas queria que formatasse tbm qnd eu uso as teclas de atalho shift + alt + f, porém nada acontece. Oq pode ser?

[@judgemasteryueh]

So achei ruim que não dá pra formatar usando o comando de formatar, só no save. Lembro que anteriormente vc ensinou como fazer funcionar o eslint com a extensão do prettier

[@guustavocl]

só alguns adendos: Usar o prettier como um plugin do eslint é muito menos performatico do que usar o prettier separado. Cuidado pra não misturar o que um linter deve fazer com o que um formatter deve fazer, um linter em momento algum deve formatar o seu código, apenas mostrar o que tem de errado. Não necessariamente um problema mas mostrar como erro regras de formatação é meio estranho ao meu ver, ao formatar o código isso vai ser corrigido, só serve pra você perder tempo indo checar o problema.

[@laislobato1908]

perfeita observação!

[@sousafilipe5413]

🔥🔥🔥🔥🔥

[@braddoidao8818]

agora só falta um plugin pra quebrar as linhas das classes gigantescas do tailwind kkkk

[@bigtutoriais1]

Alguem consegue me ajudar? Sempre que eu vou salvar o Prettier fica vermelho e não faz a formatação, alguém pode me dizer como posso ta ajustando isso? Desde já, agradeço

[@abhiner]

Alguém pode dizer o tema que o Diego usou ??

[@gilvanbatista8402]

Ean... removeram o arquivo dos public repos

[@tpzzzzzzz]

Não está funcionando aqui no meu

[@matheusspinosa9201]

qual o template que ele está usando de pastas passa ia meu bom

[@joaovictorrocha1571]

Pessoal alguém me ajuda, queria pegar o arquivo de configuração do 'settings.json' do VS CODE, se alguém tiver um link ou algo do tipo ajudaria muito

[@amorimcode]

Me incomoda o className de uma tag com tailwind as vezes ficar tão grande ao ponto de ter que dar scroll lateral. Tem alguma forma de resolver isso? Sei lá, quebra de linha talvez

[@igorribeiro632]

alt + z

[@emanuel-sena]

❤

[@balllaz]

Esse é o modo que o pessoal do PRettier não recomenda não??

[@daniellevi745]

massa

[@DiegoSilva-dp8ue]

Como você faz para personalizar os icones do vscode, por exemplo o icone de debug??

[@kauan.karvalho]

Ele usa a extensão Fluent Icons

[@DiegoSilva-dp8ue]

@@kauan.karvalho Valeu amigo, você é um amigo

[@Leandro_B]

A do prettier não funcionou no meu

[@Leandro_B]

Consegui fazer funcionar, mas a parte do cssconflit ele não funciona. 8:50 A parte de manter o flex antes do flex-col funcionou, mas a de ter um p-24 e um p-8 ele não corrigiu

[@LucasBernardi23]

Alguém sabe dizer qual terminal o diego usa e como configurar igual?

[@dieegosf]

Warp + Fish + Starship

[@mateusjsouza]

E caso eu queira aplicar esse efeito de correção nas classes em mais de um arquivo, tem algum script?

[@lionheart4109]

Você tem duas opções: 1) "npm lint" (padrão no boilerplate do Vite); 2) "next lint --fix" (no Next.js); Porém, ambas afetam todos os arquivos aplicáveis no projeto.

[@user-fy2uf6vq4f]

organização das pastas.

[@medimdotdev]

que terminal é esse?

[@elysamsepi0l703]

Tava atras desse thema ai 😢

[@BillRocha]

Tailwind?! OMG!

[@dio_nellas]

Tailwind ❤

[@murilorerisondesousapaz5065]

mesmo seguindo todos os passos, meu eslint e prettier nao funciona de jeito nenhum

[@luisgustavo2425]

o meu funcionava mas agr em um novo projeto não esta funcionando

[@chabetiico]

@@luisgustavo2425 mesma coisa

[@chabetiico]

Aplicação node ta funcionando, ai fui fazer com next e nao formata nada. Obs: O "@rocketseat/eslint-config/react" tá dando conflito com o "next/core-web-vitals", e não ta conseguindo formatar

[@murilorerisondesousapaz5065]

@@chabetiico eu consegui apos mudar algumas configurações no settings do vscode

[@PedroPeripecias]

@@murilorerisondesousapaz5065 Fala bro, estou passando por um problema parecido, o prettier não mostra o problema em relação as classes, o resto vai, mas essa parte não, qual config você fez para funcionar ?

[@kingx5325]

masturbação mental

[@markqsantos7613]

Papagaio

[@markqsantos7613]

Esse cara nunca fala uma coisa certa, tem vídeo que fala pra usar tal, em outro para usar outra ferramenta. Bipolar é? Esses ytbs kkkk é fd

[@mateusjsouza]

Ué, tu usa o que quiser dependendo de cada projeto. Ele só tá de apresentando ferramentas, não te obrigando a usar.

[@MelquiMartins-pt1qm]

Desculpa mano, mas eu tenho nojo do Tailwind