Guillermo.Arrieta/acad-ia-2
1
0
Fork 0
Code Issues 13 Pull Requests Actions Wiki Activity

Configuraciones finales de eslint, formateo y scripts de package.json

Browse Source
This commit is contained in:
Guillermo Arrieta Medina
2025-12-19 15:53:51 -06:00
parent ad197c9aad
commit b38fe2d8b4
7 changed files with 231 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
README.md
View File

@@ -1,4 +1,4 @@
Welcome to your new TanStack app!
Welcome to your new TanStack app!
# Getting Started
@@ -29,10 +29,8 @@ bun --bun run test
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
## Linting & Formatting
This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:
```bash
@@ -41,7 +39,6 @@ bun --bun run format
bun --bun run check
```
## Shadcn
Add components using the latest version of [Shadcn](https://ui.shadcn.com/).
@@ -50,9 +47,8 @@ Add components using the latest version of [Shadcn](https://ui.shadcn.com/).
pnpm dlx shadcn@latest add button
```
## Routing
This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.
### Adding A Route
@@ -68,7 +64,7 @@ Now that you have two routes you can use a `Link` component to navigate between
To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
```tsx
import { Link } from "@tanstack/react-router";
import { Link } from '@tanstack/react-router'
```
Then anywhere in your JSX you can use it like so:
@@ -91,7 +87,7 @@ Here is an example layout that includes a header:
import { Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
import { Link } from "@tanstack/react-router";
import { Link } from '@tanstack/react-router'
export const Route = createRootRoute({
component: () => (
@@ -113,7 +109,6 @@ The `<TanStackRouterDevtools />` component is not required so you can remove it
More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
## Data Fetching
There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
@@ -123,26 +118,26 @@ For example:
```tsx
const peopleRoute = createRoute({
getParentRoute: () => rootRoute,
path: "/people",
path: '/people',
loader: async () => {
const response = await fetch("https://swapi.dev/api/people");
const response = await fetch('https://swapi.dev/api/people')
return response.json() as Promise<{
results: {
name: string;
}[];
}>;
name: string
}[]
}>
},
component: () => {
const data = peopleRoute.useLoaderData();
const data = peopleRoute.useLoaderData()
return (
<ul>
{data.results.map((person) => (
<li key={person.name}>{person.name}</li>
))}
</ul>
);
)
},
});
})
```
Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
@@ -160,29 +155,29 @@ bun install @tanstack/react-query @tanstack/react-query-devtools
Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
```tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
// ...
const queryClient = new QueryClient();
const queryClient = new QueryClient()
// ...
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement);
const root = ReactDOM.createRoot(rootElement)
root.render(
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
</QueryClientProvider>
);
</QueryClientProvider>,
)
}
```
You can also add TanStack Query Devtools to the root route (optional).
```tsx
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
const rootRoute = createRootRoute({
component: () => (
@@ -192,25 +187,25 @@ const rootRoute = createRootRoute({
<TanStackRouterDevtools />
</>
),
});
})
```
Now you can use `useQuery` to fetch your data.
```tsx
import { useQuery } from "@tanstack/react-query";
import { useQuery } from '@tanstack/react-query'
import "./App.css";
import './App.css'
function App() {
const { data } = useQuery({
queryKey: ["people"],
queryKey: ['people'],
queryFn: () =>
fetch("https://swapi.dev/api/people")
fetch('https://swapi.dev/api/people')
.then((res) => res.json())
.then((data) => data.results as { name: string }[]),
initialData: [],
});
})
return (
<div>
@@ -220,10 +215,10 @@ function App() {
))}
</ul>
</div>
);
)
}
export default App;
export default App
```
You can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).
@@ -241,24 +236,24 @@ bun install @tanstack/store
Now let's create a simple counter in the `src/App.tsx` file as a demonstration.
```tsx
import { useStore } from "@tanstack/react-store";
import { Store } from "@tanstack/store";
import "./App.css";
import { useStore } from '@tanstack/react-store'
import { Store } from '@tanstack/store'
import './App.css'
const countStore = new Store(0);
const countStore = new Store(0)
function App() {
const count = useStore(countStore);
const count = useStore(countStore)
return (
<div>
<button onClick={() => countStore.setState((n) => n + 1)}>
Increment - {count}
</button>
</div>
);
)
}
export default App;
export default App
```
One of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.
@@ -266,21 +261,21 @@ One of the many nice features of TanStack Store is the ability to derive state f
Let's check this out by doubling the count using derived state.
```tsx
import { useStore } from "@tanstack/react-store";
import { Store, Derived } from "@tanstack/store";
import "./App.css";
import { useStore } from '@tanstack/react-store'
import { Store, Derived } from '@tanstack/store'
import './App.css'
const countStore = new Store(0);
const countStore = new Store(0)
const doubledStore = new Derived({
fn: () => countStore.state * 2,
deps: [countStore],
});
doubledStore.mount();
})
doubledStore.mount()
function App() {
const count = useStore(countStore);
const doubledCount = useStore(doubledStore);
const count = useStore(countStore)
const doubledCount = useStore(doubledStore)
return (
<div>
@@ -289,10 +284,10 @@ function App() {
</button>
<div>Doubled - {doubledCount}</div>
</div>
);
)
}
export default App;
export default App
```
We use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.
@@ -308,3 +303,20 @@ Files prefixed with `demo` can be safely deleted. They are there to provide a st
# Learn More
You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
# Explicación de los scripts de package.json
| Script | Comando Ejecutado | Qué hace exactamente |
| :----------------- | :----------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------ |
| **`dev`** | `vite --port 3000` | Inicia el servidor local de desarrollo forzando el puerto **3000** (http://localhost:3000). |
| **`build`** | `vite build && tsc` | Genera la versión optimizada para producción (`dist`) y después verifica errores de tipos. |
| **`preview`** | `vite preview` | Simula un servidor de producción localmente usando los archivos generados en la carpeta `dist`. |
| **`test`** | `vitest run` | Ejecuta las pruebas unitarias (tests) una sola vez y termina (no se queda observando cambios). |
| **`lint`** | `eslint .` | Ejecuta ESLint en **todos** los archivos (`.`) explícitamente. Busca errores pero no los corrige. |
| **`lint:fix`** | `eslint . --fix` | Ejecuta ESLint en todos los archivos (`.`) y **corrige automáticamente** todo lo posible (orden, limpieza). |
| **`format`** | `prettier` | Comando base de Prettier. |
| **`format:check`** | `prettier --check .` | Verifica si el código cumple el formato. Si está mal, da error. (Ideal para CI/CD). |
| **`format:fix`** | `prettier --write .` | Formatea (reescribe) todos los archivos del proyecto para que se vean bien. |
| **`check`** | `prettier --write . && eslint --fix` | **Combo de limpieza total:** Primero formatea todo el código y luego repara errores de linting. |
| **`typecheck`** | `tsc --noEmit` | Revisa la lógica y tipos de TypeScript en todo el proyecto sin generar archivos de salida. |
| **`ci:verify`** | `prettier --check . && eslint . && tsc --noEmit` | **Modo Auditoría:** Verifica formato, linter y tipos en un solo paso. Si algo falla, detiene el proceso. Ideal para CI/CD (GitHub Actions). |