Tradujeron para usted
un artículo de Philip Korea sobre cómo desarrolló extensiones para los editores de Atom y VS Code. Los proyectos no pueden llamarse complejos, pero esta es su ventaja: puede comprender de inmediato lo que debe hacerse para crear su propia extensión.
Cuando se presentó el editor Atom, yo, como muchos desarrolladores web, estaba encantado. "Oh, genial, un editor extensible construido sobre la pila que conozco", pensé entonces. E inmediatamente comenzó a expandir las capacidades del editor, así como de miles de otros desarrolladores.
Por cierto, trabajo con Atom por dos razones. Primero, hay grandes extensiones cada semana. El segundo: conozco la pila y puedo trabajar con ella sin problemas, creando mis propias versiones de extensiones.
Le recordamos: para todos los lectores de "Habr": un descuento de 10.000 rublos al registrarse en cualquier curso de Skillbox con el código de promoción "Habr".
Skillbox recomienda: El curso en línea de Frontend Developer Profession .
Gran extensión de cursor
Cuando salió Atom, programé Slim, Sass y CoffeeScript. Entonces no conocía otras formas de editar la sangría, excepto la más habitual: cambiar cada sangría individualmente. A veces era difícil determinar la finalización de un bloque, así que decidí cambiar el aspecto del cursor. Quería convertirlo en algo así como una regla que le permita medir con precisión todo. Aquí hay un ejemplo:
Para entender cómo hacer esto, estudié las herramientas para desarrolladores de Atom, seleccioné un elemento de cursor y luego lo cambié usando CSS. Por lo tanto, logré obtener algo así como una prueba de concepto: me di cuenta de que mi idea era realizable.
A continuación, estudié la documentación (nuevamente) para averiguar cómo puede registrar un comando y aplicar los cambios a la clase de cursor. La primera iteración fue muy simple.
module.exports = activate: (state) -> atom.workspaceView.command 'big-cursor:toggle', @toggle toggle: ()-> atom.workspaceView.getActiveView() .find(".cursor").toggleClass("big-cursor") .big-cursor { top: 0 !important; height:100%; }
Esta es una extensión simple y funcional.
Que le paso
Nada especial, lo escribí cuando incluso la versión 1.0 de Atom no estaba allí, por lo que la API cambió más tarde, pero ya no necesitaba la extensión y dejé de admitirla.
VS Code
Después de un par de años, decidí cambiar a VS Code. Por conveniencia, utilicé la extensión, que le permitía cambiar rápidamente los parámetros necesarios, como los nombres de las variables. Pero tenía que ingresar constantemente a un equipo para hacer estos cambios. Y no quería vincularlos a ningún botón del teclado, así que comencé a considerar opciones para trabajar con alias en el shell ZSH.
ZSH tiene muchos complementos, además puede usar versiones cortas de comandos para ejecutarlos. Ejemplo: ejecutar el complemento git checkout se puede hacer con gco, y el complemento del servidor rails con el comando rs.
En realidad, para un equipo como Change Case Snake Case, podría ingresar las primeras letras de todas las palabras, es decir, ejecutar todo esto usando la abreviatura ccsc.
Escribir una extensión para el código VSEntonces, comencé a explorar las posibilidades para crear extensiones. Ya estaba un poco familiarizado con algunos puntos, porque hice mis adiciones a Scry (el servidor de idiomas para Crystal), así que estudié la extensión de Crystal para VS Code.
Entonces, fue creado usando el generador Yeoman. Se veía así:
La base de la extensión mecanografiada es bastante conveniente. Puede configurar todo con tsconfig (lo que, sin embargo, significa que los archivos de Script mecanografiar a menudo pueden generar un error y no compilarse), pero puede elegir la segunda opción: tslint.
Después de configurar el generador, tiene la extensión hello world, que agrega el comando de registro hello world. El proyecto utiliza tareas de depuración de VS Code para permitirle ejecutar una instancia de VS Code con la extensión habilitada. Todo esto realmente se puede configurar fácilmente con la adición de puntos de interrupción si es necesario. Como resultado, puede aprender la API sin ningún problema.
Para crear la extensión que necesito, necesito saber algunas cosas:
- Cómo crear un cuadro de paleta donde el usuario pueda trabajar.
- Cómo filtrar el cuadro de paleta para mostrar comandos de acuerdo con sus versiones cortas ingresadas por el usuario.
- Cómo obtener todos los comandos disponibles para que haya algo que buscar directamente en la ventana.
- Cómo ejecutar un comando.
Tuve que profundizar en la documentación para obtener todos los datos. La API es muy limitada, esto es un problema. Pero hice lo que planeé.
1. caja de paletaNo necesita acceder al DOM o las vistas para esto. Aquí hay un conjunto de vistas que puede usar (una de ellas es un panel HTML). Hubo una presentación para la caja de paleta, así que pude entender cómo funciona todo.
2. Filtrando el cuadro de paletaTuve que probar aquí, porque la API QuickPick no ofrece esa oportunidad. Pero él tiene un evento que puede ser interceptado cada vez que un usuario comienza a escribir algo, solo cambio la lista de opciones. Esta opción funciona sorprendentemente bien.
let disposable = vscode.commands.registerCommand('short-commands.activatePalette', () => { let list = vscode.window.createQuickPick<CommandOption>(); list.placeholder = "Hello type some stuff"; list.onDidChangeValue((ee) => { if (ee.length === 0) { list.items = []; } else { list.items = options.filter((e) => e.short.startsWith(ee)) } }); });
3. Obtenga una lista de comandos disponiblesAquí también hay dificultades, puede obtener una lista de otras extensiones instaladas. Para todos, debe acceder a su propio package.json.
function parseExtensionCommands( extensions: Extension<any>[] ): CommandOption[] { let options: CommandOption[] = []; extensions.forEach(ext => { let { packageJSON: { contributes: { commands } = { commands: [] } } } = ext; if (commands) { commands.forEach((c: Command) => { options.push(new CommandOption(c)); }); } }); return options; }
4. Ejecución del comandoBueno, aquí todo es simple, recurrimos a la API para llamar al comando deseado.
vscode.commands.executeCommand (list.activeItems [0] .command.command)
Como conclusión
En realidad, eso es todo lo que hice por los editores. Mi objetivo era mostrar cómo puede comenzar a desarrollar sus propias extensiones. Aquí hay una lista de lo que utilicé en mi trabajo, más la fuente de los proyectos:
Skillbox recomienda: