# Editor de código > El editor de Python de Pyzed Design: autocompletado, información al pasar el ratón, ir a la definición, renombrar, arreglos rápidos, diagnósticos, code lens, sticky scroll, plegado, minimapa, servidores de lenguaje ty y ruff, teclas y ajustes. Source: https://albakore.github.io/pyzed/es/editor/code-editor/ El panel **Código** (dock inferior) es un editor de Python respaldado por dos servidores de lenguaje de Astral: **ty** (tipos, autocompletado, referencias) y **ruff** (lint y formato). Aparece cuando abres un manejador o un archivo del proyecto y se va cuando lo cierras. (Image: Escribiendo el código del evento click de un botón) ## Qué edita El editor muestra **un manejador** o **el archivo de código entero**: | Modo | Cómo llegar | Título | | --- | --- | --- | | Un manejador | Doble clic en un control o en un evento, Enter con un control seleccionado, **View code**, un método del [panel Component](https://albakore.github.io/pyzed/es/editor/component-designer/#el-panel-component). | `login.py › sign_in_click()` | | Archivo entero | F7, **Editar el código** (barra de herramientas, menú ☰, paleta), o **Whole file** en la cabecera. | `login.py` | | Un archivo del proyecto | Un clic en un archivo de texto de la [pestaña Proyecto](https://albakore.github.io/pyzed/es/editor/projects/#archivos), o Ctrl+P. | `src/shop/cart.py` | **Whole file** y **This handler** en la cabecera cambian entre los dos. En modo manejador solo ves la función, pero los servidores de lenguaje siempre ven el módulo entero con ese manejador dentro, así que el autocompletado y los diagnósticos conocen los imports y las funciones auxiliares del principio del archivo. ## La cabecera La cabecera del panel está en inglés: | Elemento | Hace | | --- | --- | | Título | El archivo de código y, en modo manejador, la función. | | **Problems** (`2 · 1`) | Errores y avisos del código; clic para mostrar u ocultar la lista de problemas. Una marca de verificación indica que no hay ninguno. | | **Engranaje** | Abre los [ajustes del editor](#ajustes-del-editor). | | **Whole file / This handler** | Cambia de modo. | | **Apply** | Comprueba la sintaxis, escribe el código en el documento y, con *Format with ruff on Apply* activo, lo formatea. | | **×** | Cierra el editor (antes aplica el código). | Tu código se aplica solo al documento cada vez que cambias de manejador, de modo o de pestaña, guardas o ejecutas; **Apply** sirve para comprobarlo (y formatearlo) en el momento. Si el código no se puede analizar, una línea roja bajo el editor dice dónde (`Line 3: invalid syntax`), y guardar, ejecutar o cambiar esperan a que lo arregles. ## Escribir código - **Resaltado de sintaxis** de Python, con el tema del editor (o uno propio, ver los ajustes). - **Sangría**: Tab inserta espacios (el *Tamaño de tabulación*), o una tabulación con *Sangrar con tabulaciones*; Enter mantiene la sangría de la línea (sus espacios y tabulaciones) y añade un nivel después de `:`; Retroceso dentro de la sangría quita un nivel entero (un espacio si se apaga *Retroceso borra un nivel entero*). Ver [Tabulaciones o espacios](#tabulaciones-o-espacios). - **Paréntesis y comillas**: escribir `(`, `[`, `{`, `"` o `'` inserta su pareja, envuelve la selección si la hay, y escribir el carácter de cierre lo salta en lugar de duplicarlo. - **Margen**: números de línea (siguen a las líneas ajustadas) y la línea actual resaltada. - **Plegado**: los chevrons del margen pliegan y despliegan bloques (funciones, clases, `if`...); Ctrl+Shift+[ pliega el bloque más interior alrededor del cursor y Ctrl+Shift+] lo despliega. - **Minimapa**: el código en miniatura a la derecha; haz clic o arrastra en él para desplazarte. - **Métodos de entrada**: los métodos de entrada (IME) de chino, japonés y coreano funcionan: el texto que se está componiendo se dibuja en el cursor y el texto confirmado se inserta en cada cursor. - **Espacios en blanco**: opcionalmente dibuja los espacios como `·` y los tabuladores como `→`. - **Zoom**: Ctrl+=, Ctrl+- o Ctrl+rueda cambian el tamaño de letra; Ctrl+0 lo restablece. El tamaño se guarda. - **Desplazamiento**: la rueda del ratón desplaza el código (Mayús+rueda, de lado) y las barras de desplazamiento quedan a la derecha del minimapa. La vista también sigue al cursor. - **Desplazamiento fijo** (sticky scroll): mientras te desplazas, las líneas que abren los bloques en los que estás (`class`, `def`, `for`, `if`, `with`...) quedan fijas arriba del editor, la más interna al final, así siempre sabes dónde estás. Haz clic en una para ir a ella. Se fijan hasta cinco líneas; se desactiva con *Desplazamiento fijo* en los ajustes. - **Líneas largas**: por defecto se desplazan de lado; Alt+Z (o *Ajustar líneas largas* en los ajustes) las ajusta al ancho del editor. (Image: El archivo entero con dos manejadores plegados y el minimapa) ### Teclas en el editor | Teclas | Acción | | --- | --- | | Flechas, Inicio, Fin | Mover el cursor. | | Ctrl+← / → | Mover por palabras. | | Ctrl+Inicio / Fin | Principio o final del código. | | RePág / AvPág | Una página arriba o abajo. | | Shift + cualquiera de las anteriores | Ampliar la selección. | | Ctrl+A | Seleccionar todo. | | Ctrl+C / X / V | Copiar, cortar, pegar. | | Tab | Sangrar (insertar espacios). | | Ctrl+Espacio | Abrir la lista de sugerencias. | | F12, Ctrl+clic | Ir a la definición. | | Alt+← / → | Volver atrás / adelante después de un salto. | | Shift+F12 | Buscar todas las referencias. | | F2 | Renombrar el símbolo. | | Ctrl+. | Arreglos rápidos y refactorizaciones. | | Ctrl+Shift+[ / ] | Plegar / desplegar en el cursor. | | Ctrl+= / - / 0 | Letra más grande, más pequeña, por defecto. | | Ctrl+Z / Ctrl+Shift+Z | Deshacer, rehacer (lo escrito seguido es un solo paso). | | Ctrl+F / H / G | Buscar, reemplazar, ir a la línea (ver abajo). | | Esc | Volver a un cursor, cerrar la lista de sugerencias, o salir del editor. | En macOS, Cmd funciona donde aquí pone Ctrl. Los comandos globales del editor (F5, Ctrl+S, Ctrl+Shift+P...) funcionan mientras escribes; los atajos del lienzo (Supr, flechas, Ctrl+D) no, así que escribir nunca mueve un control. ## Tabulaciones o espacios Python rechaza un bloque que mezcla tabulaciones y espacios, así que el editor se queda con uno de los dos: - **Sangrar con tabulaciones** (Ajustes del editor → Edición) hace que Tab, Enter y sangrar (Ctrl+]) escriban tabulaciones. Se dibujan con el ancho del *Tamaño de tabulación*, y Enter copia tal cual los espacios y tabulaciones de la línea de arriba, en los dos modos. - **Convertir la sangría a tabulaciones** y **Convertir la sangría a espacios**, en la paleta de comandos (Ctrl+Shift+P), reescriben la sangría del archivo que muestra el editor de código. El texto dentro de cadenas de varias líneas queda como está. - **Convertir la sangría al guardar** lo hace cada vez que se guarda un archivo de Python (o el código del formulario), así el código pegado nunca rompe el archivo. - El código que el diseñador escribe por ti (un manejador o método nuevo) sigue al archivo: en un archivo sangrado con tabulaciones se escribe con tabulaciones. Mantener Retroceso o Supr borra al ritmo de **Borrado**: la primera pulsación siempre borra; las siguientes esperan la *Espera antes de repetir* y luego llegan como mucho *Borrados por segundo* veces por segundo. Pueden ir más lentas que la repetición de teclas del sistema, no más rápidas. ## Buscar, reemplazar y varios cursores (Image: Buscar (Ctrl+F) con cada form.status seleccionado como cursor) - Ctrl+F abre la barra de búsqueda con la palabra bajo el cursor; las coincidencias se resaltan en el código y la barra las cuenta. Enter o F3 van a la siguiente, Shift+F3 a la anterior y Alt+Enter pone un cursor en cada una. Los botones distinguen mayúsculas, buscan palabras completas o usan una expresión regular. - Ctrl+H muestra también el campo de reemplazo: **Reemplazar** cambia la coincidencia actual y **Reemplazar todo** todas, en un solo paso de deshacer. Con una expresión regular, `\1` en el reemplazo inserta un grupo. - Ctrl+G va a una línea (`42`) o a una línea y columna (`42:8`). - El editor tiene cursores múltiples y los atajos de edición habituales de los editores modernos: Alt+clic, Ctrl+Alt+↑/↓, Ctrl+D, Alt+Shift+↑/↓ para duplicar líneas en cada cursor, Ctrl+Shift+L, Alt+↑/↓ para mover líneas, Ctrl+/ para comentar, Ctrl+Z / Ctrl+Shift+Z y más. La lista completa está en [el componente editor de código](https://albakore.github.io/pyzed/es/components/code/#varios-cursores-y-los-atajos-de-zed) o con F1 en el diseñador. ## Autocompletado (Image: Completando una función del módulo re, con su firma y su docstring) - La lista se abre mientras escribes un nombre o después de un `.` (no en comentarios ni cadenas), y Ctrl+Espacio la abre en cualquier sitio. Desactiva *Autocomplete while typing* para abrirla solo con las teclas. - ↑/↓ se mueven (dando la vuelta), RePág/AvPág saltan nueve filas, Enter o Tab insertan, Esc cierra; un clic también inserta. El pie muestra la posición (`3/42`). - La rueda del ratón desplaza la lista sin mover la entrada resaltada, y una barra a su derecha indica dónde estás. Los nombres y firmas largos se recortan con `…` para que quepan; el panel junto a la lista los muestra completos. - Al seguir escribiendo la lista se filtra: primero los nombres que empiezan por lo escrito, luego los que contienen las letras en orden (`gtx` encuentra `get_text`). - Cada entrada tiene un icono según su tipo y, junto a la lista, un panel con su **firma** y su **documentación** (el docstring, como Markdown). | Color del icono | Tipo | | --- | --- | | Morado | Funciones y métodos | | Amarillo | Clases, enums, parámetros de tipo | | Azul | Variables, atributos y propiedades | | Cian | Constantes | | Rojo | Módulos | | Acento | Controles del formulario | - Los nombres **privados** (`_cache`) salen atenuados, con un candadito, después de los públicos; los dunders (`__init__`) van al final. - **Auto-import**: elegir un nombre que aún no está importado añade también su `import` al principio del archivo, incluso en modo manejador. - La lista se abre bajo la palabra, o encima cuando hay más sitio ahí. ### Los nombres propios del formulario El `form` y el `event` de un manejador no tienen un tipo que los servidores puedan leer, así que el editor los completa por su cuenta: | Escribes | Obtienes | | --- | --- | | `form.` | Todos los controles del formulario, más `title`, `name`, `size`, `window` y `close()`. | | `form.email.` | Las propiedades de ese control, con sus tipos, más `name`, `type`, `visible`, `enabled`, `show()`, `hide()` y `focus()`. | | `event.` | `sender`, `name` y `value`. | (Image: form. completa los controles del propio formulario) ## Información, navegación y refactorización (Image: La tarjeta de información de una función: su firma y su docstring) Funcionan como en VS Code o Zed: responde ty donde puede y el editor completa lo que solo sabe el diseñador (los controles del formulario). - **Información al pasar el ratón**: deja el ratón medio segundo sobre un nombre y una tarjeta muestra su tipo o su firma y su docstring (como Markdown), junto con los problemas de ese punto. `form.email` y `form.email.text` describen el control y su propiedad. La tarjeta se queda mientras el ratón está encima, así puedes desplazarla y seleccionar su texto. Se desactiva con *Información al pasar el ratón* en los ajustes. - **Ir a la definición**: F12 o Ctrl+clic en un nombre abre donde está definido: más abajo en el mismo código, otro manejador del formulario (el editor cambia a él), un archivo de tu proyecto o una librería del `.venv` (se abre de solo lectura en una pestaña). Ctrl+F12 va a la definición de su **tipo**. En `form.email` selecciona el control en el lienzo. Sin ty sigue encontrando los `def` y `class` del archivo. - **Atrás y adelante**: Alt+← vuelve a donde estabas antes del salto y Alt+→ avanza de nuevo. - **Buscar referencias**: Shift+F12 lista bajo el editor cada uso del nombre, con el archivo, la línea y el texto; haz clic en uno para ir allí. - **Renombrar**: F2 abre un campo sobre el nombre; escribe el nuevo y pulsa Enter. Cambia cada uso, en este archivo y en los demás archivos del proyecto que lo usan (se abren como pestañas sin guardar para que los revises y guardes). Al renombrar un manejador sus eventos siguen conectados a él (`on sign_in.click`), y un Ctrl+Z deshace el cambio. - **Arreglos rápidos** (Ctrl+., o **Arreglo rápido…** en la tarjeta de información): los arreglos que ofrecen ruff y ty para la línea, como quitar un import sin usar, y además: - **Importar** un nombre que no está definido, desde el módulo que lo tiene. - **Instalar un paquete que falta**: en `import httpx` sin httpx instalado, *Instalar httpx en el proyecto (uv add)* lo añade a `pyproject.toml` y al `.venv`, y el error desaparece en cuanto se instala. Los nombres conocidos se traducen a su paquete (`cv2` → `opencv-python`, `PIL` → `pillow`, `yaml` → `pyyaml`). - **Organizar imports** (Alt+Shift+O) ordena y agrupa los imports con ruff, y **Arreglar todos los problemas que se arreglan solos** (paleta de comandos) aplica todos los arreglos seguros de ruff. ## Ayuda contextual Shift+F1 abre la [referencia integrada](https://albakore.github.io/pyzed/es/editor/reference/) en el nombre bajo el cursor: `form.email` o `form.email.text` abre la página del tipo del control, `form` y `event` abren las páginas del código del formulario, y los nombres de la librería (`pz.text`, `ui.button`, `Theme`) abren su página de la API. Si no hay coincidencia, busca el nombre en la referencia. ## Diagnósticos y code lens (Image: Errores en línea, la lista de problemas y code lens) - **Diagnósticos en línea** (error lens): el problema más grave de cada línea se escribe al final de ella, en rojo los errores, en amarillo los avisos y en azul la información. - **Lista de problemas**: bajo el editor, cada problema con su línea y columna, mensaje y origen (`ruff (F401)`, `ty`). Haz clic en uno para saltar a él. El botón de la cabecera muestra los recuentos y oculta o muestra la lista. - **Code lens** al final de cada línea `def` y `class`: cuántas **referencias** tiene (de ty, o contadas por nombre con ty apagado), cuántas clases **implementan** una clase y qué eventos **llaman** a un manejador (`on sign_in.click`). ## Servidores de lenguaje Los servidores arrancan en la carpeta del marcador de proyecto más cercano por encima del archivo de código (`pyproject.toml`, `uv.lock`, `setup.py`, `.git`) y usan su `.venv` (donde `uv sync` instala tus dependencias), o `$VIRTUAL_ENV`. La carpeta del código y `src/` se añaden como raíces de import, así que una UI en su propia carpeta resuelve las dos cosas: ``` myapp/ ├── pyproject.toml ← uv add httpx ├── .venv/ ← uv sync ├── src/myapp/ └── ui/ ├── login.pzform ├── login.py ← import httpx / from helpers import greet / from myapp import api └── helpers.py ``` Si el proyecto aún no tiene `.venv` (un formulario que acabas de abrir, o un proyecto antes de su primer `uv sync`), ty usa el Python con el que corre el diseñador, así `import pyzed` y la librería estándar se resuelven en vez de marcarse como que faltan. En cuanto aparece el `.venv`, o cambian `pyproject.toml` o `uv.lock` (al añadir una dependencia en la [pestaña Proyecto](https://albakore.github.io/pyzed/es/editor/projects/)), los servidores se reinician con él, así los paquetes nuevos se resuelven sin volver a abrir el proyecto. El editor busca `ty` y `ruff` primero en el `.venv` del proyecto, luego junto al editor y luego en el `PATH`. Instálalos con `uv add --dev ty ruff` en el proyecto, o con `pip install "pyzed-ui[designer]"` junto al editor. Ruff lee sus reglas de `[tool.ruff]` en `pyproject.toml`. Con el editor de código abierto, la barra de estado muestra un punto por servidor: verde cuando está **listo**, amarillo mientras **arranca**, rojo si **falta** o ha fallado. Pasa el ratón para ver los detalles; haz clic para abrir los ajustes del editor. ```mermaid sequenceDiagram participant E as Editor de código participant A as CodeAssist participant I as CodeIntel participant T as servidor ty participant R as servidor ruff E->>A: on_change(text), on_cursor(line, col) A->>I: update(module, handler, text) I->>T: didChange (el módulo entero, con el manejador dentro) I->>R: didChange T-->>I: publishDiagnostics R-->>I: publishDiagnostics A->>I: complete(line, col) I->>T: textDocument/completion T-->>A: items (vía pyzed.post, en el hilo de la UI) A->>E: lista, errores en línea, code lens ``` ## Ajustes del editor Los abren el **engranaje** de la cabecera del panel de código y los puntos de los servidores en la barra de estado: son las páginas *Editor de código* del [diálogo de Ajustes](https://albakore.github.io/pyzed/es/editor/settings/), con su buscador, sus perfiles, **↺** para devolver un ajuste a su valor por defecto y el ámbito *Proyecto* para que un proyecto tenga los suyos (su tabulación, por ejemplo). (Image: Ajustes del editor con el índice de secciones) | Sección | Ajuste | Qué hace | | --- | --- | --- | | Apariencia | **Tema** | *Igual que el diseñador*, o cualquier tema solo para el editor. | | | **Fuente** | *Por defecto* (IBM Plex Mono) o cualquier fuente instalada; también en Ajustes → Fuentes y tamaño. | | | **Tamaño de letra** | De 8 a 32 (también Ctrl+=/-/0 y Ctrl+rueda). | | | **Interlineado** | Compacto, Normal o Amplio. | | | **Números de línea**, **Resaltar la línea actual** | El margen y la franja de la línea actual. | | | **Mostrar espacios** | Espacios como `·`, tabulaciones como `→`. | | Cursor | **Forma** | Barra, bloque, subrayado o hueco. | | | **Parpadeo** | Si el cursor parpadea. | | | **Ancho** | De 1 a 4 píxeles, para el cursor de barra. | | Edición | **Tamaño de tabulación** | De 1 a 8 columnas por nivel, y el ancho con que se dibujan las tabulaciones. | | | **Sangrar con tabulaciones** | Tab, Enter y Ctrl+] sangran con tabulaciones en vez de espacios. | | | **Convertir la sangría al guardar** | Al guardar un archivo de Python su sangría se reescribe con tabulaciones o espacios, según lo de arriba. | | | **Retroceso borra un nivel entero** | Apagado: Retroceso en la sangría borra un espacio cada vez. | | | **Autocompletar al escribir** | Apagado: la lista solo se abre con Ctrl+Espacio. | | | **Cerrar paréntesis y comillas** | Pares, envolviendo la selección y saltando el de cierre. | | | **Plegado de código** | Los chevrones y las teclas de plegado. | | | **Remarcar corchetes** | Marca el paréntesis que hace pareja con el del cursor (Ctrl+M salta a él). | | | **Resaltar coincidencias de la selección** | Resalta los otros sitios con el texto seleccionado. | | | **Formatear con ruff al aplicar** | Ejecuta `ruff format` sobre el código al pulsar Aplicar. | | Borrado | **Espera antes de repetir** | Milisegundos que esperan Retroceso y Supr, mantenidos, antes de repetirse (500 por defecto; 0 deja los del sistema). | | | **Borrados por segundo** | Qué tan rápido borran mientras se mantienen (20 por defecto; 0 deja el ritmo del sistema). | | Desplazamiento y ajuste de línea | **Ajustar líneas largas** | Apagado por defecto: las líneas largas se desplazan de lado. Alt+Z lo alterna. | | | **Barras de desplazamiento** | Muestra u oculta las barras. | | | **Minimapa** | El código en miniatura a la derecha. | | | **Desplazamiento fijo** | Mantiene fijas arriba las líneas de los bloques que te rodean mientras te desplazas. | | Code lens y diagnósticos | **Code lens** | Referencias, implementaciones y eventos conectados al final de las definiciones. | | | **Diagnósticos en línea** | Los problemas al final de la línea. | | | **Información al pasar el ratón** | La tarjeta con el tipo, la documentación y los problemas del nombre bajo el ratón. | | Servidores de lenguaje | **ty**, **ruff** | Enciende o apaga cada servidor. Cada fila muestra su estado y versión. Debajo: la raíz del proyecto y el Python en uso. | | | **Reiniciar servidores** | Reinicia los dos; úsalo después de `uv sync` o de instalarlos. | (Image: La sección Servidores de lenguaje de los ajustes del editor: ty y ruff con su estado y versión, la raíz del proyecto y el Python en uso) ### Atajos de teclado **Atajos de teclado** en el índice abre el [editor de keymap](https://albakore.github.io/pyzed/es/editor/keymap/), donde puedes cambiar las teclas de cada acción del editor, del panel de código y del resto del diseñador. Los cambios se guardan en `keymap.json`, en el formato de Zed. En tus propias apps, `ui.editor(keymap=...)` usa teclas → acción (el mismo formato que los keymaps de Zed, `None` para quitar una tecla por defecto), y `pyzed.ui.editor.keymap_for` convierte en ella cambios por acción.