Estrutura de um Projeto Vite com React e TypeScript: node_modules, package.json, ESLint e Prettier

O Vite é uma ferramenta de build moderna que oferece carregamento rápido de módulos e suporte nativo a TypeScript, JSX, CSS Modules e outras tecnologias. Quando combinado com React, ele forma uma stack poderosa para desenvolvimento front-end.

Neste guia, você aprenderá sobre a estrutura básica de um projeto criado com Vite + React-TS, incluindo a pasta node_modules, o arquivo package.json, além da configuração de ferramentas como ESLint e Prettier para garantir qualidade e padronização do código.

Como Criar um Projeto com Vite, React e TypeScript

Para iniciar seu projeto, execute:

npm create vite@latest my-app --template react-ts

Este comando cria um projeto otimizado com todas as dependências necessárias para trabalhar com React e TypeScript, sem precisar configurar manualmente loaders ou transpilers.

Estrutura Básica de Pastas e Arquivos

Após a instalação, sua estrutura inicial será parecida com esta:

my-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── components/
│   │   └── Counter.tsx
│   ├── App.tsx
│   └── main.tsx
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── .gitignore

Principais arquivos e pastas:

• public/ – Armazena arquivos estáticos que não são processados pelo bundler.
• src/assets/ – Recomendado para imagens e recursos que passam por otimização durante o build.
• src/components/ – Pasta destinada aos componentes reutilizáveis do React.
• src/App.tsx – Componente principal da aplicação.
• src/main.tsx – Responsável por renderizar o componente raiz no DOM.
• index.html – Ponto de entrada da aplicação onde o Vite injeta os scripts automaticamente.
• package.json – Contém metadados do projeto, scripts e dependências instaladas.
• tsconfig.json – Configurações do compilador TypeScript.
• vite.config.ts – Arquivo de configuração do Vite.
• .gitignore – Define quais arquivos devem ser ignorados pelo Git, como node_modules.

A Pasta node_modules e o Arquivo package.json

A pasta node_modules é onde todas as dependências do projeto são instaladas. Ela é criada automaticamente quando você executa o comando:

npm install

Dentro dela, ficam armazenadas todas as bibliotecas listadas nas seções "dependencies" e "devDependencies" do arquivo package.json .

O package.json , por sua vez, é o coração do projeto. Ele contém metadados como nome, versão, descrição, scripts de execução e a lista de pacotes utilizados. É ele quem define quais bibliotecas devem ser instaladas e como os comandos do projeto devem funcionar.

Se você clonar um projeto, a pasta node_modules não estará presente (geralmente ignorada pelo Git). Para reconstruí-la, basta rodar npm install dentro do diretório do projeto.

Se quiser entender mais sobre esses dois elementos essenciais no desenvolvimento com Node.js, leia nosso artigo completo:
👉 O que é o Arquivo package.json e a Pasta node_modules?

Integração com ESLint e Prettier

Para garantir boas práticas de escrita de código e manter a padronização entre equipes, use ESLint e Prettier.

Passo a passo:

1. Instale as dependências:

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

2. Crie o arquivo .eslintrc.js:

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'prettier'],
  rules: {}
}

3. Crie o arquivo prettier.config.js:

module.exports = {
  printWidth: 120,
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  bracketSpacing: true,
  arrowParens: 'always'
}

4. Adicione os scripts no package.json:

{
  "scripts": {
    "lint": "eslint . --ext .ts .tsx",
    "format": "prettier --write ."
  }
}

Problemas Comuns e Soluções

Erro: Cannot read config file /node_modules/eslint-config-prettier/react.js

Esse erro ocorre quando há conflito entre versões ou falta de compatibilidade entre eslint-config-prettier e eslint-plugin-prettier. A solução é reinstalar as dependências relacionadas ao ESLint e Prettier.

Erro: Cannot find module ‘eslint-plugin-prettier’

Instale o plugin manualmente:

npm install eslint-plugin-prettier --save-dev

Esse problema pode surgir se houver falha na instalação das dependências.

Erro: ESLint couldn’t find the config “prettier”

Certifique-se de que eslint-config-prettier está instalado:

npm install eslint-config-prettier --save-dev

Além disso, verifique se "prettier" está incluso em extends dentro do .eslintrc.js.

Considerações Finais

Entender a estrutura de um projeto criado com Vite, React e TypeScript é essencial para construir aplicações modernas e bem organizadas.

A pasta node_modules armazena todas as dependências do projeto, enquanto o package.json define os scripts, configurações e pacotes instalados.

Ferramentas como ESLint e Prettier ajudam a melhorar a qualidade do código, facilitando a colaboração e mantendo a consistência estilística.

Ao seguir boas práticas de organização e integração, você constrói projetos mais escaláveis, fáceis de manter e alinhados às melhores práticas do mercado.