Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
post oxygen builderOxigenados Tip del dia
Características
A  Fondo
Roadmap
Feedback
ChangelogWorkspaceFacebookDiscordComprar

CodeSense

¿Qué es CodeSense?

CodeSense es un autocompletado / sugerencias desarrollado por Recoda para el editor de código Codemirror y con una profunda integración con Oxygen Builder.
Puedes utilizarlo dentro:
 - Hojas de estilo
 - CSS personalizado
 - JS personalizado
 - Editor BlockPad
 - Línea de comandos

Características de CodeSense

CodeSense para CSS

Este es probablemente el área más avanzada de CodeSense

CodeSense utiliza nuestro mecanismo de sugerencia desarrollado a medida para hacer que escribir CSS sea realmente rápido (mucho más rápido que hacer click), sin errores tipográficos.
Sugerencia de clases Oxygen
CodeSense está 100% integrado con Oxygen Builder, si la clase existe dentro de Oxygen te mostrará sugerencias. Y no necesitas escribir prefijos, sólo escribe parte del nombre para obtener una sugerencia correcta.

recoda codesense css

Sugerencia de propiedades CSS comunes

Hemos escogido a mano las propiedades comunes de CSS para que su sugerencia no sea excesiva. Si usas algunas propiedades poco comunes probablemente buscarás en MDN así que no necesitas sugerencias para cosas que probablemente no escribirás. Esto realmente puede acelerar la escritura.

recoda codesense css 2

Sólo sugerencia de opciones de propiedades CSS relacionadas

Estás cansado de la sugerencia por defecto del Codemirror, que te sugiere todo, quieres tener sólo sugerencias para las propiedades que escribiste antes, mira esto:Las sugerencias y el resaltado de sintaxis se basan en el tipo de token de Codemirror. Así que cuando el CSS es válido, funciona, pero ¿qué pasa con las cajas de CSS inválido en las que escribes tu Custom-CSS y no hay ningún selector en el texto para determinar cuándo se debe sugerir la propiedad.

 Sigue leyendo.

recoda codesense css 3

Como ves, sólo insinúa opciones relacionadas con la propiedad display. Y si piensas más profundamente verás que escribir display: flex con CodeSense es como
 1 - escribir 'd'
 2 - Enter
 3 - escribir 'f'
 4 - Enter

Muy rápido, sin errores. CodeSense es el sueño de todo desarrollador que se insinúa dentro de Oxygen Builder. Pero espera, hemos hecho algo aún más especial.

Soporte de CSS inválido - para el cuadro de CSS personalizado.

Cuando escribes en Custom-CSS escribes CSS inválido sin selectores y Oxygen lo convierte en CSS válido. Pero el editor de código no lo sabe, así que hemos creado excepciones para el CSS inválido para que puedas escribir tu CSS personalizado con tus sugerencias favoritas.

recoda codesense css 4

¿Cómo lo hemos conseguido?
 1 - Hemos utilizado los mecanismos de sugerencia nativos de Codemirror con nuestros activadores.
 2 - Hemos escrito un complemento de sugerencia personalizado para Codemirror
 3 - Hemos seleccionado manualmente las propiedades CSS
 4 - Hemos mapeado las opciones relacionadas con cada una
 5 - Hemos creado una excepción para que nuestra sugerencia sepa cuándo está escribiendo un CSS válido y cuándo no.

¿Podemos ampliar esto con más opciones?
Claro que sí. 
Hemos dedicado tiempo a entender cómo funciona Codemirror y a desarrollar la sugerencia de la manera que queríamos sin comprometerla. Así que sí, podemos ampliar esto aún más. Tenemos un montón de soluciones personalizadas y experiencia en este campo y queremos traer sugerencias de última generación dentro de Oxygen Builder.
Añadir nuevas cosas que mejoren la escritura de CSS ya no es tan difícil porque tenemos nuestra base que podemos utilizar para desarrollar más rápido nuevas opciones si son necesarias. 
Y la sugerencia está bajo nuestro completo control.

CodeSense para JS

En la parte de CSS hicimos mucho trabajo para que la sugerencia esté en contexto. 
Se trata de una sugerencia de tipo que depende de dónde se esté escribiendo y de qué cosas se necesitan para sugerir.
La parte JS es un poco diferente.
Aquí no nos hemos esforzado mucho en desarrollar cosas personalizadas porque ya existen dos cosas buenas como complementos de sugerencias JS.

1  Completar el código del contexto.
Esta parte es responsable de sugerencias como:

recoda codesense js 1

Puedes ver que la sugerencia depende del primer objeto (documento), estas son las sugerencias más comunes en JS

Si no estás familiarizado con los mecanismos de sugerencia probablemente estarás pensando cuál sería la sugerencia opuesta a esta.

 2 Finalización de código consciente del contexto.
El completado consciente del contexto o completado inteligente de código es un tipo de mecanismo que puedes ver en todos los editores de código serios bajo un nombre diferente (VS Code = IntelliSenseAtom = Completion +). Este tipo no se preocupa de dónde está la finalización, por lo que es un tipo consciente del contexto. 
Esto significa que si defines alguna variable y quieres usarla de nuevo, el primer mecanismo (finalización de código contextual) no lo sugerirá. Por otro lado, el completado de código consciente del contexto busca variables y cosas cercanas y después las sugiere. 
Puedes ver un ejemplo básico de sugerencia contextual en la imagen de abajo:

recoda codesense js 2

CodeSense para PHP / HTML

 Estamos trabajando en la integración de la sugerencia de clases y algunas otras cosas que podrían. 
Esta es un área compleja y por eso CodeSense no es demasiado potente aquí por ahora.

CodeSense add-ons

Como parte de CodeSense estamos utilizando nuestros complementos desarrollados a medida que se explican anteriormente, pero por otro lado estamos utilizando algunos existentes.
Contraer código
Esto dará una opción para contraer partes de código para que puedas tener una mejor visión general del código.

recoda codesense js 3

Apoyo a corchetes

Esto hará que los corchetes sean resaltados por encima del resto de texto.

recoda codesense js 4

Auto-Cerrado de corchetes

Este complemento cerrará automáticamente los corchetes para que no sea necesario escribir los corchetes de cierre y el cursor se coloque entre ellos.

recoda codesense js 5