DevCat — programa en español

Escribe en español lo que necesitas y DevCat te sugiere el código, con su explicación.

• HTML: parrafo + → párrafo + negrita <p><b>Texto</b></p>, + cursiva, + subrayado...
• Python: si → if condición:, mostrar → print(), si + → si + sino.
• CSS: mostrar + flexible → display: flex;, negrita → font-weight: bold;, centrar → la receta completa.
• JavaScript: mostrar → console.log(), lista + agregar → lista.push(valor), botón + al hacer clic.
• Explicaciones: pasa el cursor sobre <b>, print, for... y DevCat te dice qué hace.
• Buscador: Alt+B y escribe lo que buscas (también Alt+D, pero si tu VS Code está en español, Alt+D abre el menú «Editar»).

Ajustes: devcat.sugerencias, devcat.explicaciones, devcat.lenguajes.

Programar en español (traductor)

Clic derecho en el editor, o Ctrl+Shift+P:

• DevCat: Traducir a Python: si, sino, mostrar, para cada x en lista... pasan a if, else, print, for x in lista.
• DevCat: Traducir a español: al revés, para entender código en inglés.
• DevCat: Ejecutar código en español: lo traduce en una copia y lo ejecuta en la terminal. Traduce lo seleccionado o, si no hay selección, todo el archivo. Ctrl+Z lo deshace. Nunca toca textos entre comillas, comentarios ni tus variables. Necesita Python instalado (ajuste devcat.python).

Explorador de código

Selecciona código (o nada, para todo el archivo) → clic derecho → DevCat: Explicar código. Se abre un panel con: resumen, paso a paso (clic en un paso = ir a esa línea), variables (dónde se crean, dónde se usan y cuáles vienen de antes), qué puedes cambiar e instrucciones usadas. Funciona con Python, HTML y código en español.

Errores en español

• DevCat: Ejecutar código en español corre tu programa en la terminal. Si falla, se abre un panel con Lucas: en qué línea (de TU archivo en español), qué pasó, cómo arreglarlo y el camino hasta el error. Lo mismo sale en la terminal.
• DevCat: Explicar error (el que copiaste): copia cualquier error de Python (también de programas en inglés) y DevCat lo explica. Reconoce unos 37 mensajes comunes; los demás se explican por su tipo (error de valor, de tipo...).

Combinaciones con validación (1.0)

• HTML, etiqueta + atributo: imagen + texto alternativo → <img src="…" alt="…">, enlace + abrir en otra pestaña, campo de texto + obligatorio + texto de ejemplo, y se mezclan con etiquetas: enlace + abrir en otra pestaña + negrita. imagen + sugiere los atributos que valen para <img>.
• Python, tipo + método: lista + agregar → lista.append(valor), texto + mayúsculas; función + argumento: mostrar + separador, abrir archivo + escribir, ordenar + inverso, redondear + decimales.
• Si no se puede (imagen + href, texto + agregar, mostrar + negrita) aparece con ✗ y explica por qué y qué usar.

CSS (1.1)

• En archivos .css, dentro de <style> y en style="…". Dentro de { } sugiere declaraciones; afuera, reglas completas, @media y recetas. Mientras escribes un valor (color: ro…) no estorba.
• Propiedad + valor: mostrar + flexible → display: flex;, color + rojo, relleno + 20px, ancho + 50%.
• Selector + propiedades: por clase + negrita + cursiva → .tarjeta { font-weight: bold; font-style: italic; }, al pasar el ratón + agrandar, por clase + mostrar + flexible + al centro.
• Recetas: centrar, tarjeta con sombra, botón bonito, menú horizontal, dos columnas, galería adaptable, diseño para celular, modo oscuro, reinicio básico...
• Lo que no se puede, explicado: color + flexible ✗ («flex sirve en display»), color + 20px ✗, relleno + -10px ✗ (el relleno no puede ser negativo), grosor de letra + 0 ✗. Todo comprobado contra Chrome.
• Al pasar el cursor: propiedades, valores (flex en display: flex), :hover, @media, calc()...
• Explicar código con CSS: cada selector en palabras («los enlaces que son hijos directos de algo con clase menu — al pasar el ratón»), y avisos de errores típicos: propiedad mal escrita (colr), en español (ancho), valor que no corresponde (display: flexible, color: rojo), falta ; o la unidad (width: 10), propiedad repetida, } de más o de menos, variable var(--x) sin definir.

JavaScript (1.2)

• En archivos .js, dentro de <script> y en onclick="…". Nunca sugiere dentro de textos ni comentarios, ni después de un punto (lista.pu…: ahí ayuda el autocompletado de VS Code).
• Tipo + método: lista + agregar → lista.push(valor), texto + mayúsculas → texto.toUpperCase(), número + con decimales → numero.toFixed(2). texto + agregar ✗ explica que los textos no tienen push.
• Elemento + evento: botón + al hacer clic busca el botón y escucha el clic; formulario + al enviar agrega preventDefault(); botón + al enviar ✗ explica que submit va en el <form>.
• Recetas: botón que hace algo, contador de clics, mostrar y ocultar, validar formulario, lista de tareas, guardar en el navegador, cuenta regresiva, número al azar, filtrar mientras escribe, modo oscuro...
• Al pasar el cursor: console.log, push, if, ===, => y el evento de addEventListener("click").
• Explicar código con JavaScript: cada instrucción en español, variables y parámetros, eventos, y avisos de errores típicos: = dentro de un if, cambiar una const, .lenght, getElementByID, mostrar(...) en español, querySelector("boton") sin #, "onclick" en vez de "click", push en un texto, llaves o comillas sin cerrar.