Quiero cambiar / agregar resaltado de sintaxis para un idioma en Sublime 2/3.

Por ejemplo, quiero que la palabra clave se thiscoloree en JavaScript.

¿Cómo puedo hacer eso?

Sé que hay un archivo de preferencia de JavaScript C:\Program Files\Sublime Text 3\Packages, pero no sé qué cambiar o si tengo que crear un nuevo archivo de preferencia de JavaScript en algún lugar de esta carpeta %APPDATA%\Sublime Text 3.

El resaltado de sintaxis está controlado por el tema que utiliza, accesible a través de Preferences -> Color Scheme. Los temas resaltan diferentes palabras clave, funciones, variables, etc. mediante el uso de ámbitos, que se definen mediante una serie de expresiones regulares contenidas en un .tmLanguagearchivo en el directorio / paquete de un idioma. Por ejemplo, el JavaScript.tmLanguagearchivo asigna los ámbitos source.jsy variable.language.jsla thispalabra clave. Dado que Sublime Text 3 utiliza el .sublime-packageformato de archivo zip para almacenar todas las configuraciones predeterminadas, no es muy sencillo editar los archivos individuales.

Desafortunadamente, no todos los temas contienen todos los ámbitos, por lo que tendrá que jugar con diferentes para encontrar uno que se vea bien y le brinde el resaltado que está buscando. Hay una serie de temas que se incluyen con Sublime Text, y muchos más están disponibles a través de Package Control , que recomiendo encarecidamente instalar si aún no lo ha hecho. Asegúrese de seguir las instrucciones de ST3 .

Da la casualidad de que he desarrollado el Neon Color Scheme, disponible a través de Package Control, que tal vez quiera echarle un vistazo. Mi objetivo principal, además de tratar de hacer que una amplia gama de idiomas se viera lo mejor posible, era identificar tantos ámbitos diferentes como pudiera, muchos más de los que se incluyen en los temas estándar. Si bien la definición del lenguaje JavaScript no es tan completa como la de Python, por ejemplo, Neontodavía tiene mucha más diversidad que algunos de los valores predeterminados como Monokaio Solarized.

Debo señalar que utilicé la Better JavaScriptdefinición de lenguaje de @ int3h para esta imagen en lugar de la que viene con Sublime. Se puede instalar mediante Package Control.

ACTUALIZAR

En los últimos tiempos he descubierto otra definición del lenguaje JavaScript sustitución - JavaScriptNext - ES6 Syntax. Tiene más ámbitos que el JavaScript base o incluso mejor JavaScript. Se ve así en el mismo código:

Además, desde que escribí originalmente esta respuesta, @skuroda se lanzó a PackageResourceViewertravés de Package Control. Le permite ver, editar y / o extraer partes o .sublime-packagepaquetes completos sin problemas . Entonces, si lo desea, puede editar directamente los esquemas de color incluidos con Sublime.

OTRA ACTUALIZACIÓN

Con el lanzamiento de casi todos los paquetes predeterminados en Github , los cambios se han producido de forma rápida y furiosa. La antigua sintaxis JS se ha reescrito por completo para incluir las mejores partes de la sintaxis JavaScript Next ES6, y ahora es totalmente compatible con ES6. Se han realizado muchos otros cambios para cubrir las esquinas y los bordes de las cajas, mejorar la consistencia y, en general, hacerlo mejor. La nueva sintaxis se ha incluido en la última compilación de desarrollo 3111 (en este momento) .

Si desea utilizar cualquiera de las nuevas sintaxis con la versión beta actual 3103, simplemente clone el repositorio de Github en algún lugar y vincule el JavaScript(o cualquier idioma (s) que desee) en su Packagesdirectorio; búsquelo en su sistema seleccionando Preferences -> Browse Packages.... Luego, simplemente haga un git pullen el directorio de repositorio original de vez en cuando para actualizar cualquier cambio, ¡y podrá disfrutar de lo último y lo mejor! Debo señalar que el repositorio usa el nuevo .sublime-syntaxformato en lugar del anterior .tmLanguage, por lo que no funcionarán con versiones ST3 anteriores a 3084, o con ST2 (en ambos casos, debería haber actualizado a la última versión beta o dev build de todos modos).

