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.
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 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.
@@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
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
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 }
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
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.
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?
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 ?
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?
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
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.
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"
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?
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..."
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
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
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.
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
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
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.
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
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.
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
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 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 ?
Só sei de uma coisa: Um código nunca será tão lindo quanto o Diego.
Agradeço muito por compartilhar tanto conhecimento ❤
Que isso
@@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.
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.
Amei, seus vídeos são muito didático. E com certeza quero mais vídeos.
Tenho utilizado esse plugin do prettier-tw, tem funcionado muuuuuuuito bem! Recomendo d+.
Basicamente uma parte do NLW Spacetime, mas valeu demais essa dica, fica ai um relember. Valeus!
Video top, continua com as dicas rápidas!!
muito show esse vídeo! Configurações de eslint são muito confusas nas documentações, e você deixou simples todo esse processo.
Top! Dicas rápidas são bem vindas!
Valeu, Diego, usei em um portfólio Vite/React que estou desenvolvendo
Diegao já usando Arc, tô apaixonado por esse browser
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 😊
Nas configurações tem uma opção "word wrap", uso desde quando comecei a programar.
@@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.
@@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
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
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
}
Vídeo muito útil, valeu!!
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
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.
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?
Essa configuração do eslint da rocketseat react, também serve para projetos react native?
Simmm
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 ?
salve diegão, atualiza a gente do Ignite quando vai sair o curso de tailwind? ♥
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?
Como faz pra otimizar os nomes das classes do tailwind, ex: .flex na build fica .ab, .grid fica .ac etc?
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
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
Tem um site aí bem conhecido que é meu conselheiro das melhores práticas hehe
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.
Aconteceu o mesmo aqui.
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"
@@frank511 Agradeço pela informação. Valeu.
Diego, Compartilha o seu settings do vscode também?
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?
mesmo utilizando um plugin do tailwind pro Prettier, não é necessário instalar o plugin do Prettier no vscode?
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..."
Tem umas config/plugin que da pra fazer pro prettier usar as config do eslint e mostrar o que tem de conflito entre eles
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
Salve D.F. queria muito um video seu com as suas principais extensoes do VScode
Já migrei para Preact, Next só passo raiva, ele dificultou várias coisas que facilitava vida que tem no React.
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
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.
É só separar em outro arquivo e usar o apply uai
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.
@@darlleybrito4198 exato. Acho bem útil o apply
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
Vai se acostumando. O mercado tá adotando bastante.
eu sempre tomo susto com essa logo deles no canto do vídeo
Faltou mostrar como o ESLINT pode coloccar as props ordenadas
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
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.
perfeita observação!
Nossa, quais extensões de ícones está utilizando no VSCode? O ícones dos arquivos e também na sidebar ficou muito bonito!
Ícones dos arquivos: Symbols.
Ícones do VSCode: Fluent Icons.
qual o template que ele está usando de pastas passa ia meu bom
🔥🔥🔥🔥🔥
Como você faz para personalizar os icones do vscode, por exemplo o icone de debug??
Ele usa a extensão Fluent Icons
@@kauan.karvalho Valeu amigo, você é um amigo
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
alt + z
Fala do husky tambem
Não está funcionando aqui no meu
Ean... removeram o arquivo dos public repos
Alguém sabe dizer qual terminal o diego usa e como configurar igual?
Warp + Fish + Starship
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
E caso eu queira aplicar esse efeito de correção nas classes em mais de um arquivo, tem algum script?
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.
agora só falta um plugin pra quebrar as linhas das classes gigantescas do tailwind kkkk
❤
Esse é o modo que o pessoal do PRettier não recomenda não??
que terminal é esse?
A do prettier não funcionou no meu
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
mesmo seguindo todos os passos, meu eslint e prettier nao funciona de jeito nenhum
o meu funcionava mas agr em um novo projeto não esta funcionando
@@luisgustavo2425 mesma coisa
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
@@chabetiico eu consegui apos mudar algumas configurações no settings do vscode
@@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 ?
massa
organização das pastas.
Tailwind ❤
Tailwind?!
OMG!
Tava atras desse thema ai 😢
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
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