Como criar o VS Code para tratar outras extensões de arquivo como determinado idioma?

333

Ou existe uma maneira de alternar o idioma do arquivo atual para usar o recurso de destaque de sintaxe?

Por exemplo, *.jsxna verdade , usa JavaScript, mas o VS Code não o reconhece.

John Deev
fonte

Respostas:

501

No Código do Visual Studio , você pode adicionar associações de arquivos persistentes para o realce do idioma ao seu settings.jsonarquivo, assim:

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

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

Você pode usar Ctrl+ Shift+ pe depois digitar settings JSON. Escolha Preferências: Abrir configurações (JSON) para abrir sua settings.json.

O Files: Associationsrecurso foi introduzido pela primeira vez no Visual Studio Code versão 1.0 (março de 2016). Verifique os padrões curinga disponíveis nas notas de versão e as strings de idioma conhecidas na documentação.

Josien
fonte
6
O valor para a associação precisa ser o ID do idioma / plug-in, não o nome. Por exemplo, o plug-in VBScript que instalei, o ID é vbs. "* .vms": "vbs" obtém a extensão personalizada para associar corretamente.
Matt Merrill
Acabei de enfrentar um problema semelhante. Se a adição de uma associação de arquivo não parece trabalho, certifique-se que você não tem um .editorconfigarquivo de perto, ou alinhar as configurações entre VSCode e .editorconfig, este último terá precedência
RecuencoJones
Você também pode colocar essas configurações em um ${projectdir}/.vscode/settings.jsonarquivo específico do projeto .
Jason
108

Mantenha pressionadas as teclas Ctrl + Shift + P (ou cmd no Mac), selecione "Alterar modo de idioma" e pronto.

Mas ainda não consigo encontrar uma maneira de tornar os arquivos reconhecidos do VS Code com extensão específica como um determinado idioma.

John Deev
fonte
3
Parece que há um atalho diretamente para Change Language Mode; Alt+K, M
Stafford Williams
Cmd+K, Mpara Mac.
GreeKatrina
Isto é muito possível. Veja minha resposta abaixo: stackoverflow.com/a/51228725/3307796
JoelAZ
69

A maneira mais fácil que encontrei para uma associação global é simplesmente ctrl + km (ou ctrl + shift + p e digite "alterar o modo de idioma") com um arquivo do tipo que você está associando aberto.

Nas primeiras seleções, será "Configurar a associação de arquivos para 'x'" (qualquer que seja o tipo de arquivo - veja a imagem em anexo) Selecionar isso torna a associação do tipo de arquivo permanente

insira a descrição da imagem aqui

Isso pode ter mudado (provavelmente mudou) desde a pergunta original e a resposta aceita (e eu não sei quando ela mudou), mas é muito mais fácil do que as etapas de edição manual nas respostas aceitas e em algumas das outras respostas, e evita totalmente mexer com identificações que podem não ser óbvias.

JoelAZ
fonte
2
Obrigado - isso funcionou para mim. Não estava claro ao editar manualmente o settings.jsonarquivo qual deveria ser o ID da extensão, mas esse método o classificou!
precisa saber é o seguinte
1
Você é bem-vindo @ccbunney, feliz por ajudar. Esse era exatamente o mesmo problema que eu tinha - e eu nunca descobri o ID da extensão que eu precisava, lol. Enfim, fiquei muito feliz em encontrar esta solução para mim e é legal que esteja ajudando outras pessoas! : D
JoelAZ
33

por exemplo:

// .vscode/settings.json in workspace

{
  "files.associations": {
    "*Container.js": "javascriptreact",
    "**/components/*/*.js": "javascriptreact",
    "**/config/routes.js": "javascriptreact"
  }
}
B.Ma
fonte
1
Agradável. Isso é útil se você tiver a mesma extensão, mas analisadores de idiomas diferentes com base no caminho. Por exemplo, você pode ter o yml para manipular os pipelines do Concourse em uma pasta e os arquivos Ansible em outra.
Christian Maslen
Eu votaria isso duas vezes, se pudesse. Ao tentar manter a sintaxe dos meus layouts e parciais Nanoc com uma extensão .html, isso resolveu: "**/layouts/**/*.html": "erb"- vale a pena notar que o menu suspenso "modo de idioma" do VSCode mostra o nome real do marcador de sintaxe entre parênteses, por exemploRuby ERB (erb)
Dave Everitt
18

Isso funciona para mim.

insira a descrição da imagem aqui

{
"files.associations": {"*.bitesize": "yaml"}
 }
Isura Amarasinghe
fonte
12

Isso, por exemplo, fará com que os arquivos terminem .variablese .overridessejam tratados como qualquer outro arquivo LESS. Em termos de coloração de código, em termos de formatação (automática). Defina nas configurações do usuário ou do projeto, como desejar.

(A interface de usuário semântica usa essas extensões estranhas, caso você queira saber)

Frank Nocke
fonte
8

Seguir as etapas em https://code.visualstudio.com/docs/customization/colorizer#_common-questions funcionou bem para mim:

Para estender um colorizador existente, você deve criar um package.json simples em uma nova pasta em .vscode / extensions e fornecer o atributo extensionDependencies especificando a personalização à qual você deseja adicionar. No exemplo abaixo, uma extensão .mmd é adicionada ao colorizador de descontos. Observe que não só o nome extensionDependency deve corresponder à personalização, mas também o ID do idioma deve corresponder ao ID do idioma do colorizador que você está estendendo.

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

Eu segui uma abordagem diferente para resolver praticamente o mesmo problema; no meu caso, criei uma nova extensão que adiciona sintaxe PHP, destacando o suporte a arquivos específicos do Drupal (como .module e .inc): https: // github. com / mastazi / VS-code-drupal

Como você pode ver no código, criei uma nova extensão em vez de modificar a extensão existente do PHP. Obviamente, declaro uma dependência da extensão PHP na extensão Drupal.

A vantagem de fazer dessa maneira é que, se houver uma atualização para a extensão PHP, meu suporte personalizado ao Drupal não se perderá no processo de atualização.

mastazi
fonte