README.es.md

Guia simple para inciar un proyecto con Node.js y TypeScript

Indice

• Configuración
• Características
• Uso
  • ESlint
  • Prettier
  • Correr el proyecto
• Ejemplo

Características

• pnpm para manejar las dependencias
• TypeScript
• ESlint para errores de sintaxis
• Prettier para formatear el código

Configuración

1. Crear un directorio para el proyecto

mkdir node_project
cd node_project

2. Inicializar el proyecto con pnpm

pnpm init

Copiar lo siguiente y pegarlo en package.json.

{
    "name": "getting-started-node-typescript",
    "repository": {
        "type": "git",
        "url": "https://github.com/rapax00/getting-started-node-typescript"
    },
    "keywords": [],
    "author": "Rapax",
    "license": "MIT",
    "homepage": "https://github.com/rapax00/getting-started-node-typescript#readme",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "tsc && node dist/index.js",
        "lint": "eslint .",
        "format": "exec prettier . --write",
        "format-spec": "prettier --write",
        "check": "prettier . --check",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
        "@eslint/js": "^9.9.1",
        "eslint": "^9.9.1",
        "globals": "^15.9.0",
        "prettier": "3.3.3",
        "typescript": "^5.5.4",
        "typescript-eslint": "^8.3.0"
    }
}

3. Establecer la versión de node

Crear un archivo .nvmrc.

touch .nvmrc

Copiar lo siguiente y pegarlo en .nvmrc. ( o la versión que prefieras )

v20.13

4. Crear un archivo para ingrnorar los archivos que no sean necesarios

touch .gitignore

Copiar lo siguiente y pegarlo en .gitignore.

node_modules
dist

5. Crear un archivo de configuración para TypeScript

touch tsconfig.json

Copiar lo siguiente y pegarlo en tsconfig.json.

{
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es6",
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist",
        "strict": true,
        "noImplicitAny": true,
        "skipLibCheck": true
    },
    "lib": ["es2015"],
    "include": ["**/*"],
    "exclude": ["node_modules", "dist"]
}

6. Instalar las dependencias

pnpm i

7. Configurar ESLint

Crear un archivo de configuración

pnpm eslint --init

Seleccionar las siguientes opciones:

1. How would you like to use ESLint?
   • To check syntax and find problems
2. What type of modules does your project use?
   • JavaScript modules (import/export)
3. Which framework does your project use?
   • None of these
4. Does your project use TypeScript?
   • Yes
5. Where does your code run?
   • Node
6. Would you like to install them now?
   • Yes
7. Which package manager do you want to use?
   • pnpm

Copiar lo siguiente y pegarlo en eslint.config.mjs.

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';

export default [
    { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
    { ignores: ['node_modules', 'dist'] },
    { languageOptions: { globals: globals.node } },
    pluginJs.configs.recommended,
    ...tseslint.configs.recommended,
];

8. Configurar Prettier

Crear un archivo de configuración

touch .prettierrc

Copiar lo siguiente y pegarlo en .prettierrc.

{
    "printWidth": 80,
    "tabWidth": 4,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParens": "always"
}

Crear un archivo de ignore para prettier

touch .prettierignore

Copiar lo siguiente y pegarlo en .prettierignore.

node_modules
dist

Prettier también seguirá las reglas especificadas en .gitignore si existe en el mismo directorio desde el que se ejecuta.

Uso

ESLint

pnpm lint

Prettier

Formatear el código

pnpm format

Formatear una carpeta o archivo específico

pnpm format-spec <ruta>

Formatear todos los archivos de prueba

pnpm format-spec <ruta/**/*.test.js>

Chequear si el código está formateado

pnpm check

Ejemplo

Este es un ejemplo simple para probar el proyecto

1. Crear directorio

mkdir src

Moverse al directorio

cd src

Crear un archivo index.ts

touch index.ts

Copiá lo siguiente y pegalo dentro

console.log('Congratulations, you are ready to start coding! 🎉');

2. Ejecutá el proyecto y disfrutalo

Mirá tu consola

pnpm start

Compila el proyecto y ejecuta el archivo dist/index.js

---

Hecho con 👐 por Rapax

Tips son bienvenido a través de Lightning Zap a ⚡[email protected].