Configurar VSCode con ESLint y Prettier

Aquí tienes una explicación clara y completa de cómo funcionan los settings en Visual Studio Code (VS Code), incluyendo cómo se organizan, dónde viven, y cómo se aplican según el nivel.

Para explicar este tema, me estaré guiando de la documentación oficial https://code.visualstudio.com/docs/configure/settings 

¿Qué es Prettier?

Prettier es una herramienta de formateo de código automático (opinionated code formatter). Su función principal es dar un formato consistente al código sin discutir estilos personales.

Características clave

• Reescribe el código según reglas predefinidas.
• No analiza la lógica ni detecta errores.
• Se enfoca exclusivamente en el estilo: espacios, indentación, comillas, saltos de línea, longitud de línea, etc.
• Funciona al guardar el archivo o manualmente.
• Soporta múltiples lenguajes: JavaScript, TypeScript, JSON, HTML, CSS, Markdown, YAML, entre otros.

Ejemplo

Antes:

const suma=(a,b)=>{return a+b}

Después de Prettier:

const suma = (a, b) => {
  return a + b;
};

¿Qué es ESLint?

ESLint es una herramienta de análisis estático de código (linter). Sirve para detectar errores, malas prácticas y problemas de calidad en el código JavaScript/TypeScript.

Características clave

• Analiza el código sin ejecutarlo.
• Detecta:
  • Errores potenciales (no-undef, no-unused-vars)
  • Malas prácticas
  • Problemas de seguridad
  • Reglas de estilo (opcional)
• Es altamente configurable.
• Puede corregir algunos errores automáticamente (--fix).
• Se integra con frameworks como React, Vue, Angular, Node.js.

Ejemplo

let x = 10;
console.log(y);

ESLint detecta:

y is not defined

¿Qué son los settings en VS Code?

Los settings son la forma en la que VS Code configura su comportamiento: temas, fuentes, reglas de editor, plugins, formateadores, etc.

Pueden estar escritos en JSON o manipulados desde la interfaz gráfica (GUI). Ambos modifican los mismos archivos.

🧱 Tipos de settings (Niveles)

1️⃣ User Settings (Configuración de usuario)

• Afectan a todo VS Code.
• Siempre se aplican, a menos que otro nivel las sobreescriba.
• Archivo:
  • En Linux: ~/.config/Code/User/settings.json
  • Windows: %APPDATA%\Code\User\settings.json
  • Mac: ~/Library/Application Support/Code/User/settings.json

2️⃣ Workspace Settings (Configuración del proyecto)

• Solo afectan al proyecto abierto.
• Útiles para configurar formateo, reglas de linting, o plugins específicos del repo.
• Archivo:
  • .vscode/settings.json dentro del proyecto.

3️⃣ Folder Settings (si tienes multi-root workspace)

• Si usas un workspace tipo .code-workspace, puedes tener ajustes por carpeta.
• Archivo:
  • Dentro del .code-workspace secciones por carpeta.

4️⃣ Remote Settings (SSH, Dev Containers, Codespaces)

• Configuraciones que se aplican cuando trabajas en entornos remotos.
• Permiten tener un editor más adaptado al host remoto.

Configura ESLint y Prettier con VS Code

Extensión esenciales para nestjs visual studio code

• 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.

Configuración en setting de vscode

Para integrar ESLint y Prettier con VSCode es necesitaremos modificar el archivo settings.json, podemos colocar lo siguiente:

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

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