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.

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 ❤️

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.

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

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

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

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

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

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

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

Vídeo muito útil, valeu!!

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

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?

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

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

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?

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

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 }

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

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

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

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

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

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

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

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

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 ?

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.

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

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?

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

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

🔥🔥🔥🔥🔥

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

Fala do husky tambem

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

massa

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

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

❤

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

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

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

Não está funcionando aqui no meu

Faltou mostrar como o ESLINT pode coloccar as props ordenadas

que terminal é esse?

Tava atras desse thema ai 😢

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

@dieegosf

Жыл бұрын

Simmm

Ean... removeram o arquivo dos public repos

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

@dieegosf

Жыл бұрын

Isso é massa mesmo! Baita desafio interessante.

organização das pastas.

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.

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

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

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

11 ай бұрын

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

Tailwind?! OMG!

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

@dieegosf

Жыл бұрын

Warp + Fish + Starship

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

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

@lionheart4109

4 ай бұрын

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.

Tailwind ❤

A do prettier não funcionou no meu

@Leandro_B

11 ай бұрын

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

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.

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..."

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!

@pabloraphaelmardine

11 ай бұрын

Não vejo problema em mostrar erros de formatação como problema. Inclusive você pode integrar o eslint no build e só permitir bombar o build quando a formatação do código for aprovada, e isso é show para manter um padrão de código a longo prazo, não?

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

4 ай бұрын

@@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 ?

masturbação mental

Papagaio

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.

Desculpa mano, mas eu tenho nojo do Tailwind