visual studio code - temas - Crear lenguaje personalizado en el código de Visual Studio

temas para visual studio code

Question

¿Hay alguna forma de extender los idiomas / gramáticas compatibles en Visual Studio Code? Me gustaría agregar una sintaxis de idioma personalizada, pero no he podido encontrar ninguna información sobre cómo se proporcionan los servicios de idiomas.

¿Alguien puede señalar alguna referencia o incluso ejemplos de implementaciones de lenguaje existentes?

Answer 1

Es posible con la nueva versión 0.9.0. Hay una documentación oficial sobre cómo agregar un idioma personalizado: https://github.com/Microsoft/vscode-docs/blob/0.9.0/release-notes/latest.md

Necesita un archivo .tmLanguage para el idioma que desea agregar. Puede encontrar archivos existentes, por ejemplo, en GitHub o puede definir su propio archivo de idioma. Busque aquí para tener una idea de cómo crear uno: http://manual.macromates.com/en/language_grammars

Después de encontrar un archivo .tmLanguage , tiene dos formas de crear una extensión basada en él.

Opción 1: usar un generador Yeoman

• Instala node.js (si aún no lo has hecho)
• Instale yo (si aún no lo ha hecho) ejecutando npm install -g yo
• Instale el generador Yo para el código: npm install -g generator-code
• Ejecuta tu yo code y selecciona New language support
• Siga las instrucciones (defina el archivo .tmLangauge , defina el nombre del complemento, las extensiones de archivo, etc.)
• El generador crea un directorio para su extensión con el nombre del complemento en su directorio de trabajo actual.

Opción 2: crear el directorio por su cuenta

• Cree un directorio con el nombre de su complemento (solo letras minúsculas). Digamos que lo llamamos mylang .
• Agregue las syntaxes una subcarpeta y coloque el archivo .tmlanguage dentro de ella

• Cree un archivo package.json dentro de la raíz de la carpeta de extensión con contenido como este

  {
      "name": "mylang",
      "version": "0.0.1",
      "engines": {
          "vscode": ">=0.9.0-pre.1"
      },
      "publisher": "me",
      "contributes": {
          "languages": [{
              "id": "mylang",
              "aliases": ["MyLang", "mylang"],
              "extensions": [".mylang",".myl"]
          }],
          "grammars": [{
              "language": "mylang",
              "scopeName": "source.mylang",
              "path": "./syntaxes/mylang.tmLanguage"
          }]
      }
  }

Finalmente agregue su extensión a Visual Studio Code

Copie la carpeta de extensión al directorio de extensión. Esto es:

• en Windows %USERPROFILE%/.vscode/extensions

• en Mac / Linux $HOME/.vscode/extensions

Código de reinicio. Ahora su extensión se ejecutará automáticamente cada vez que abra un archivo con la extensión de archivo especificada. Puede ver el nombre del complemento utilizado en la esquina inferior derecha. Puedes cambiarlo haciendo clic en el nombre de la extensión. Si su extensión no es la única registrada para una extensión de archivo específica, entonces el Código puede elegir la incorrecta.

Answer 2

Para extender la respuesta de Wosis, el uso de un archivo .tmLanguage es opcional. Usar un .json regular es una .json perfectamente válida y, en mi opinión, mejor legible.

Para un ejemplo, vea GitHub VSCode_SQF: sqf.json

Dentro de package.json solo necesitarías cambiar la ruta de ./syntaxes/mylang.tmLanguage a ./syntaxes/mylang.json

Answer 3

Usando ingeniería inversa puede agregar un nuevo lenguaje a VSCode. Puede echar un vistazo a cómo se implementa mecanografiado en un complemento de JavaScript y cómo se comunica con node.exe a través de la tubería. Pero es una cosa difícil, ya que viene todo sin documentación. Proporcionaré una documentación muy breve aquí:

Puede definir un nuevo complemento en la carpeta de complementos C:/Users/USER/AppData/Local/Code/app-0.3.0/resources/app/plugins .

Copie la carpeta del complemento de typScript y cambie el nombre de las extensiones de archivo y los nombres de idioma mencionados en todos los archivos a su nuevo idioma, de modo que su nuevo complemento se vaya a utilizar cuando se abra un archivo .mylang.

En typescriptServiceClient.js verá que se está bifurcando un proceso secundario y que su stdout está acoplado a un new WireProtocol.Reader . mylanguage.exe su propio mylanguage.exe (probablemente necesitará escribir ese mylanguage.exe por su cuenta). VSCode le pide a ese binario que obtenga más información específica del idioma.

En typescriptMain.js encontrará el registro de características para el idioma. Elimine todas las llamadas a monaco.Modes.XXXXXXSupport.register excepto monaco.Modes.DeclarationSupport.register .

Ahora abra un directorio en VSCode que contenga archivos .mylang y abra uno de ellos a través de CTRL+P + FileName . Haga clic derecho en un identificador y seleccione Go to Definition . VSCode ahora envía una solicitud como esta a través de StdIn a su exe

{"seq":1,"type":"request","command":"definition","arguments":{"file":"d:/Projects/MyProj/Source/MyFile.mylang","line":45,"offset":9}}

VSCode espera una respuesta como esta:

Content-Length: 251
[LINE BREAK]
{ "seq" : 1, "type" : "response", "command" : "definition", "request_seq" : 1, "success" : true, "body" : [{ "file" : "d:/Projects/MyProj/Source/MyOtherFile.mylang", "start" : { "line" : 125, "offset" : 3 }, "end" : { "line" : 145, "offset" : 11} }] }

Si todo funciona, VSCode abrirá MyOtherFile.mylang y establecerá el cursor en la línea 124 en la columna 3.

Pruébalo por tu cuenta ;-)