✕

Primeros pasos

Visión General

Spck Editor es una solución de edición de código móvil con múltiples variantes diseñadas para desarrolladores.

Versiones

Spck Editor (Gratis)

  • Funcionalidad básica de edición de código móvil
  • Integración de biblioteca git portátil a través de isomorphic-git

Spck Editor Lite

Precio: Pago único Funciones:

  • Snippets Personalizados
  • Teclado Predictivo
  • Tema Neon Exclusivo

Spck para NodeJS

Plataforma: Exclusivo de Android Función Principal: Terminal integrada con soporte para NodeJS

Versión para Navegador

  • Incrustable en cualquier sitio web
  • Interfaz ligera de edición de código

Características Principales

  • Diseño mobile-first
  • Integración con Git
  • Compatibilidad multiplataforma

Uso Recomendado

  • Edición de código sobre la marcha
  • Modificaciones rápidas de proyectos
  • Aprendizaje y prototipado

Terminología

Término Descripción
Menú de Navegación Se refiere a la primera pestaña del menú lateral en dispositivos móviles, este menú no está disponible en la versión Navegador ni en modo Tablet
Menú de Archivos Se refiere a la pestaña Archivo en el menú lateral o barra lateral
Teclado Extra En dispositivos móviles existe un teclado adicional con símbolos de codificación de uso común para una inserción rápida
Teclado Táctil Generalmente se refiere a la fila de teclas que contiene las teclas de flecha, la tecla tab y más
Barra de Acción Táctil Es el menú flotante que aparece sobre el cursor cuando se selecciona texto en un dispositivo móvil/táctil
Cursores Táctiles Los cursores en pantalla que aparecen en dispositivos móviles/táctiles cuando se selecciona texto o el cursor está activo
Modo Tablet Se refiere a una configuración que se puede activar en dispositivos táctiles más grandes como tabletas
Tecla ⌘ Este símbolo en el Teclado Táctil equivale a la tecla Ctrl en Windows o la tecla Command en Mac
Tecla ⌥ Este símbolo en el Teclado Táctil equivale a la tecla Alt en Windows o la tecla Option en Mac

 

 

Atajos de Teclado

Visión General

¡Desbloquea una eficiencia ultrarrápida con estos prácticos atajos de teclado! Aunque no es un catálogo completo, estas joyas potenciarán tu productividad y harán que la navegación sea pan comido.

Aspectos Clave

  • No exhaustivo: Una selección curada de los atajos más prácticos
  • Propósito: Impulsar tu flujo de trabajo con comandos rápidos e intuitivos
  • Beneficio: Ahorra tiempo y reduce la dependencia del ratón

💡 Consejo Pro: ¡Memoriza estos atajos y mira cómo se dispara tu productividad! 🌟

Puedes ver la lista completa de atajos en Settings > Editor > Keyboard Shortcuts

Los usuarios premium también pueden acceder a los atajos de teclado directamente desde el Teclado Extra o usando el atajo ⌘ K

Habilita la tecla Ctrl/Command (⌘) y la tecla Alt/Option activando Settings > Touch > Show ⌘ Key y Settings > Touch > Show ⌥ Key

Editor

Atajo Acción
⌘ A Seleccionar todo
⌘ C Copiar
⌘ V Pegar
⌘ X Cortar
⌘ Z Deshacer
⌘ ⇧ Z Rehacer
⌘ D Duplicar línea
⌘ / Comentar/Descomentar línea
⌥ F Formatear código
⌘ F Buscar
⌘ G Buscar siguiente (Funciona con texto seleccionado)
⌘ ⇧ G Buscar anterior
⌘ L Saltar a línea

Acciones Rápidas

Atajo Acción
⌘ ⇧ C Git Commit
⌘ O Abrir Archivos Recientes
⌘ ⇧ P Iniciar Vista Previa del Proyecto
⌘ P Alternar Vista Previa de Archivo (SVG, Markdown)
⌘ K Supporter+: Abrir Atajos

 

 

Configuración Táctil

Teclado Extra

  • El Teclado Extra es un teclado de símbolos diseñado para dispositivos táctiles.
  • Se puede acceder a teclas/símbolos adicionales manteniendo presionadas las teclas, lo que abre un menú de opciones.
  • Puedes activarlo o desactivarlo en el menú Settings > Touch > Extra Keyboard.

💡 Consejo Pro: Consulta Edición Avanzada para obtener consejos sobre cómo rodear texto, lo cual es compatible con el Teclado Extra.

Teclado Táctil

  • Las teclas táctiles consisten en una fila de teclas que incluye teclas de flecha, tecla Command y otras teclas de uso frecuente.
  • Esta función está disponible en dispositivos táctiles.
  • Puedes activarlo o desactivarlo en la sección Settings > Touch > Touch Keyboard.

💡 Consejo Pro: Puedes personalizar teclas individuales de este teclado ajustando la configuración.

Barra de Acción Táctil

  • Aparecerá una barra de acción con las opciones Copiar, Cortar y Pegar cuando se seleccione texto.
  • Esta función se puede activar o desactivar en Settings > Touch > Touch Action Bar.

Cursores Táctiles

  • Cursores en pantalla que aparecen cuando se selecciona texto o el cursor está activo.
  • Esta función se puede activar o desactivar en Settings > Touch > Touch Cursors.

💡 Consejo Pro: No se recomienda desactivar esta función a menos que tengas un ratón/dispositivo señalador emparejado con el dispositivo móvil. Desactivar los cursores táctiles puede mejorar la visibilidad de la pantalla durante la edición y mejorar la experiencia de edición al usar dispositivos señaladores externos.

Teclas Predictivas

  • Las Teclas Predictivas son una función premium que reemplaza al Teclado Extra estándar.
  • Ofrece entrada de símbolos con un solo toque en lugar de tener que mantener presionado y seleccionar en el Teclado Extra regular.
  • Las teclas se ordenan por la frecuencia estadística de los símbolos que aparecen en una posición específica del archivo.
  • Se puede activar o desactivar en Settings > Touch > Predictive Keyboard.

💡 Consejo Pro: Las Teclas Predictivas reemplazan al Teclado Extra regular, que algunos usuarios pueden preferir. Las Teclas Predictivas son una opción predeterminada en la versión Lite del editor, y se pueden desactivar para recuperar el Teclado Extra regular.

 

 

Navegación de Archivos

Visión General

  • Hay múltiples métodos para navegar entre archivos
  • Puedes navegar por los archivos usando Archivos en el menú lateral
  • Puedes usar la ruta de navegación (breadcrumb) para navegar por los archivos comenzando desde el directorio del archivo actual
  • Puedes abrir Archivos Recientes con Ctrl-O para buscar archivos rápidamente
  • Puedes usar el ícono "Localizar" en el menú lateral de Archivos para identificar rápidamente los archivos actuales
  • Los menús laterales de Control de Código Fuente y Búsqueda también ofrecen formas únicas de navegar entre archivos

Gestión de Pestañas de Archivos

Comportamiento de las Pestañas

  • Los archivos se desanclan automáticamente al abrirse inicialmente
  • Las pestañas se anclan cuando se realizan ediciones

Opciones de Ordenación de Pestañas

Los archivos se pueden ordenar por:

  • Orden alfabético
  • Extensión del archivo
  • Ruta del archivo

Canales de Navegación Alternativos

  • Menú de Control de Código Fuente: Navega por los archivos a través del contexto de control de versiones
  • Menú de Búsqueda: Encuentra y accede a archivos basándose en criterios de búsqueda

💡 Consejo Pro: Las Pestañas de Archivos se pueden ocultar de la vista en Settings > Appearance > Show File Tabs. Consulta Modo Zen para maximizar el espacio de pantalla en dispositivos más pequeños.

 

 

Edición Avanzada

Usar el Teclado Predictivo de manera eficiente

Selección Básica

  • Doble toque para seleccionar una palabra o bloque de texto

Rodear Texto

Rodea rápidamente el texto seleccionado utilizando pares de paréntesis o comillas:

  • Paréntesis: ( )
  • Corchetes: [ ]
  • Llaves: { }
  • Comillas simples: ' '
  • Comillas dobles: " "

Navegación y Edición

Búsqueda de Texto

  • ⌘ G: Buscar siguiente instancia
  • ⌘ ⇧ G: Buscar instancia anterior

Sangría

  • Selecciona un bloque de texto
  • Presiona Tab para sangrar

 

Múltiples Cursores

Configuración Rápida

  • ¡Activa múltiples cursores con la tecla Alt/Option! ✨
  • Navega a Settings > Touch > Show ⌥ Key para activarlo

Cómo Usar

  1. Selecciona las teclas ⌥ y ⌘
  2. Haz clic para colocar los cursores exactamente donde los quieras
  3. ¡Edita múltiples líneas simultáneamente con facilidad! 💻

