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
Top comments (0)