Introdução:
Neste tutorial, vamos aprender como configurar um ambiente de desenvolvimento eficiente para projetos Next.js, utilizando ferramentas como ESLint, Prettier e Git Hooks (Husky + Lint-staged). Essas ferramentas ajudam a manter um código limpo, consistente e livre de erros, além de automatizar tarefas importantes durante o desenvolvimento. Vamos começar!
Passo 1: Configurando um projeto Next.js
Antes de começarmos a configurar as ferramentas adicionais, vamos criar um projeto Next.js básico. Certifique-se de ter o Node.js instalado em sua máquina. Abra seu terminal e execute os seguintes comandos:
npx create-next-app my-next-app
cd my-next-app
Passo 2: Instalando as dependências
Agora que temos nosso projeto Next.js configurado, vamos instalar as dependências necessárias. No diretório do projeto, execute o seguinte comando:
npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier lint-staged husky @typescript-eslint/eslint-plugin
Passo 3: Configurando o ESLint
O ESLint é uma ferramenta de análise de código estática que nos ajuda a identificar problemas e aplicar regras de formatação e estilo. Vamos configurá-lo para funcionar com o Next.js. Crie um arquivo .eslintrc.json na raiz do seu projeto e adicione o seguinte conteúdo:
{
"plugins": [
"react",
"react-hooks",
"prettier",
"@typescript-eslint"
],
"extends": [
"eslint:recommended",
"next",
"next/core-web-vitals",
"prettier"
],
"rules": {
"indent": ["error", 2],
"quotes": ["error", "double"],
"semi": ["error", "always"]
}
}
Passo 4: Configurando o Prettier
O Prettier é uma ferramenta de formatação de código que nos ajuda a manter um estilo consistente em nosso projeto. Vamos configurá-lo para funcionar em conjunto com o ESLint. Crie um arquivo .prettierrc na raiz do seu projeto e adicione o seguinte conteúdo:
{
"printWidth": 140,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"tabWidth": 2,
"semi": false,
"arrowParens": "always"
}
Passo 5: Rode o seguinte comando para instalar o Husky:
npx husky install
Passo 6: Rode o seguinte comando para inicializar o Husky:
Uma pasta será criada na raiz do seu projeto com um sh chamado pre-commit:
npx husky add .husky/pre-commit "npx lint-staged"
Passo 7: Configurando os Git Hooks (Husky + Lint-staged)
Os Git Hooks permitem executar scripts automatizados antes de confirmar suas alterações no Git. Vamos configurar o Husky e o Lint-staged para executar o ESLint e o Prettier antes de fazer um commit. Abra seu arquivo package.json e adicione o seguinte trecho:
{
"name": "configurando-setup-nextjs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint src --max-warnings=0",
"prepare": "husky install",
"lint-staged": "lint-staged"
},
"lint-staged": {
"src/**/*": [
"eslint --fix"
]
},
"dependencies": {....}
Passo 8: Testando a configuração
Agora que tudo está configurado, vamos testar o ambiente. No terminal, execute o comando npm run lint para verificar se há erros de linting no seu código. Bom, agora tente commitar algum arquivo tsx,js,jsx,ts que contenha esse erro de linting e pronto, ele será barrado!
Conclusão:
Neste tutorial, aprendemos como configurar um ambiente de desenvolvimento eficiente para projetos Next.js, utilizando ESLint, Prettier e Git Hooks (Husky + Lint-staged). Essas ferramentas ajudam a manter seu código limpo, consistente e livre de erros, garantindo uma experiência de desenvolvimento mais suave. Agora você está pronto para começar a desenvolver seu próximo projeto Next.js com confiança!
Espero que este artigo seja útil para você e para a comunidade do dev.to. Boa sorte com seus projetos futuros!
Top comments (1)
Parabéns pelo artigo!!