Easy and simple setup ESLint & Prettier on Nextjs

Combinar o ESLint e o Prettier em seu fluxo de trabalho de desenvolvimento pode melhorar significativamente a qualidade do código, a manutenibilidade e a colaboração em uma equipe. O ESLint garante que seu código siga regras específicas e detecta problemas potenciais, enquanto o Prettier impõe a formatação consistente do código.

• Execute o comando npm create next-app@latest. Quando for perguntado se deseja adicionar o ESLint ao seu projeto, selecione "sim" (yes).

• Agora vamos instalar as dependencias, instalaremos também o lint para o tailwind, explicarei mais tarde.

npm install prettier eslint-config-standard eslint-plugin-tailwindcss eslint-config-prettier 

Instale as extensões do eslint, prettier no vscode

• Agora vamos fazer algumas configurações.

Em seu arquivo

.eslintrc.json

cole as seguintes regras.

{ "extends": ["next/core-web-vitals", "standard", "plugin:tailwindcss/recommended", "prettier"] } 

Em seu arquivo

settings.json

cole as seguintes configurações.

{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.addMissingImports": true }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } 

ctrl+shift+p

reload window

Teoricamente seu ambiente estará configurado e tentará formatar seu codigo sempre que salvar, ele também usará umas praticas nas suas tags de tailwind como por exemplo experimente por o "flex" no final das tags e ao salvar ele deverá vir para o inicio.

Espero que gostem, esse foi o primeiro post de uma serie que postarei sobre as coisas que eu aprendi no dia, tentarei entender a ponto de poder vir aqui e tentar explicar, será uma forma de reforçar meu aprendizado e talvez sirva pra alguém, nos vemos em 2030 quando eu for o melhor do role asuxdasjxdbasd