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