Client Boundaries

Luigi Nicoletti — Wed, 21 Aug 2024 19:41:32 +0000

Hoje fiz umas anotacoes pra fixar o aprendizado sobre server e client components.

Voce sabe a unica forma de passar um serverComponent pra dentro de um clientComponent?

Easy and simple setup ESLint & Prettier on Nextjs

Luigi Nicoletti — Thu, 05 Oct 2023 15:13:15 +0000

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

DEV Community: Luigi Nicoletti

Client Boundaries

Easy and simple setup ESLint & Prettier on Nextjs