1. El
complemento VS Code de capacidad de expansión no es adecuado para la personalización de la interfaz de usuario. Por ejemplo, la barra de herramientas de Atom es difícil de implementar en VS Code:
Proporciona un modelo de extensibilidad rico, pero no permite que los complementos accedan directamente al DOM de la interfaz de usuario subyacente (es decir, es difícil para los complementos cambiar la apariencia del IDE y la personalización de la interfaz de usuario es limitada). Esto se debe a la conveniencia de la optimización continua en la parte inferior:
With VS Code, we’re continually trying to optimize use of the underlying web technologies to deliver an always available, highly responsive editor and we will continue to tune our use of the DOM as these technologies and our product evolve.La capa DOM de la interfaz de usuario puede cambiar con frecuencia con la optimización. VS Code no quiere que estos elementos de optimización estén limitados por dependencias de complementos, así que simplemente limite las capacidades de personalización de la interfaz de usuario
Además de la personalización de la interfaz de usuario, las características funcionales relacionadas con IDE admiten extensiones, como el resaltado de sintaxis básico / solicitud de API, salto de referencia (ir a la definición) / búsqueda de archivos, personalización de temas, protocolo de depuración avanzado, etc.
PD De hecho, hay una manera de extender la interfaz de usuario (para escapar del entorno de tiempo de ejecución del complemento, pero requiere mucho esfuerzo), consulte la API de acceso electrónico desde la extensión vscode para obtener más detalles, las notas de seguimiento se presentarán en detalle
2. Entorno operativo
Por motivos de rendimiento y compatibilidad, el complemento se ejecuta en un proceso separado (denominado proceso de host de extensión) y no permite el acceso directo al DOM, por lo que proporciona un conjunto de componentes de interfaz de usuario integrados, como IntelliSense
Por lo tanto, la falla o falta de respuesta del complemento no afecta el funcionamiento normal del IDE, por ejemplo:
// ref: my-extension/src/extension.ts
export function activate(context: vscode.ExtensionContext) {
// hang up
while (true);
}
El bucle infinito de un complemento no afecta el uso normal del IDE y la carga / activación de otros complementos, pero en la lista de procesos, puede ver que el uso de la CPU de Code Helper está cerca del 100%. La zona de pruebas a nivel de proceso garantiza la estabilidad del mecanismo del complemento
3. La
estabilidad del concepto central : los complementos de aislamiento
de complementos pueden afectar el rendimiento de inicio y la estabilidad del propio IDE, por lo que este problema se resuelve mediante el aislamiento de procesos. Los complementos se ejecutan en procesos independientes y no afectan el IDE ni su tiempo de inicio.
Esto se considera desde el punto de vista del usuario, y se espera que el usuario tenga un control completo sobre el IDE, sin importar lo que esté haciendo el complemento, no afectará el uso normal de las funciones básicas del IDE.
El proceso de host de PSextension es un proceso de nodo especial que puede acceder a la API de extensión de VS Code. VS Code también proporciona soporte de depuración para este proceso
Rendimiento: activación de
complementos Los complementos se cargan de forma diferida (lo más tarde posible), solo se cargan / activan en escenas específicas, por lo que no consumen memoria ni otros recursos antes de esa fecha
La implementación es que el complemento registra eventos de activación específicos (eventos de activación), que son activados por el IDE. Por ejemplo, el complemento de Markdown solo necesita activarse cuando el usuario abre el archivo md.
Hay 6 métodos de activación para el complemento:
onLanguage: $ {language} Abrir documentos en un idioma específico
onCommand: $ {command} Ejecutar comandos específicos a través de Command Palette
onDebug ingresar al modo de depuración
espacio de trabajo Contiene
: $ {toplevelfilename} La carpeta abierta contiene archivos específicos onView: $ {viewId} Expandir la vista especificada
- Abra el IDE para activar,
excepto para "ActivaciónEventos": ["*"]. Todas son activaciones condicionales. Los complementos se cargan / activan solo en escenarios específicos o cuando se cumplen ciertas condiciones.
Archivo de manifiesto del complemento El archivo de
manifiesto se utiliza para describir la metainformación del complemento. Utiliza directamente package.json como archivo de manifiesto y agrega algunos campos únicos, como eventos de activación que desencadenan la carga del complemento y los puntos de extensión que el complemento desea mejorar (contribución). puntos)
El IDE escanea el archivo de manifiesto del complemento durante el proceso de inicio. Si la interfaz de usuario está relacionada, la interfaz de usuario se amplía y, si la interfaz de usuario no es relevante, el punto de extensión se asocia con la función del complemento.
Además, dado que el entorno de ejecución del complemento es el proceso Node, el paquete npm está disponible y los módulos dependientes también se declaran en package.json. Tenga en cuenta que el usuario no instalará automáticamente npm al instalar el complemento, por lo que los módulos dependientes deben empaquetarse antes de que se publique el complemento; consulte Instalación y empaquetado para obtener más detalles.
El punto de extensión PS es similar al punto de unión en AOP, que está "permitido ampliar / mejorar aquí". Por ejemplo, agregar un comando personalizado es una mejora en el punto de extensión de comandos
manifest
// package.json
{
// 插件名称
"name": "my-extension",
// 显示名称
"displayName": "MyExtension",
// 描述信息
"description": "An awesome vscode extension",
// 版本号 semver格式
"version": "0.0.1",
// 在插件市场展示的图标
"icon": "img/icon.png",
// 发布者名字
"publisher": "ayqy",
// vscode版本要求
"engines": {
"vscode": "^1.19.0"
},
// 所属分类，可选Languages, Snippets, Linters, Themes等等
"categories": ["Other"],
// 加载/激活方式
"activationEvents": ["onLanguage:javascript"],
// 入口文件路径
"main": "./out/extension",
// 注册扩展点关联
"contributes": {
"languages": [
{
"id": "javascript",
"aliases": ["JavaScript", "javascript"],
"extensions": [".js"]
}
]
}
}
Para obtener el PS completo, consulte Archivo de manifiesto de extensión - package.json
extension.ts / enable se activa solo una vez y se activa de acuerdo con los eventos de activación declarados en package.json. La condición de activación puede ser abrir un archivo en un idioma específico o ejecutar un comando específico. Después de la activación, extension.ts / deactivate no se activará hasta que el IDE se cierre / bloquee, por lo que el uso general es:
activar: el complemento se activa y el módulo de función singleton se inicializa (se ejecuta solo una vez)
desactivar: IDE está a punto de cerrar, limpiar el sitio, pero no es adecuado para realizar operaciones que consumen mucho tiempo, porque se dice que solo espera 10 segundos como máximo
Los puntos de extensión
son los tipos de extensión admitidos, que se declaran en package.json / contribuye, que incluyen:
elementos de configuración del complemento de configuración, los usuarios pueden establecer la
configuración Valores predeterminados del elemento de configuración del
complemento a través de los comandos de configuración agregar comandos, los usuarios pueden ingresar comandos específicos a través de la paleta de comandos para activar los
menús de funciones del complemento agregar elementos del menú asociados con los comandos, el usuario hace clic en el elemento del menú para ejecutar el comando correspondiente
combinaciones de teclas agregar La tecla de atajo asociada con el comando. Cuando el usuario presiona una tecla de atajo específica, se ejecutan los
lenguajes de comando correspondientes para asociarse con el tipo de archivo o expandir un nuevo idioma. Cuando el usuario abre un tipo de archivo específico (que cumple con ciertos requisitos), se ejecuta el comando correspondiente.
Depuradores Agregar depurador, a través de VS Protocolo de depuración de código y
puntos de interrupción de comunicación IDE Cooperar con los depuradores, declarar que el depurador admite
gramáticas de tipo de lenguaje (programación) Agregar descripción de sintaxis TextMate,
temas de resaltado de sintaxis Agregar
fragmentos de tema personalizados Agregar fragmento de código
json Validación Agregar
vistas de verificación de formato json Agregar archivo izquierdo La vista del visor y la vista de depuración se dividen en
problemMatchers para agregar coincidencias de errores, y los
problemPatterns , como el error y la advertencia, se analizan a partir de los resultados de lint. Con problemMatchers, definir los
menús del modo de coincidencia es la única forma oficial de ampliar la IU. Los menús que admiten la expansión son los siguientes:
Cuadro de búsqueda de paleta de comandos comando del menú inferior Visor de
archivos de paletas explorador de menú contextual /
editor de contexto editor
de menú contextual /
barra de título contextual editor de menú /
barra de título de título editor de menú contextual / título /
vista de depuración contextual
pila de llamadas menú contextual depuración / pila de llamadas / contexto
SCM ( Gestión de código fuente) Ver
menú de barra de título scm /
menú de agrupación de archivos de título scm / resourceGroup /
menú de estado de archivo de contexto scm / recurso /
menú de cambio de archivo de contexto scm / cambiar / título
vista izquierda
visor de archivos vista de subcolumna /
depuración de título vista vista de subcolumna / item / context
P.S. son ubicaciones discretas, no se admite la personalización drástica de la interfaz de usuario, por ejemplo, es imposible agregar un ícono a la barra lateral izquierda (barra de actividad)
La extensión del menú en la barra de título admite iconos personalizados, pero la definición es extraña, por ejemplo:
"commands": [{
"command": "markdown.showPreviewToSide",
"title": "%markdown.previewSide.title%",
"category": "Markdown",
"icon": {
"light": "./media/PreviewOnRightPane_16x.svg",
"dark": "./media/PreviewOnRightPane_16x_dark.svg"
}
}],
"menus": {
"editor/title": [
{
"command": "markdown.showPreviewToSide",
"when": "editorLangId == markdown",
"alt": "markdown.showPreview",
"group": "navigation"
}
]
}
Defina el icono para el comando, el menú se asocia con el comando y luego el menú muestra el icono correspondiente
El aislamiento del entorno de API extendido hace que sea mucho más fácil restringir estrictamente las API disponibles para los complementos. Los complementos solo pueden acceder a las API extensibles proporcionadas por el IDE y no pueden perder el tiempo (como modificar el DOM y el estilo de la interfaz de usuario, a excepción de los elementos de personalización del tema admitidos oficialmente)
Principios de diseño de API La API de
complemento sigue algunos principios:
Basado en Promise: las operaciones asincrónicas son todas descritas por Promise
Token de cancelación: Pase el CancellationToken como parámetro adicional para verificar el estado de cancelación y recibir notificaciones de cancelación.
Gestión de recursos liberables: todos los recursos almacenados deben liberarse manualmente, como la supervisión de eventos, los comandos, la interacción de la interfaz de usuario, etc.
API de eventos: llame al método de suscripción (en [Will | Did] VerbNoun), pase el oyente (reciba los parámetros del evento) y devuelva Disposable
Comprobación de nulo estricto: distinga estrictamente entre indefinido y nulo a través de TypeScript
PD: Para obtener más información sobre "Desechable", consulte Patrón de desecho
Descripción general de la
API La API está organizada por espacio de nombres, el espacio de nombres global es el siguiente:
Comandos Comandos de ejecución / registro, tanto del IDE como de otros comandos de registro de complementos, como executeCommand
depurar depuración de API relacionadas, como startDebugging
env IDE información del entorno relacionada, como machineId,
extensiones de sessionId, llamadas a API de complementos cruzados, extensionDependency declara que el complemento depende de la
programación de lenguajes API relacionadas con el lenguaje, como createDiagnosticCollection, registerDocumentFormattingEditProvider
scm, API de control de versión del código fuente, como
las API relacionadas con la ventana del editor de ventanas createSourceControl, como onDidChangeTextEditorSelection, createTerminal, showTextFormattingEditProvider,
solo cuando hay un espacio de trabajo abierto API disponible en el nivel de carpeta de trabajo (como el espacio de trabajo de FindDocument está disponible). , saveAll, por
ejemplo, puede implementar el soporte de salto de referencia de módulo global de Haste a través de workspace.findFiles + languages.registerDefinitionProvider
Además, algunas API se proporcionan en forma de comandos (los comandos "propios del IDE" mencionados anteriormente), como vscode.previewHtml, vscode.openFolder, editorScroll, etc.
El
proceso del complemento de extensión basado en protocolo se comunica con el IDE a través de un protocolo específico. La implementación es stdin / stdout en formato JSON.
El punto más poderoso de este modelo es que el complemento se puede implementar en cualquier idioma, siempre que se cumpla con el protocolo de comunicación acordado.
4. Las extensiones relacionadas con el idioma
admiten el resaltado de sintaxis, los fragmentos de código y la coincidencia inteligente de corchetes a través de archivos de configuración y extensiones más complejas a través de API o servidor de idiomas.
Resaltado de
sintaxis extendida del tipo de configuración : soporte básico para distinguir roles gramaticales como cadenas, comentarios, palabras clave y soporte avanzado para distinciones semánticas como referencias de variables y funciones
Fragmento de código: entrada rápida de fragmentos, soporte básico para marcadores de posición simples, soporte avanzado para marcadores de posición anidados
Coincidencia inteligente de corchetes: soporte avanzado para complementar automáticamente elementos que aparecen en pares, como corchetes, comillas, comentarios de líneas cruzadas, etc.
Tenga en cuenta que la extensión de idioma VS Code es compatible con la gramática estándar de Text Mate (formato tmLanguage). Por ejemplo, el estilo Monarch no convencional de Monaco Editor es mucho más amigable. Consulte Aclaración de colores para obtener más detalles.
Las extensiones programáticas
que no se pueden configurar fácilmente se logran mediante API de extensión (complementos de escritura). Hay dos formas:
Realice la comunicación entre el protocolo del servidor de idiomas y el IDE, completamente independiente
Registrar proveedor para proporcionar capacidades personalizadas, similares a los ganchos
En uso, el primero es problemático pero más poderoso y flexible, y el segundo es conveniente y directo pero no tan flexible. Las capacidades de expansión admitidas son las siguientes:
Consejos flotantes: tipo de soporte básico, documento y otra información, resaltado de sintaxis de firma de método de soporte avanzado
Sugerencias de finalización: el soporte avanzado muestra información adicional junto a las sugerencias de finalización.
Verificar error: soporte básico para verificar y reportar errores para el contenido del archivo abierto al guardar, soporte avanzado para verificar e informar errores para cualquier recurso en el directorio de archivos abiertos
Firma del método: el soporte básico incluye documentos de descripción de parámetros en la firma del método
Ir a la definición: el soporte básico muestra cuando hay varias definiciones
Búsqueda de referencias: el soporte básico devuelve la ubicación específica de todas las referencias
Seleccionar resaltado de búsqueda: el soporte básico devuelve las mismas referencias en el documento actual
Directorio de declaración de método / variable: el soporte básico devuelve todos los identificadores declarados en el documento y sus ubicaciones de definición
Solución rápida: sugerencias para advertencias y errores, solución rápida. Soporte básico para acciones de corrección de errores, soporte avanzado para modificar código fuente, como código repetitivo para proponer funciones
Opciones de operación contextual: permite brindar información adicional y opciones operativas en función del contexto del código del usuario. Pantalla de soporte básico, avanzado puede agregar comandos personalizados
Cambiar nombre: Basic no admite el cambio de nombre por referencia, el avanzado admite el cambio de nombre entre archivos en el espacio de trabajo
Formato de código: básico no admite formato de código, avanzado admite texto completo / seleccionado / formateado en la entrada
V.
Requisitos del entorno del paso de desarrollo
VS Code
Código Yeoman y Yo - Generador de extensiones: npm install -g yo generator-code para hacerlo en un solo paso
Pasos
para generar plantillas de proyectos a través de andamios:
El
comando yo code selecciona de forma interactiva el tipo de complemento:
New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Extension Pack
Se recomienda TypeScript. Los otros son literales. El Extension Pack (paquete de complementos) es más interesante, es decir, el complemento ensamblado por el complemento, similar al Nuclide de React Native
Ingrese el nombre del complemento y otra metainformación para obtener un proyecto de complemento, y luego use VS Code para abrir el proyecto solo (el espacio de trabajo no puede tener otros directorios del proyecto), F5 inicia la depuración para ingresar a la depuración del complemento
El archivo de entrada del complemento es my-extension / src / extension.ts, la especificación de la estructura del proyecto puede hacer referencia al complemento integrado de VS Code:
// ref: https://github.com/Microsoft/vscode/tree/master/extensions/markdown
markdown/
media/
*.svg
*.css
snippets/
markdown.json
syntaxes/
*.tmLanguage
src/
features/
*Provider.ts
typings/
*.d.ts
commandManager.ts
commands.ts
logger.ts
markdownEngine.ts
security.ts
telemetryReporter.ts
Seis. El lanzamiento del paquete
proporciona herramientas CLI, vsce:
Empaquete npm install -g vsce
en el directorio de complementos y empaquelo en un archivo .vsix:
cd my-extension
vsce package
Obtendrá un paquete local de my-extesion.vsix (incluidas las dependencias de node_modules), y luego, si no desea hacerlo público, puede encontrar una manera de difundir la instalación usted mismo, porque a diferencia del registro npm, puede implementar manualmente una copia y poner complementos privados en el entorno de intranet, Visual Studio Marketplace (Mercado de complementos de VS Code) No existe una mente tan abierta:
If you want to share your extension with others privately, you can send them your packaged extension .vsix file.（见 Compartir en privado con otros）
No hay forma de implementar un conjunto de Visual Studio Marketplace, por lo que solo puedo encontrar una manera de resolver manualmente el problema de actualización del complemento, como la descarga automática / solicitud de instalación
Publicar
Para publicar el mercado de complementos, debe hacer varias cosas:
Registrar una cuenta de Visual Studio Team Services
Vaya a la página de Seguridad para crear un token de acceso personal
Comando vsce create-publisher (nombre del editor) para agregar editor
vsce login (nombre del editor) comando login
vsce publish -p <token> comando para publicar
Consulte Publicación de extensiones para obtener más detalles.
Referencia que
extiende el código de Visual Studio