Entorno de trabajo para NestJS

Para configurar un entorno de trabajo óptimo para NestJS en Visual Studio Code (VSCode), necesitarás realizar algunos ajustes e instalar extensiones específicas que mejorarán tu experiencia de desarrollo. A continuación, te proporciono una guía paso a paso para configurar tu entorno de trabajo.

Instalar NodeJS

Antes de comenzar, asegúrate de que Node.js esté instalado en tu máquina, ya que NestJS funciona con Node.js. Esto también instalará npm, que es el gestor de paquetes necesario para instalar las dependencias de NestJS.

El siguiente enlace: Cómo instalar y usar NVM para gestionar versiones de Node.js en Ubuntu y Windows puede instalar la versión de node según su requerimiento

Instalar Nest CLI

El CLI de NestJS te facilita la creación de proyectos, módulos, controladores, servicios y más. Instálalo globalmente en tu máquina:

npm install -g @nestjs/cli

Para verificar la instalación

bash nest --version

Instalar Visual Studio Code

Si aún no tienes Visual Studio Code instalado, descargarlo desde su sitio oficial. https://code.visualstudio.com/

Extensión esenciales para nestjs visual studio code

• Material icons es una extensiónque permite personalizar los iconos y caretas de los proyectos en visual studio code, esto facilita y ayuda visualmente a encontrar o diferenciar el archivo.
• Prettier - Code formatter: para formatear tu código automáticamente.
• ESLint esta extensión asegura que tu código siga las reglas de estilo y mejores prácticas configuradas en el archivo .eslintrc.js del proyecto. Te ayudará a detectar errores de sintaxis y aplicar un código más limpio y consistente.

Exenciones para navegador

• Json viwer: lo puede buscar para el navegador que trabaje, esta extensión permite customizar y mejorar visualmente las estructuras JSON en el navegador web.

Configurar visual studio

Configurar Material icons

/.vscode vamos a crear el siguiente archivo : settings.json donde agregamos la siguiente linea

{
	"material-icon-theme.activeIconPack": "nest"
}

Configurar prettierrc

En tu proyecto, crea el archivo o edita el archivo .prettierrc

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "all"
}

Configurar eslint

Asegúrate de que tienes un archivo de configuración .eslintrc.js en tu proyecto (ya debería estar por defecto si creaste el proyecto con Nest CLI). Ingresamos a /.eslintrc  o eslint.config.mjs donde realizamos lo siguiente:

Agregamos al final el siguiente contenido dentro de rules

rules: {
  ...
  "prettier/prettier": [
    "error",
    {
      endOfLine: "auto"
    }
  ],
},

Esto se hace para que en Windows no genere error los saltos de linea CR

Configuración de Debugging en VS Code

Crea el archivo .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug NestJS",
      "runtimeArgs": ["run", "start:debug"],
      "runtimeExecutable": "npm",
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "skipFiles": ["<node_internals>/**"],
      "cwd": "${workspaceFolder}"
    }
  ]
}

🎨 Configuración de VS Code (settings.json)

Abre Ctrl + Shift + P → escribe Preferences: Open Settings (JSON) y agrega:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "typescript.tsdk": "node_modules/typescript/lib",
  "files.eol": "\n",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["typescript", "javascript"],
  "workbench.iconTheme": "material-icon-theme"
}