Introdução
English version: React and typescript components lib, part 2: code standardization with typescript-eslint and prettier
No mês passado comecei a parte 1 da criação de uma biblioteca de componentes React com Typescript, focando na parte de configuração inicial e publicação. Agora nesse artigo, será incrementada a lib, com a definição de regras de padronização de código usando typescript-eslint e prettier. A ideia é colocar mais a parte prática de adição nesse artigo, para quem quiser entender mais a fundo como funciona de forma geral escrevi o artigo Typescript-eslint + prettier para padronização de código em React com Typescript no meio do mês.
Libs
typescript-eslint: responsável por analisar o código na busca e solução de problemas
prettier: responsável pela formatação de código
Setup libs
Adição do typescript-eslint, prettier e plugins que serão utilizados:
yarn add typescript-eslint eslint @eslint/js prettier eslint-plugin-react --dev
- typescript-eslint: permite o eslint fazer parse de sintaxe typescript, traz regras de linting para typescript
- eslint: dependência que o typescript-eslint necessita
- @eslint/js: traz regras do eslint
- prettier: adiciona a lib responsável pela formatação do código
- eslint-plugin-react: traz regras de linting para React
No momento desse artigo gerou as seguintes versões:
"@eslint/js": "^9.19.0",
"eslint": "^9.19.0",
"eslint-plugin-react": "^7.37.4",
"prettier": "^3.4.2",
"typescript-eslint": "^8.23.0"
Arquivo de configuração
Para o prettier será adicionado um arquivo na raiz da app de configuração vazio .prettierrc, por seguir as regras default dele.
Para o typescript-eslint será criado o arquivo de configuração na raiz do projeto, que vai permitir rodar a verificação do código e definir as regras que serão utilizadas para a análise. A princípio serão usadas as regras recomendadas do eslint, typescript-eslint e react:
- eslint.config.mjs
import eslint from "@eslint/js";
import reactPlugin from "eslint-plugin-react";
import tseslint from "typescript-eslint";
export default tseslint.config(
eslint.configs.recommended,
tseslint.configs.recommendedTypeChecked,
{
languageOptions: {
parserOptions: {
projectService: true,
tsconfigRootDir: import.meta.dirname,
},
},
},
reactPlugin.configs.flat.recommended,
reactPlugin.configs.flat['jsx-runtime'],
{
settings: {
react: {
version: "detect",
},
}
}
);
- tseslint.config: onde é passada as configurações do typescript-eslint
- eslint.configs.recommended: aplica as regras recomendadas do eslint na análise do código
- tseslint.configs.recommendedTypeChecked: aplica as regras recomendadas do typescript na análise do código, permitindo linting com informação de types
- projectService: melhora a performance ao compartilhar um único serviço de análise de tipos para múltiplos arquivos
- import.meta.dirname: indica a raiz do projeto para o parser
- reactPlugin.configs.flat.recommended: aplica as regras recomendadas do React na análise do código
- reactPlugin.configs.flat['jsx-runtime']: necessário para React 17+, para funcionar com o novo jsx runtime que veio a partir dessa versão
- settings: está definido para detectar a versão de React que está sendo usada no projeto
Regras customizáveis
Tem algumas regras que acredito ser interessante modificar ou adicionar em relação as recomendadas. Para isso será necessário modificar o arquivo de configuração do typescript-eslint com a adição de rules:
- eslint.config.mjs
import eslint from "@eslint/js";
import reactPlugin from "eslint-plugin-react";
import tseslint from "typescript-eslint";
export default tseslint.config(
eslint.configs.recommended,
tseslint.configs.recommendedTypeChecked,
{
languageOptions: {
parserOptions: {
projectService: true,
tsconfigRootDir: import.meta.dirname,
},
},
},
reactPlugin.configs.flat.recommended,
reactPlugin.configs.flat['jsx-runtime'],
{
settings: {
react: {
version: "detect",
},
},
rules: {
"no-console": "warn",
"no-duplicate-imports": "error",
"react/destructuring-assignment": "error",
"react/jsx-no-useless-fragment": "error",
"@typescript-eslint/no-unused-vars": "off",
}
}
);
| Procedência | Regra | Default (usando a recomendada) | Com a customização |
|---|---|---|---|
| eslint | no-console | desabilitada | habilitada, retorna aviso se tiver console.log no código |
| eslint | no-duplicate-imports | desabilitada | habilitada, retorna erro se tiver imports duplicados |
| plugin react | react/destructuring-assignment | desabilitada | habilitada, retorna erro se a props não estiverem desestruturadas |
| plugin react | react/jsx-no-useless-fragment | desabilitada | habilitada, retorna erro se tiver fragmento desnecessário |
| typescript-eslint | @typescript-eslint/no-unused-vars | habilitada | desabilitada, não retornando erro para variavéis ou parâmetros não usados |
A razão para desabilitar a regra @typescript-eslint/no-unused-vars, é pela lib de componentes que está sendo criada estar acima da versão 17 do React. Com a regra habilitada retorna erro, pois na definição dos componentes da lib está definido: import React from "react";
No caso do desenvolvimento na lib, não precisaria desse import, mas se está colocando ele pois a aplicação que adicionar a lib pode estar em uma versão de React abaixo da 17, o que demanda o import estar presente. Por esse motivo foi desabilitada a regra.
package.json
No momento o package.json está da forma abaixo:
{
"name": "react-example-lib",
"version": "0.1.0",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/griseduardo/react-example-lib.git"
},
"scripts": {
"build": "rollup -c --bundleConfigAsCjs",
},
"devDependencies": {
"@eslint/js": "^9.19.0",
"@rollup/plugin-commonjs": "^28.0.2",
"@rollup/plugin-node-resolve": "^16.0.0",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-typescript": "11.1.6",
"@types/react": "^19.0.8",
"eslint": "^9.19.0",
"eslint-plugin-react": "^7.37.4",
"prettier": "^3.4.2",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"rollup": "^4.30.1",
"rollup-plugin-dts": "^6.1.1",
"rollup-plugin-peer-deps-external": "^2.2.4",
"styled-components": "^6.1.14",
"typescript": "^5.7.3",
"typescript-eslint": "^8.23.0"
},
"peerDependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0",
"styled-components": "^6.1.14"
}
}
Será adicionado scripts para garantir a padronização de código usando as regras definidas no arquivo de configuração do typescript-eslint, além disso vai ser mudada a versão para 0.2.0, uma vez que uma nova versão da lib será disponibilizada:
{
"name": "react-example-lib",
"version": "0.2.0",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/griseduardo/react-example-lib.git"
},
"scripts": {
"build": "rollup -c --bundleConfigAsCjs",
"lint-src": "eslint src",
"lint-src-fix": "eslint src --fix",
"format-src": "prettier src --check",
"format-src-fix": "prettier src --write"
},
"devDependencies": {
"@eslint/js": "^9.19.0",
"@rollup/plugin-commonjs": "^28.0.2",
"@rollup/plugin-node-resolve": "^16.0.0",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-typescript": "11.1.6",
"@types/react": "^19.0.8",
"eslint": "^9.19.0",
"eslint-plugin-react": "^7.37.4",
"prettier": "^3.4.2",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"rollup": "^4.30.1",
"rollup-plugin-dts": "^6.1.1",
"rollup-plugin-peer-deps-external": "^2.2.4",
"styled-components": "^6.1.14",
"typescript": "^5.7.3",
"typescript-eslint": "^8.23.0"
},
"peerDependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0",
"styled-components": "^6.1.14"
}
}
- lint-src: vai verificar todos os arquivos dentro da pasta src (pois é onde está a definição dos componentes), seguindo as regras definidas no arquivo de configuração do typescript-eslint
- lint-src-fix: vai autocorrigir todos os arquivos dentro da pasta src, seguindo as regras definidas no arquivo de configuração do typescript-eslint
- format-src: vai verificar a formatação de todos os arquivos dentro da pasta src, seguindo as regras do prettier
- format-src-fix: vai autocorrigir a formatação de todos os arquivos dentro da pasta src, seguindo as regras do prettier
Arquivo CHANGELOG
No momento o CHANGELOG.md está da forma abaixo:
## 0.1.0
_Jan. 29, 2025_
- initial config
Como uma nova versão será disponibilizada, será adicionado sobre o que foi modificado no arquivo:
## 0.2.0
_Fev. 24, 2025_
- setup typescript-eslint and prettier
- add custom rules
## 0.1.0
_Jan. 29, 2025_
- initial config
Estrutura de pastas
A estrutura de pastas está da seguinte forma, sendo que além da modificação de alguns arquivos, foi só adicionado dois arquivos de configuração na raiz:
Publicação nova versão
Primeiro passo a ser realizado é ver se a execução do rollup ocorre com sucesso. Para isso será executado o yarn build no terminal, que foi definido em package.json.
Executando com sucesso, é realizar a publicação da nova versão da lib: npm publish --access public
Conclusão
A ideia desse artigo foi adicionar regras de padronização de código para a lib de componentes que está sendo criada, usando typescript-eslint e prettier.
Segue o repositório no github e a lib no npmjs com as novas modificações.
Top comments (0)