Quero alterar / adicionar realce de sintaxe para um idioma no Sublime 2/3.

Por exemplo, quero a palavra-chave thiscolorida em JavaScript.

Como eu posso fazer isso?

Sei que existe um arquivo de preferência JavaScript C:\Program Files\Sublime Text 3\Packages, mas não sei o que alterar ou se preciso criar um novo arquivo de preferência de JavaScript em algum lugar desta pasta %APPDATA%\Sublime Text 3.

O realce de sintaxe é controlado pelo tema que você usa, acessível através de Preferences -> Color Scheme. Os temas destacam diferentes palavras-chave, funções, variáveis, etc. por meio do uso de escopos, que são definidos por uma série de expressões regulares contidas em um .tmLanguagearquivo em um diretório / pacote de um idioma. Por exemplo, o JavaScript.tmLanguagearquivo atribui os escopos source.jse variable.language.jsa thispalavra - chave. Como o Sublime Text 3 está usando o .sublime-packageformato de arquivo zip para armazenar todas as configurações padrão, não é muito simples editar os arquivos individuais.

Infelizmente, nem todos os temas contêm todos os escopos, então você precisará experimentar diferentes para encontrar um que pareça bom e forneça o destaque que você está procurando. Há uma série de temas que estão incluídos com Sublime texto, e muitos mais estão disponíveis através de controle do pacote , que eu altamente recomendo a instalação se você não tiver já. Certifique-se de seguir as instruções ST3 .

Por acaso, desenvolvi o Neon Color Scheme, disponível através do Package Control, que você pode querer dar uma olhada. Meu principal objetivo, além de tentar fazer com que uma ampla gama de idiomas pareça o melhor possível, era identificar o máximo de escopos diferentes que eu pudesse - muitos mais do que os incluídos nos temas padrão. Embora a definição da linguagem JavaScript não seja tão completa quanto a do Python, por exemplo, Neonainda tem muito mais diversidade do que alguns dos padrões como Monokaiou Solarized.

Devo observar que usei a Better JavaScriptdefinição de linguagem de @ int3h para esta imagem, em vez da que acompanha o Sublime. Ele pode ser instalado via Package Control.

ATUALIZAR

Recentemente, descobri outra definição de linguagem de substituição do JavaScript - JavaScriptNext - ES6 Syntax. Ele tem mais escopos do que o JavaScript básico ou até mesmo JavaScript melhor. É assim no mesmo código:

Além disso, uma vez que escrevi esta resposta originalmente, @skuroda foi lançado PackageResourceViewervia Package Control. Ele permite que você visualize, edite e / ou extraia partes ou .sublime-packagepacotes inteiros sem problemas . Portanto, se você quiser, pode editar diretamente os esquemas de cores incluídos no Sublime.

OUTRA ATUALIZAÇÃO

Com o lançamento de quase todos os pacotes padrão no Github , as mudanças têm vindo rápida e furiosamente. A antiga sintaxe JS foi completamente reescrita para incluir as melhores partes da sintaxe JavaScript Next ES6, e agora é totalmente compatível com ES6. Uma tonelada de outras mudanças foram feitas para cobrir casos de cantos e extremos, melhorar a consistência e apenas torná-la melhor. A nova sintaxe foi incluída (no momento) mais recente dev build 3111.

Se você quiser usar qualquer uma das novas sintaxes com a compilação beta 3103 atual , simplesmente clone o repositório Github em algum lugar e vincule o JavaScript(ou qualquer idioma (s) que desejar) em seu Packagesdiretório - encontre-o em seu sistema selecionando Preferences -> Browse Packages.... Em seguida, basta fazer um git pullno diretório de repositório original de tempos em tempos para atualizar todas as alterações e você pode aproveitar o melhor e mais recente! Devo observar que o repo usa o novo .sublime-syntaxformato em vez do antigo .tmLanguage, então eles não funcionarão com compilações ST3 anteriores a 3084, ou com ST2 (em ambos os casos, você deve ter atualizado para a versão beta ou dev build mais recente de qualquer maneira).

No momento, estou ajustando meu esquema de cores Neon para lidar com todos os novos escopos na nova sintaxe JS, mas a maioria já deve ser abordada.

Finalmente encontrei uma maneira de personalizar os temas fornecidos.