Actualmente estoy ajustando mi esquema de color de neón para manejar todos los nuevos ámbitos en la nueva sintaxis JS, pero la mayoría ya debería estar cubierta.

Finalmente encontré una manera de personalizar los temas dados.

Vaya a C:\Program Files\Sublime Text 3\Packagesy copie + cambie el nombre Color Scheme - Default.sublime-packagea Color Scheme - Default.zip. Luego descomprímalo y copie el tema al que desea cambiar %APPDATA%\Sublime Text 3\Packages\User. (En mi caso, All Hallow's Eve.tmTheme).

Luego, puede abrirlo con cualquier editor de texto y cambiar / agregar algo, por ejemplo, para cambiar thisen 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>

Esto marcará thisen rojo los archivos JavaScript. Puede seleccionar su tema en Preferences -> Color Scheme -> User -> <Your Name>.

Utilice el complemento PackageResourceViewer instalado a través de Package Control (como lo menciona MattDMo ). Esto le permite anular los recursos comprimidos simplemente abriéndolos en Sublime Text y guardando el archivo. Guarda automáticamente solo los recursos editados en% APPDATA% / Roaming / Sublime Text 3 / Packages / o ~ / .config / sublime-text-3 / Packages /.

Específicamente para la operación, una vez que el complemento esté instalado, ejecute el PackageResourceViewer: Open Resourcecomando. Luego seleccione JavaScriptseguido de JavaScript.tmLanguage. Esto abrirá un archivo xml en el editor. Puede editar cualquiera de las definiciones de idioma y guardar el archivo. Esto escribirá una copia anulada del archivo JavaScript.tmLanguage en el directorio de usuario.

El mismo método se puede utilizar para editar la definición de idioma de cualquier idioma del sistema.

El "esto" ya está coloreado en Javascript.

Ver-> Sintaxis-> y elija su idioma para resaltar.

Esta es mi receta

Nota: Esto no es exactamente lo que pide OP. Estas instrucciones le ayudarán a cambiar los colores de los elementos (comentarios, palabras clave, etc.) que son reglas de coincidencia de sintaxis definidas. Por ejemplo, use estas instrucciones para cambiar de modo que todos los comentarios de código sean de color azul en lugar de verde.

Creo que el OP está preguntando cómo definir thiscomo un elemento para colorear cuando se encuentra en un archivo fuente de JavaScript.

1. Instalar paquete: PackageResourceViewer

2. Ctrl+Shift+P> [ PackageResourceViewer: Open Resource]> [ Color Scheme - Default]> [ Marina.sublime-color-scheme] (o cualquier esquema de color que uses)

3. El comando anterior abrirá una nueva pestaña en el archivo " Marina.sublime-color-scheme".

   • Para mí, este archivo estaba ubicado en mi perfil móvil %appdata%( C:\Users\walter\AppData\Roaming\Sublime Text 3\Packages\Color Scheme - Default\).
   • Sin embargo, si busco esa ruta en el Explorador de Windows , [ Color Scheme - Default] no es un directorio secundario de [ Packages] dir. Sospecho que PackageResourceViewerestá haciendo algo de virtualización.

paso opcional: en la nueva pestaña de combinación de colores: Ctrl+Shift+P> [ Set Syntax: JSON]

4. Busque la regla que desea cambiar. Quería que los comentarios fueran visibles en movimiento, así que busqué " Comment"

   • Lo encontré en la "rules"sección

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

5. Busque la cadena "blue6":para encontrar la sección de definiciones de variables de color. Lo encontré en la "variables"sección.

6. Elija un nuevo color con una herramienta como http://hslpicker.com/ .

7. Defina una nueva variable de color o sobrescriba la configuración de color para blue6.

   • Advertencia: la sobrescritura blue6afectará a todos los demás elementos de texto en ese esquema de color que también usan blue6 ("Puntuación" "Accesor").

8. Guarde su archivo, los cambios se aplicarán instantáneamente a los archivos / pestañas abiertos.

NOTAS

Sublime manejará cualquiera de estos estilos de color. Posiblemente más.

hsla = tono, saturación, luminosidad, alfa rgba = rojo, verde, azul, alfa

hsla (151, 100%, 41%, 1) - el último parámetro es el nivel alfa (transparencia) 1 = opaco, 0.5 = semitransparente, 0 = completamente transparente

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

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

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