Como melhorar o code style de projetos Next.js
Introdução
Um bom code style não é apenas uma questão estética; ele impacta diretamente na legibilidade, na colaboração entre a equipe e na capacidade de escalar e manter o projeto no longo prazo.
Ferramentas como ESLint e Prettier, além de boas práticas de desenvolvimento, são recursos valiosos para garantir que o código atenda a padrões de qualidade e evite erros comuns. Neste artigo, exploraremos abordagens práticas para melhorar o code style em projetos Next.js.
ESLint e Prettier
- ESLint é uma ferramenta de análise estática para JavaScript e TypeScript que identifica e corrige problemas no código, garantindo padrões consistentes e evitando erros comuns.
- Prettier é um formatador de código opinativo que padroniza a formatação de arquivos como JavaScript, TypeScript, CSS e outros, eliminando debates sobre estilo e garantindo um código limpo e consistente automaticamente.
Vamos começar instalando o ESLint, algumas configurações e plugins
npm i -D eslint eslint-config-next eslint-config-prettier eslint-plugin-prettier
eslint-config-next
Usamos essa configuração para garantir um conjunto de regras recomendadas dos seguintes plugins ESLint:
Você pode conferir o conjunto completo de regras aqui.
eslint-config-prettier
Ele é responsável por desligar todas as regras do ESLint que sejam desnecessárias ou que possam conflitar com o Prettier.
eslint-plugin-prettier
Com esse plugin fazemos com que o Prettier execute como uma regra ESLint e relate diferenças como problemas individuais do ESLint.
. . .
Agora vamos criar e configurar o arquivo .eslintrc.json
{
"extends": [
"eslint:recommended",
"next",
"plugin:prettier/recommended"
],
"rules": {
"no-unused-vars": [
"error",
{
"args": "none"
}
],
"prettier/prettier": [
"error",
{
"printWidth": 80,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "es5",
"arrowParens": "always",
"semi": false,
"endOfLine": "lf"
}
],
},
}
Extra
Uma coisa que me incomoda principalmente em projetos maiores é a organização de imports, para não ter que fazermos isso de forma manual podemos utilizar também um plugin ESLint. Vamos instala-lo e configura-lo.
npm i -D eslint-plugin-simple-import-sort
O arquivo .eslintrc.json deve ficar assim:
{
"extends": [
"eslint:recommended",
"next",
"plugin:prettier/recommended"
],
"plugins": [
"simple-import-sort"
],
"rules": {
"no-unused-vars": [
"error",
{
"args": "none"
}
],
"prettier/prettier": [
"error",
{
"printWidth": 80,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "es5",
"arrowParens": "always",
"semi": false,
"endOfLine": "lf"
}
],
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error"
},
"overrides": [
{
"files": [
"**/*.js",
"**/*.ts",
"**/*.tsx"
],
"rules": {
"simple-import-sort/imports": [
"error",
{
"groups": [
// `react` first, `next` second, then packages starting with a character
[
"^react$",
"^next",
"^[a-z]"
],
// Packages starting with `@`
[
"^@"
],
// Packages starting with `~`
[
"^~"
],
// Imports starting with `../`
[
"^\\.\\.(?!/?$)",
"^\\.\\./?$"
],
// Imports starting with `./`
[
"^\\./(?=.*/)(?!/?$)",
"^\\.(?!/?$)",
"^\\./?$"
],
// Style imports
[
"^.+\\.s?css$"
],
// Side effect imports
[
"^\\u0000"
]
]
}
]
}
}
]
}
EditorConfig
O EditorConfig ajuda a manter estilos de código consistentes para vários desenvolvedores trabalhando no mesmo projeto em vários editores e IDEs.
Vamos adicionar o arquivo .editorconfig com a seguinte configuração:
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
indent_style = tab
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
Husky e Lint-staged
Para garantir que não vamos subir códigos com erro de lint para o repositório remoto do nosso projeto vamos adicionar o Husky e o Lint-staged.
- Husky é uma ferramenta que permite configurar Git hooks diretamente no seu projeto. Com ele, você pode executar scripts automaticamente em eventos específicos, como antes de um commit ou push. Isso garante que ações importantes, como rodar linters ou testes, sejam executadas automaticamente, ajudando a manter a qualidade do código e evitando problemas antes mesmo de serem enviados para o repositório remoto.
- Lint-staged é uma ferramenta que funciona em conjunto com o Husky, permitindo rodar linters e outros scripts apenas nos arquivos que estão sendo preparados para o commit (staged). Isso otimiza o processo, já que você não precisa executar verificações em todo o projeto, apenas nos arquivos que realmente foram alterados. Ele é ideal para manter o code style consistente de forma rápida e eficiente em times com alto volume de alterações.
Vamos instalar as dependências
npm i -D husky lint-staged
Agora vamos criar o arquivo lint-staged.config.mjs com a seguinte configuração:
import path from 'path'
const config = {
// Isso fará o lint e formatará os arquivos TypeScript e JavaScript
'*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx}': (filenames) =>
`next lint --fix --file ${filenames
.map((f) => path.relative(process.cwd(), f))
.join(' --file ')}`,
// Isso formatará arquivos MarkDown, JSON e CSS
'*.{md,json,css}': (filenames) =>
`prettier --write ${filenames
.map((f) => path.relative(process.cwd(), f))
.join(' ')}`,
}
export default config
Por fim vamos configurar o Husky com o seguinte comando:
npx husky init
Isso vai criar o script pre-commit na pasta .husky, vamos alterar esse script para ficar somente com o comando npx lint-staged.
E está pronto o sorvetinho.
Conclusão
Espero que todas essas configurações ajude vocês a melhorarem o code style de seus projetos. Lembre-se de que, embora muitas configurações sejam baseadas em preferências pessoais ou de equipe, o importante é estabelecer e seguir um padrão consistente que funcione para todos.