meme.js Lang
Soporte de lenguajes para el SDK meme.js en Visual Studio Code
Coloreado de sintaxis, plegado de código, autocompletado de meme-HTML y meme-CSS, y autocompletado de JavaScript dentro de los archivos de meme.js.
Tabla de Contenidos
Inicio rápido
- Instala la extensión desde el Marketplace o, si trabajas en el monorepo, con la función
install (ver Instalación local).
- Abre cualquier archivo de meme.js (
.mu, .mj, .mh, .mc o .ms); la extensión se activa sola.
- Opcional: instala también meme.js Icons para ver los demas iconos al estilo de los archivos meme.js en el explorador.
Instalación local
En el monorepo de meme.js, el archivo de configuracion (.ms) de .meme-lang declara funciones para instalar la extensión directamente desde el código, sin pasar por el Marketplace. Para ejecutar una, usa el comando me seguido del nombre de la función desde la carpeta .meme-lang:
me install
me -f muestra las funciones disponibles.
install: construye la extensión en 00_Build (me -b) y crea un enlace simbólico a esa carpeta en ~/.vscode/extensions/meme-js_meme-lang_<versión>, con la versión del .ms. VS Code carga la extensión a través del enlace, así que cada build nuevo queda instalado; solo hay que recargar la ventana (comando Developer: Reload Window).uninstall: borra ese enlace de ~/.vscode/extensions y VS Code deja de cargar la extensión.
Si tienes instalada la versión del Marketplace, desinstálala antes de usar install para no tener dos copias de la misma extensión.
Lenguajes
| Lenguaje |
Extensión |
Uso |
| meme-UNIT |
.mu |
Unidades: componentes, páginas, servicios, etc. |
| meme-JS |
.mj |
JavaScript con las extensiones de meme.js. |
| meme-HTML |
.mh |
Marcado por indentación. |
| meme-CSS |
.mc |
Estilos por indentación con variables. |
| meme-SETTINGS |
.ms |
Configuración de proyecto; usa la misma sintaxis que las unidades. |
Así se ve una unidad con sus tres lenguajes (MJ, MH y MC), en un mismo archivo:
unit mi_boton {
front:
$View {
button (click)=onClick>hola mundo
}
$Style {
button
display: flex
}
#onClick {
console.log( 'click', {mh span>listo} );
}
}
Funciones
Coloreado de sintaxis
- Cada lenguaje se colorea también dentro de los otros: meme-HTML en
$View y en {mh …}, meme-CSS en $Style y en {mc …}, y meme-JS en las zonas de código de unidades, meme-HTML y meme-CSS.
- Bloques de script como
{compile …}, variables de compilación como [[APP]] y códigos de carácter como #a#. Las secuencias de escape no válidas dentro de #…# se marcan como error.
Plegado de código
Plegado propio para los cinco lenguajes: zonas y bloques de las unidades (front:, $View, $Style, funciones, unidades anidadas), niveles de indentación en meme-HTML y meme-CSS, y comentarios separadores como /*/ ***** Funciones ***** /*/.
Autocompletado de meme-HTML
Funciona en archivos .mh y dentro de $View y {mh …}:
- Etiquetas: etiquetas HTML, las palabras clave
conf, slot e import, y los componentes de tu proyecto.
- Atributos: los de cada etiqueta, los globales y las props del componente.
- Eventos después de
(: eventos del DOM, de window (con !) y los que emite cada componente.
- Manejadores después de
)=: las funciones front de la unidad donde está el cursor.
- Valores de los atributos que tienen una lista de valores conocida.
Los componentes salen de todas las unidades (.mu) del espacio de trabajo, excepto node_modules, 00_Build y build. Cada sugerencia indica en qué archivo está la unidad, sus props y sus eventos. El índice se actualiza al crear, modificar o borrar archivos .mu.
Autocompletado de meme-CSS
Funciona en archivos .mc y dentro de $Style y {mc …}:
- Propiedades y sus valores, con documentación.
- Pseudo-clases, pseudo-elementos y reglas
@.
- Variables con
$ (y las globales con $!).
- Atajos:
df → display: flex, w50p → width: 50%.
Autocompletado de meme-JS
En .mj y .mu, el JavaScript tiene autocompletado, información al pasar el cursor, ayuda de firmas, ir a la definición, buscar referencias y renombrar. Esto lo da la extensión de TypeScript que viene con VS Code, a través de un plugin incluido en esta extensión; no hace falta instalar nada más.
En estos archivos no se muestran errores de TypeScript ni se aplica formato automático, porque TypeScript no entiende las extensiones de meme.js.
Si desactivaste la extensión integrada "TypeScript and JavaScript Language Features", esta parte no funciona.
Depuración
Puedes poner puntos de interrupción en archivos .mj, .mu y .ms.
Desarrollo
Esta sección es para quien trabaja en la extensión dentro del monorepo de meme.js, en la carpeta .meme-lang.
Estructura
.ms: datos del paquete (de aquí se genera el package.json) y el script de construcción ($Build).01_Resources/: logo, iconos de los lenguajes y los archivos que se copian tal cual al paquete.02_Sintaxis/: gramáticas TextMate en YAML y language-configuration.json. El build convierte cada YAML a JSON; solo acepta un subconjunto de YAML (sin anchors, alias, tags ni listas o mapas en línea).03_Sources/:
main.mj: la extensión (plegado, autocompletado y activación de la extensión de TypeScript).ts_plugin.mj: el plugin de TypeScript (meme-ts-plugin) que da el JavaScript en .mj y .mu.css-data.json y html-data.json: datos de propiedades, etiquetas, atributos y eventos para el autocompletado.
00_Build/: resultado del build y carpeta que se publica. No se versiona.
Construir y probar
- Construye desde
.meme-lang con:
me -b
El lanzador meme: lang BUILD reconstruye automáticamente al cambiar las gramáticas.
- Lanza meme: lang EXT: abre una ventana de VS Code con la extensión de
00_Build sobre .pruebas/02_Lab. En esa ventana la extensión recarga VS Code sola cada vez que cambia 00_Build.
Publicar
La función deploy construye la extensión y la publica desde 00_Build con vsce:
me deploy
Si modificas deploy, no le agregues --no-dependencies a vsce: el plugin de TypeScript va en 00_Build/node_modules/meme-ts-plugin y se quedaría fuera del paquete.
Licencia
LGPL-3.0. Consulta COPYING y COPYING.LESSER.
