¿Cómo hacer que VS Code trate otras extensiones de archivo como cierto idioma?

333

¿O hay una manera de cambiar el idioma del archivo actual para usar la función de resaltado de sintaxis?

Por ejemplo, en *.jsxrealidad usa JavaScript pero VS Code no lo reconoce.

visual-studio-code vscode-settings

— John Deev
fuente

501

En Visual Studio Code , puede agregar asociaciones de archivos persistentes para resaltar el idioma en su settings.jsonarchivo de esta manera:

// Place your settings in this file to overwrite the default settings
{
  "some_setting": custom_value,
  ...

  "files.associations": {
    "*.thor": "ruby",
    "*.jsx": "javascript",
    "Jenkinsfile*": "groovy"
  }
}

Puede usar Ctrl+ Shift+ py luego escribir settings JSON. Elija Preferencias: Abrir configuración (JSON) para abrir su settings.json.

La Files: Associationscaracterística se introdujo por primera vez en Visual Studio Code versión 1.0 (marzo de 2016). Verifique los patrones comodín disponibles en las notas de la versión y las cadenas de idioma conocidas en la documentación.

— Josien
fuente

66

El valor de la asociación debe ser la ID del idioma / complemento, no el nombre. Por ejemplo, el complemento VBScript que instalé, la ID es vbs. "* .vms": "vbs" obtiene la extensión personalizada para asociarse correctamente.

— Matt Merrill

Acabo de enfrentar un problema similar. Si agregar una asociación de archivos no parece funcionar, asegúrese de no tener un .editorconfigarchivo cerrado, o alinee las configuraciones entre VSCode y .editorconfig, este último tendrá prioridad

— RecuencoJones

También puede poner esta configuración en un ${projectdir}/.vscode/settings.jsonarchivo específico del proyecto .

— Jason

108

Mantenga presionadas las teclas Ctrl + Shift + P (o cmd en Mac), seleccione "Cambiar modo de idioma" y ahí está.

Pero todavía no puedo encontrar una manera de hacer que VS Code reconozca los archivos con una extensión específica como cierto idioma.

— John Deev
fuente

3

Parece que hay un acceso directo directamente a Change Language Mode; Alt+K, M

— Stafford Williams

Cmd+K, Mpara Mac.

— GreeKatrina

Esto es muy posible Vea mi respuesta a continuación: stackoverflow.com/a/51228725/3307796

— JoelAZ

69

La forma más fácil que he encontrado para una asociación global es simplemente presionar ctrl + km (o ctrl + shift + p y escribir "cambiar modo de idioma") con un archivo del tipo que está asociando abierto.

En las primeras selecciones será "Configurar asociación de archivos para 'x'" (sea cual sea el tipo de archivo - ver imagen adjunta) Al seleccionar esto, la asociación de tipo de archivo es permanente

Esto puede haber cambiado (probablemente lo hizo) desde la pregunta original y la respuesta aceptada (y no sé cuándo cambió) pero es mucho más fácil que los pasos de edición manual en las respuestas aceptadas y algunas de las otras, y evita totalmente tener reflexionar con identificaciones que pueden no ser obvias.

— JoelAZ
fuente

2

Gracias, esto funcionó para mí. No estaba claro al editar manualmente el settings.jsonarchivo cuál debería haber sido la ID de extensión, ¡pero este método lo solucionó!

— ccbunney

1

Eres bienvenido @ccbunney, me alegra que ayude. Ese fue exactamente el mismo problema que tuve, y nunca descubrí la ID de extensión que necesitaba, jajaja. De todos modos, me alegré mucho de encontrar esta solución para mí y ¡es genial que esté ayudando a otras personas! : D

— JoelAZ

33

p.ej:

// .vscode/settings.json in workspace

{
  "files.associations": {
    "*Container.js": "javascriptreact",
    "**/components/*/*.js": "javascriptreact",
    "**/config/routes.js": "javascriptreact"
  }
}

— B.Ma
fuente

1

Agradable. Esto es útil si tiene la misma extensión, pero diferentes analizadores de idioma en función de la ruta. Por ejemplo, puede tener yml para manejar canales de Concourse en una carpeta y archivos Ansible en otra.

— Christian Maslen

Votaría esto dos veces si pudiera. Intenté persistir en la sintaxis de mis diseños y parciales de Nanoc con una extensión .html, esto lo resolvió: "**/layouts/**/*.html": "erb"- vale la pena señalar que el menú desplegable "modo de idioma" de VSCode muestra el nombre real del resaltador de sintaxis entre paréntesis, por ejemploRuby ERB (erb)

— Dave Everitt

18

Esto funciona para mi.

{
"files.associations": {"*.bitesize": "yaml"}
 }

— Isura Amarasinghe
fuente

12

Esto, por ejemplo, hará que los archivos terminen .variablesy .overridesse traten como cualquier otro archivo MENOS. En términos de color del código, en términos de formato (automático). Defina en la configuración del usuario o la configuración del proyecto, como desee.

(La interfaz de usuario semántica utiliza estas extensiones extrañas, en caso de que se pregunte)

— Frank Nocke
fuente

12

Encontré la solución aquí: https://code.visualstudio.com/docs/customization/colorizer

Ir VS_CODE_FOLDER/resources/app/extensions/y actualizarpackage.json

— tonda13
fuente

8

Seguir los pasos en https://code.visualstudio.com/docs/customization/colorizer#_common-questions funcionó bien para mí:

Para extender un colorizador existente, debe crear un paquete.json simple en una nueva carpeta en .vscode / extensiones y proporcionar el atributo extensionDependencies que especifica la personalización a la que desea agregar. En el siguiente ejemplo, se agrega una extensión .mmd al colorizador de rebajas. Tenga en cuenta que el nombre de dependencia de extensión no solo debe coincidir con la personalización, sino que también la identificación del idioma debe coincidir con la identificación del idioma del colorizador que está extendiendo.

{
    "name": "MyMarkdown",
    "version": "0.0.1",
    "engines": {
        "vscode": "0.10.x"
    },
    "publisher": "none",
    "extensionDependencies": [
        "markdown"
    ],
    "contributes": {
        "languages": [{
            "id": "markdown",
            "aliases": ["mmd"],
            "extensions": [".mmd"]
        }]
    }
}

— MicMro
fuente

5

He seguido un enfoque diferente para resolver el mismo problema, en mi caso, hice una nueva extensión que agrega soporte de resaltado de sintaxis PHP para archivos específicos de Drupal (como .module y .inc): https: // github. com / mastazi / VS-code-drupal

Como puede ver en el código, creé una nueva extensión en lugar de modificar la extensión PHP existente. Obviamente declaro una dependencia en la extensión PHP en la extensión Drupal.

La ventaja de hacerlo de esta manera es que si hay una actualización de la extensión PHP, mi soporte personalizado para Drupal no se pierde en el proceso de actualización.

— mastazi
fuente