Cómo crear tu propio tema de color de Visual Studio Code
Visual Studio Code es mi editor favorito el año pasado. Cada actualización de Microsoft trae sorpresas para todos, lo que hace que a la gente le guste aún más. He estado usando los temas de color integrados Light+ y Dark+ antes, pero recientemente sentí de repente que la distinción de color del primero no es alta y parece un par de códigos densos de un vistazo, mientras que el color de fondo del El texto seleccionado es demasiado claro, lo cual es diferente del fondo del editor. Los colores eran tan similares que era difícil distinguirlos, así que se me ocurrió la idea de crear mi propio tema de color. Después de varios días de investigación, finalmente se me ocurrió la serie de temas de color Lei Theme.
Echemos un vistazo a los efectos de dos de los temas:
En términos generales, no necesitamos crear un tema de color desde cero. Primero, debemos elegir el. el tema de color que más nos guste (o en otras palabras, primero busque un tema de color que sea más similar a sus propias ideas) y luego realice algunos ajustes en función de esto. Además, si desea publicar el tema de color en la tienda de extensiones Visual Studio Code de Microsoft, también debe registrar una cuenta de desarrollador de Microsoft y publicarlo a través de la herramienta vsce. Esto se explicará en detalle a continuación.
Tema de color en formato tmTheme
TextMate fue uno de los editores de código más populares hace muchos años. El sufijo de archivo de su tema de color es .tmTheme. en este artículo. En formato tmTheme. El tema de color de Visual Studio Studio adopta el formato de tema estándar TextMate. Podemos consultar este artículo Escribir una gramática de TextMate: algunas lecciones aprendidas, que se puede entender de la siguiente manera: después de que el editor analiza el código, especificará un valor específico para. cada elemento Un alcance Este alcance indica si el elemento es una palabra clave, una constante o un signo de puntuación. El estilo de texto del alcance correspondiente se define a través de un archivo en el formato tmTheme.
Según este artículo, puede saber que la siguiente es una lista de ámbitos comunes:
comentario
constante
constante. caracter.escape
idioma.constante
numeric.constante
declaración.sección entidad.nombre.sección
declaración.etiqueta
deco .folding
entidad.nombre.función
entidad.nombre.etiqueta
entidad.nombre.tipo
entidad.otro.atributo -nombre
entidad.otra.clase-heredada
no válido
no válido.deprecado.espacio en blanco final
palabra clave
palabra clave.control.import
palabra clave.operator.js
marcado.encabezado
marcado.lista
markup.quote
meta.embedded
meta.preprocesador
meta.sección entidad.nombre.sección
meta. etiqueta
almacenamiento
almacenamiento.tipo.método
cadena
fuente de cadena
cadena.sin comillas
soporte .clase
soporte.constante
soporte.función
soporte.tipo
soporte.variable
fuente del texto
variable
variable.idioma
variable.otro
variable.parámetro
El siguiente es un fragmento de código tmTheme del archivo de formato:
/key>
Como se puede ver en el código anterior, de hecho, este archivo en formato tmTheme parece Es bastante simple, pero para los principiantes, la dificultad es no saber cómo escribir el alcance. Esto se explicará paso a paso a continuación.
Crear un proyecto de tema de color
Según la documentación oficial, primero ejecutamos el siguiente comando para instalar la herramienta de generación de código Yeoman para crear un proyecto de tema de color predeterminado:
$ npm install -g yo generador-code
Una vez completada la instalación, ingrese al directorio ~/.vscode/extensions y ejecute el siguiente comando para iniciar el generador:
$ yo code
Nota: ~/.vscode/extensions representa el directorio .vscode/extensions en el directorio raíz del usuario. La razón para crear un nuevo proyecto aquí es principalmente para usarlo localmente sin publicarlo. el almacén de extensiones y para facilitar la depuración.
Seleccione Nuevo tema de color para crear un proyecto de tema de color:
_------ ╭————————————————— ————————╮
| │ Bienvenido a Visual │
|--(o)--|
`---------? │ generador │
( _?U`_ ) ╰————————————————— — ————————╯
/___A___\ /
~ |
__'.___.'__
? ` |° ? Y ` ¿Qué tipo de extensión deseas crear?
Nueva extensión (TypeScript)
Nueva extensión (JavaScript) Nuevo tema de color
Compatibilidad con nuevos idiomas
Nuevos fragmentos de código
Luego necesito completar algunas preguntas de forma interactiva en la línea de comando. Lo siguiente es lo que completé durante la ejecución: De qué tipo. ¿Qué extensión quieres crear? Nuevo tema de color
URL (/app/?23C4FA
El nombre del primer elemento representa el nombre que le dimos a la regla; el alcance es el alcance aplicable. Si se pueden separar varios elementos mediante comas, por ejemplo, el valor de alcance de la constante definida por el usuario es constante.carácter. , constante.other; las configuraciones son información de estilo específica, como valores de color.
Como se puede ver en el código fuente, los únicos estilos admitidos son primer plano y estilo de fuente, mientras que el fondo se puede ver en los comentarios. Por algún motivo, Visual Studio Code no es compatible temporalmente.
El valor del alcance es template.expression, que puede considerarse como el selector de clase CSS token.template.expression. En el vídeo de demostración anterior de Developer Tools, el nombre de la variable de la cadena de plantilla al renderizar es HTML <. span class="token block ts meta variable otra lectura escritura cadena función flecha nueva expresión de plantilla expr">... , si estamos familiarizados con CSS, deberíamos poder ver de un vistazo que .token.template. La expresión coincidirá con la de la etiqueta. Por lo tanto, podemos pensar simplemente en el alcance como un selector de clases CSS.
Cabe señalar que si no escribimos lo suficientemente detalladamente al definir el alcance, podemos hacer coincidir otros elementos por error, haciendo que una parte se ajuste mientras que la otra parte se ajuste incorrectamente, por lo que debemos hacer Esta Perfección tampoco es fácil.
Publicar en el almacén de extensiones
Para publicar la extensión en el almacén de extensiones para que más personas puedan usarla, necesitamos usar la herramienta de línea de comandos vsce. Puede consultar el. document vsce: referencia de la herramienta de publicación. Estos son los pasos básicos:
Instale la herramienta de línea de comandos vsce. Ejecute el comando npm install -g vsce
para registrar una cuenta de Visual Studio Team Services y obtener el token de acceso
para crear un publicador. Ejecute el comando vsce create-publisher
para iniciar sesión en Publisher. Ejecute el comando vsce login
para publicar la extensión. Ejecute el comando vsce publicar
Para conocer los pasos operativos detallados, se recomienda consultar los documentos oficiales correspondientes.
Este artículo no explica en detalle cómo crear un tema de color de Visual Studio Code. Solo menciona algunas cosas que creo que son clave durante el proceso de lanzamiento, pero es difícil revisar la documentación. Los principales puntos a los que llegar. Es la naturaleza de los programadores amar lanzar. Espero que este artículo pueda ayudarlos, a quienes les encanta lanzar, a evitar algunos desvíos y aprovechar al máximo su Visual Studio Code favorito.