Vá para C:\Program Files\Sublime Text 3\Packagese copie + renomeie Color Scheme - Default.sublime-packagepara Color Scheme - Default.zip. Em seguida, descompacte-o e copie o tema para o qual deseja alterar %APPDATA%\Sublime Text 3\Packages\User. (No meu caso All Hallow's Eve.tmTheme).

Em seguida, você pode abri-lo com qualquer Editor de Texto e alterar / adicionar algo, por exemplo, para alterar thisem JavaScript:

<dict>
    <key>name</key>
    <string>Lang Variable</string>
    <key>scope</key>
    <string>variable.language</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FF0000</string>
    </dict>
</dict>

Isso marcará thisem Arquivos JavaScript em vermelho. Você pode selecionar seu tema em Preferences -> Color Scheme -> User -> <Your Name>.

Use o plugin PackageResourceViewer instalado por meio do Package Control (conforme mencionado por MattDMo ). Isso permite que você substitua os recursos compactados simplesmente abrindo-os em Sublime Text e salvando o arquivo. Ele salva automaticamente apenas os recursos editados em% APPDATA% / Roaming / Sublime Text 3 / Packages / ou ~ / .config / sublime-text-3 / Packages /.

Específico para o op, uma vez que o plugin é instalado, execute o PackageResourceViewer: Open Resourcecomando. Em seguida, selecione JavaScriptseguido por JavaScript.tmLanguage. Isso abrirá um arquivo xml no editor. Você pode editar qualquer uma das definições de idioma e salvar o arquivo. Isso gravará uma cópia de substituição do arquivo JavaScript.tmLanguage no diretório do usuário.

O mesmo método pode ser usado para editar a definição de idioma de qualquer idioma no sistema.

O "isto" já está colorido em Javascript.

Visualize-> Sintaxe-> e escolha o idioma a ser destacado.

Esta é a minha receita

Nota: Isso não é exatamente o que OP está pedindo. Essas instruções o ajudarão a alterar as cores dos itens (comentários, palavras-chave, etc.) que são regras de correspondência de sintaxe definidas. Por exemplo, use estas instruções para alterar de forma que todos os comentários de código sejam coloridos em azul em vez de verde.

Acredito que o OP está perguntando como definir thiscomo um item a ser colorido quando encontrado em um arquivo-fonte JavaScript.

1. Pacote de instalação: PackageResourceViewer

2. Ctrl+Shift+P> [ PackageResourceViewer: Open Resource]> [ Color Scheme - Default]> [ Marina.sublime-color-scheme] (ou qualquer esquema de cores que você usar)

3. O comando acima abrirá uma nova guia para o arquivo " Marina.sublime-color-scheme".

   • Para mim, esse arquivo estava localizado no meu perfil móvel %appdata%( C:\Users\walter\AppData\Roaming\Sublime Text 3\Packages\Color Scheme - Default\).
   • No entanto, se eu navegar até esse caminho no Windows Explorer , [Color Scheme - Default ] não é um diretório-filho de [ Packages] dir. Suspeito que PackageResourceVieweresteja fazendo alguma virtualização.

etapa opcional: na nova guia de esquema de cores: Ctrl+Shift+P> [ Set Syntax: JSON]

4. Pesquise a regra que você deseja alterar. Queria tornar os comentários visíveis, então pesquisei " Comment"

   • Eu encontrei na "rules"seção

 "rules":
    [
        {
            "name": "Comment",
            "scope": "comment, punctuation.definition.comment",
            "foreground": "var(blue6)"
        },

5. Procure a corda "blue6": para encontrar a seção de definições de variáveis ​​de cores. Eu encontrei na "variables"seção.

6. Escolha uma nova cor usando uma ferramenta como http://hslpicker.com/ .

7. Defina uma nova variável de cor ou substitua a configuração de cor para blue6 .

   • Aviso: sobrescreverblue6 afetará todos os outros elementos de texto nesse esquema de cores que também usam azul6 ("Pontuação" "Acesso").

8. Salve seu arquivo, as alterações serão aplicadas instantaneamente a quaisquer arquivos / guias abertos.

NOTAS

Sublime irá lidar com qualquer um desses estilos de cores. Possivelmente mais.

hsla = matiz, saturação, luminosidade, alfa rgba = vermelho, verde, azul, alfa

hsla (151, 100%, 41%, 1) - o último parâmetro é o nível alfa (transparência) 1 = opaco, 0,5 = semitransparente, 0 = totalmente transparente

hsl (151, 100%, 41%) - sem canal alfa

rgba (0, 209, 108, 1) - rgb com um canal alfa

rgb (0, 209, 108) - sem canal alfa