💡 Consejo Pro: ¡Edición con múltiples cursores = transformación de código ultrarrápida! ⚡️ También es posible agregar múltiples cursores usando los comandos Add Cursor Above y Add Cursor Below de la paleta de comandos, que agregarían un cursor directamente encima o debajo de la posición actual del cursor.

 

 

Limitaciones de Git

Visión General

La integración de Git del editor está impulsada por isomorphic-git, una implementación de Git en JavaScript puro que se ejecuta completamente del lado del cliente. Si bien esto permite operaciones de Git directamente en el navegador y en dispositivos móviles sin un servidor, viene con varias restricciones inherentes a ejecutar Git en un entorno JavaScript en sandbox.

Restricciones de Memoria

  • Las aplicaciones móviles típicamente están limitadas a aproximadamente 50MB de memoria por el sistema operativo.
  • Las operaciones de Git en repositorios grandes pueden exceder este presupuesto y hacer que la aplicación se termine.
  • Leer archivos pack grandes (archivos .pack en .git/objects/pack/) requiere cargar porciones significativas en memoria de una sola vez, lo cual no es factible en dispositivos con memoria limitada.
  • Como resultado, clonar u operar en repositorios grandes puede fallar con errores de falta de memoria en móviles.

💡 Consejo: Para repositorios grandes, usa clones superficiales (shallow clones) cuando sea posible, o considera trabajar con un subconjunto más pequeño del repositorio.

Compatibilidad con Enlaces Simbólicos

  • Los enlaces simbólicos (symlinks) no son compatibles de forma nativa en el sandbox de navegador/móvil por razones de seguridad.
  • El editor utiliza una representación de enlace simbólico emulado como solución alternativa para que los repositorios que contienen enlaces simbólicos aún puedan ser clonados.
  • Esta emulación puede tener problemas de compatibilidad con herramientas que esperan enlaces simbólicos reales del sistema de archivos (por ejemplo, algunas herramientas de compilación, gestores de paquetes o scripts que resuelven destinos de enlaces simbólicos en tiempo de ejecución).
  • Los repositorios que dependen en gran medida de enlaces simbólicos pueden no comportarse de manera idéntica a un checkout nativo de Git.

Uso de la CLI como Alternativa

Estas limitaciones solo se aplican al cliente Git dentro de la aplicación. No afectan a Spck CLI, que utiliza el binario nativo de Git en el sistema host:

  • Sin techo de memoria de 50MB — las operaciones de Git están limitadas solo por la memoria disponible de tu máquina.
  • Los archivos pack grandes y los repositorios grandes se manejan de forma nativa.
  • Los enlaces simbólicos reales funcionan como se espera, con compatibilidad total con otras herramientas.
  • Todas las funciones de Git y comandos plumbing están disponibles, no solo el subconjunto implementado por isomorphic-git.

💡 Consejo Pro: Si trabajas frecuentemente con repositorios grandes o proyectos que dependen de enlaces simbólicos, usar Spck CLI para operaciones de Git (clone, fetch, push) — mientras sigues editando archivos en la aplicación móvil — te brinda lo mejor de ambos mundos.

 

 

🌟 Modo Zen

Visión General

El Modo Zen es una configuración del editor encantadora y maximizadora del espacio diseñada para transformar tu experiencia de codificación en pantallas compactas.

El modo Zen consiste en:

  • Desactivar Show Line Numbers en la configuración
  • Desactivar Show File Tab
  • Desactivar Touch Action Bar

Características Principales

🧘‍♀️ Espacio de Pantalla Maximizado

  • ¡Adiós a los Números de Línea!
    • Libera un valioso espacio horizontal
    • Evita que el texto se sienta apretado
    • Adopta el aspecto limpio y minimalista

🎨 Interfaz Optimizada

  • Minimización de la Barra de Acción
    • Despídete de las barras de herramientas saturadas
    • Utiliza métodos de entrada alternativos:
      • Botones de pegar/cortar del teclado extra
      • Atajos de teclado (Ctrl-C/Ctrl-V)

📂 Navegación Simplificada

  • Eliminación de Pestañas de Archivos
    • Ctrl-O se convierte en tu nuevo mejor amigo de navegación
    • Espacio de trabajo más limpio
    • Cambio de contexto más rápido

💡 Consejo Pro: ¡No todos los estilos de codificación son iguales! Recomendamos experimentar con el Modo Zen para ver si resuena con tu flujo de trabajo. ¡Tu entorno de codificación perfecto está a solo unos clics de distancia! 🌈✨