I. Introducción
VSCode es un editor muy liviano de Microsoft, aunque liviano, tiene funciones extremadamente poderosas. La razón es que muchas funciones poderosas de VSCode se implementan en base a complementos. El IDE solo proporciona el marco y las funciones más básicas y necesitamos usar complementos para enriquecer y expandir sus funciones.
Debido al importante papel de los complementos, la escala de la comunidad de complementos de VSCode es ahora muy impresionante. La mayoría de las herramientas de desarrollo que utilizamos comúnmente se pueden encontrar en este mercado de aplicaciones.
Después de abrir VScode, el lado izquierdo de la interfaz es la entrada al mercado de aplicaciones, donde puede buscar los complementos que necesitamos.
Sin embargo, nuestras necesidades siempre son complejas y cambiantes, y siempre hay algunos escenarios que los complementos existentes no pueden satisfacer. En este momento, necesitamos usar la interfaz abierta de VScode para implementar manualmente las funciones que necesitamos.
Luego podemos usar VSCode para abrir el proyecto generado por los pasos anteriores. Puede ver la estructura del directorio de la siguiente manera. Los dos archivos más importantes son package.json y extension.js. Después de comprender estos dos archivos, básicamente puede comenzar a desarrollar. un complemento VSCode.
3. archivo paquete.json
El archivo package.json es el archivo de manifiesto de la extensión VSCode y contiene muchos campos. La documentación oficial también tiene instrucciones especiales para cada campo: manifiesto .
Aquí solo nos centramos en los archivos generados después de la inicialización, que incluyen principalmente los siguientes nodos clave:
1. Principal: especifica el archivo de entrada del proyecto, desde aquí puede ver que el archivo de entrada es extensión.js;
2. Contribuciones: los puntos de contribución del complemento, la configuración más importante del complemento. El registro de contribuciones a través de extensiones se utiliza para ampliar varias habilidades en Visual Studio Code. La documentación oficial señala el camino: contribuye .
Aquí, un comando llamado sample.helloWorld está registrado en los comandos. Este comando en realidad debe implementarse en ./extension.js (esta parte es el foco, hablaremos de ello más adelante);
3. ActivaciónEvents: este nodo le dice a VScode bajo qué circunstancias se activará el complemento. El documento oficial ha especificado el momento de la activación: activaciónEvents . La captura de pantalla anterior indica que solo se activará cuando ejecutemos el comando sample.helloWorld. Además, hay más escenarios además:
-
onCommand: se activa cuando se llama al comando
-
onLanguage: se activa al abrir un archivo analizado en un idioma específico, como "onLanguage:python"
-
*: Tan pronto como se inicie vscode, el complemento se activará
-
onFileSystem: cada vez que se lee un archivo o carpeta de un esquema específico
-
onView: cada vez que la vista con la identificación especificada se expande en la barra lateral de VS Code...
Para obtener más información, si está interesado, consulte la documentación oficial.
- archivo extensión.js
El archivo extension.js es el archivo correspondiente al campo principal en package.json mencionado anteriormente (el nombre del archivo se puede personalizar). Este archivo exporta principalmente dos métodos: activar y desactivar. El tiempo de ejecución de los dos métodos es el siguiente:
- activar: método ejecutado cuando se activa el complemento
- desactivar: método llamado cuando se destruye el complemento
5. Depuración y combate real.
Después de introducir los archivos principales de este proyecto de inicialización, puede depurarlo y ejecutarlo. F5 ingresa al modo de depuración y se abrirá una nueva ventana de la siguiente manera:
Esta ventana está marcada como "Host de desarrollo extendido". Ctrl + Shift +P ingresa el comando que definimos anteriormente y ejecútalo. El texto aparecerá en la esquina inferior derecha:
El proyecto de demostración que generamos se ejecutó con éxito. A continuación, realizamos ligeros cambios en el complemento para que pueda mostrar la fecha de hoy y vincularle teclas de acceso directo. Los cambios en package.json son los siguientes:
El archivo extensions.js cambia de la siguiente manera:
Ejecute, haga clic en Ctrl + F9, se ejecuta normalmente:
Además de configurar las teclas de método abreviado para ejecutar comandos, también puede configurar el menú contextual. Contributes puede configurar el menú:
Después de ejecutarlo, puede ver este comando haciendo clic derecho en los paneles del editor y del administrador de recursos respectivamente:
6. Resumen
Lo anterior es un tutorial práctico simple de nivel básico, que lo guía a través de las ideas básicas para desarrollar un complemento VSCode. Si encuentra necesidades más complejas y personalizadas en el futuro, puede consultar la documentación oficial para un estudio en profundidad.
¿Es necesario dominar el desarrollo de complementos? Putao siente que si no hay necesidad de esto en este momento, no es necesario comprenderlo demasiado profundamente, pero como codificador físico autodisciplinado, primero puede tener una comprensión aproximada de las ideas básicas.
Porque en nuestro trabajo real, a veces un complemento puede resolver muchos problemas para algunos requisitos complejos, lo que mejora en gran medida la eficiencia del trabajo.
Por ejemplo, en este escenario, utilizamos controles de informes como ActiveReportsJS en el proyecto. En el proceso de escribir código, a veces necesitamos modificar el diseño de algunos informes. Luego, cada vez que lo usemos, debemos iniciar el proyecto y abrir el diseñador de informes, o abrir el informe a través del diseñador de informes de escritorio.
Pero, de hecho, a través de la interfaz CustomEditor proporcionada por la API del complemento VScode, podemos implementar un editor privado altamente personalizado para archivos de informes especiales. Haga clic en el archivo de informe y use directamente el archivo de vista previa del diseñador proporcionado por este control, como se muestra a continuación. :
La implementación de este complemento mejora aún más la eficiencia de nuestro trabajo y evita mucho trabajo repetitivo. Con respecto a la interfaz CustomEditor, VSCode también proporciona la muestra oficial vscode-extension-samples , si está interesado, puede obtener más información al respecto.
![](https://img-blog.csdnimg.cn/img_convert/87f2be26ab32f0cd4faa97abc0a0c476.png
Este artículo termina aquí, gracias a todos por mirar ~~