Source Action

Acciones rápidas y corrección automática de problemas

Las Source Actions representan una de las características más productivas de Visual Studio Code, permitiendo aplicar correcciones automáticas y mejoras de código con un simple atajo de teclado. Estas acciones van más allá de la simple corrección de errores, ofreciendo un conjunto completo de herramientas para mantener la calidad del código de forma automatizada.

Acceso a Source Actions

El acceso principal a las Source Actions se realiza mediante el atajo Ctrl+. (punto), que abre un menú contextual con todas las acciones disponibles para el contexto actual. Este menú aparece tanto cuando el cursor está sobre un error específico como cuando se encuentra en cualquier parte del código donde existan acciones aplicables.

// Coloca el cursor sobre 'unusedVariable' y presiona Ctrl+.
let unusedVariable = "ejemplo";
console.log("Hola mundo");

Alternativamente, las Source Actions también son accesibles a través del menú contextual del botón derecho del ratón, donde aparecen bajo la opción "Source Action" o mediante la Command Palette (Ctrl+Shift+P) buscando "Source Action".

Quick Fix automático

El sistema de Quick Fix detecta automáticamente errores de sintaxis, variables no utilizadas, importaciones faltantes y otros problemas comunes del código. Cuando Visual Studio Code identifica un problema que puede corregirse automáticamente, muestra una bombilla amarilla (lightbulb) en el margen izquierdo del editor.

// Error: Variable declarada pero no utilizada
let mensaje = "Hola";
// Quick Fix sugerirá: "Remove unused declaration"

// Error: Importación faltante
const fs = require('fs'); // Quick Fix añadirá la importación automáticamente

Al hacer clic en la bombilla o presionar Ctrl+., aparece una lista de correcciones sugeridas específicas para el problema detectado. Estas correcciones incluyen:

• Eliminación de código no utilizado: Variables, importaciones y funciones sin referencias
• Corrección de tipos: Conversiones automáticas y ajustes de tipos de datos
• Añadir declaraciones faltantes: Importaciones, declaraciones de variables y funciones
• Corrección de sintaxis: Paréntesis, llaves y puntos y comas faltantes

Code Actions desde el editor

Las Code Actions van más allá de las correcciones de errores, proporcionando mejoras proactivas del código. Estas acciones están disponibles incluso cuando no existen errores, permitiendo aplicar refactorizaciones y optimizaciones de forma preventiva.

<!-- Ejemplo en HTML: Convertir a etiqueta semántica -->
<div class="header">
  <h1>Título principal</h1>
</div>
<!-- Code Action sugerirá: "Convert to semantic header tag" -->

El indicador visual de las Code Actions aparece como una bombilla azul cuando hay mejoras disponibles, diferenciándose de la bombilla amarilla que indica errores. Al activar estas acciones, Visual Studio Code presenta opciones como:

• Extract to function: Convertir código seleccionado en una función independiente
• Convert to arrow function: Transformar funciones tradicionales a funciones flecha
• Add missing imports: Importar automáticamente módulos utilizados
• Organize imports: Reordenar y limpiar las declaraciones de importación

Organize Imports automáticamente

La funcionalidad Organize Imports mantiene las importaciones del código ordenadas y optimizadas automáticamente. Esta acción elimina importaciones no utilizadas, ordena alfabéticamente las declaraciones y agrupa las importaciones por tipo.

// Antes de Organize Imports
import { useState, useEffect } from 'react';
import axios from 'axios';
import { Component } from 'react';
import { helper } from './utils';

// Después de Organize Imports
import { Component, useEffect, useState } from 'react';
import axios from 'axios';
import { helper } from './utils';

Para activar Organize Imports, utiliza Ctrl+. y selecciona "Organize Imports" del menú, o accede directamente mediante Shift+Alt+O. Esta acción es especialmente útil en proyectos grandes donde las importaciones pueden volverse desorganizadas con el tiempo.

Format Document y Format Selection

Las opciones de formateo automático mantienen la consistencia visual del código aplicando reglas de estilo predefinidas. Format Document (Shift+Alt+F) aplica el formateo a todo el archivo, mientras que Format Selection formatea únicamente el código seleccionado.

/* Antes del formateo */
.container{display:flex;justify-content:center;align-items:center;height:100vh;}

/* Después del formateo */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

El formateo automático ajusta la indentación, espaciado, saltos de línea y otros aspectos visuales según las convenciones del lenguaje. Visual Studio Code incluye formateadores integrados para HTML, CSS, JavaScript, TypeScript y JSON, aplicando reglas estándar de la industria.

Auto Fix on Save

La configuración Auto Fix on Save automatiza la aplicación de correcciones cada vez que se guarda un archivo, eliminando la necesidad de aplicar manualmente las Source Actions. Esta funcionalidad se activa en la configuración de Visual Studio Code.

Para habilitar Auto Fix on Save, accede a la configuración (Ctrl+,) y busca "auto fix on save", o añade la siguiente configuración en settings.json:

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true
  }
}

Esta configuración aplica automáticamente todas las correcciones disponibles y organiza las importaciones cada vez que guardas el archivo, manteniendo el código limpio sin intervención manual.

Source Actions específicas por lenguaje

Cada lenguaje de programación ofrece Source Actions específicas adaptadas a sus características particulares. Visual Studio Code reconoce el contexto del lenguaje y presenta acciones relevantes para cada tipo de archivo.

Para archivos HTML:

<!-- Convert to self-closing tag -->
<img src="imagen.jpg"></img>
<!-- Se convierte automáticamente a: -->
<img src="imagen.jpg" />

<!-- Add missing alt attribute -->
<img src="imagen.jpg" />
<!-- Source Action sugerirá añadir: alt="" -->

Para archivos CSS:

/* Convert to shorthand property */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
/* Se convierte a: margin: 10px 15px; */

/* Add vendor prefixes */
transform: rotate(45deg);
/* Añade automáticamente prefijos -webkit-, -moz-, etc. */

Para archivos JavaScript:

// Convert to template literal
const mensaje = "Hola " + nombre + ", bienvenido";
// Se convierte a: const mensaje = `Hola ${nombre}, bienvenido`;

// Add missing return statement
function calcular(a, b) {
  a + b; // Source Action sugerirá añadir 'return'
}

Estas acciones específicas mejoran la productividad al automatizar transformaciones comunes de cada lenguaje, reduciendo el tiempo dedicado a tareas repetitivas y minimizando errores manuales en el proceso de desarrollo.