17

Como cambiar la apariencia de tu entorno de desarrollo Visual Studio Code a un modo Neón 😊

¡Hola amantes del código!

En este post vamos aprender como poner un tema del estilo “Neón” en uno de los editores mas usados y preferidos por nosotros los programadores que es Visual Studio Code 😍

¡Empecemos!

  1. Lo primero que debes hacer es descargar SynthWave ’84 que lo puedes encontrar directamente en el Marketplace o en tu sección de plugin de VSC como veremos en la siguiente imagen.
unotutorial.PNG
  1. Ahora tienes que descargar otro plugin el cual nos permitirá modificar las propiedades para aplicar el efecto que queremos, lo puedes ver en la siguiente imagen. 🤩
tuto2.PNG
  1. Genial vas por buen camino 😃, ahora presta mucha atención a la siguiente serie de pasos:
  • Vas ir a File > Preferences > Settings. Esto lo puedes hacer desde cualquier ventana de tu entorno de desarrollo. 🙈
tuto4.PNG
  • Ahora vas a escribir lo siguiente en la sección de filtros de búsqueda “vscode_custom_css.imports” donde te aparecerá el archivo .json que podremos editar, solamente ve a donde dice “Edit in settings.json” para poder empezar hacer la magia. 😃
tuto5.PNG
  1. En este paso lo que haremos es colocar la ruta dentro del .json el cual estará apuntando a un archivo que te dejare aquí abajito para que lo descargues. 👇

Te debe salir un archivo lleno de propiedades pero ¡Tranquilo! no necesitas entender nada de lo que esta aquí, lo único que debes hacer es darle click derecho en cualquier parte de la pantalla seguido de la opción “guardar como”.
tuto7.PNG

Luego lo podrás guardar en cualquier lugar que desees, asegúrate de cambiar la extensión .txt por .css

tuto8.PNG
  1. Ya estas por terminar 😃 ahora recuerdas el archivo json que tenemos abierto en nuestro entorno de desarrollo te debe salir algo como esto:
tuto9.PNG
  • Alii adentro vas a poner la ruta del archivo que descargaste previamente, tienes que ponerlo de la siguiente forma.
tuto10.PNG

Ojo
Por nada del mundo olvides poner “file:///” después del tercer slash puede poner la ruta de tu archivo “Synthwave84.css”.

  • Ahora lo que debes hacer es salvar los cambios realizados, lo puedes hacer con el comando Ctrl + s
  1. Este será tu ultimo paso para que puedas ver toda la magia del el efecto Neon en tu entorno. 😃
  • Vas a escribir el comando Ctrl + Shift + p donde te desplegara una sección para que escribas lo siguiente:
    • “Enable Custom Css and JS”

Donde solo debes darle click a la opción que te aparece
tuto11.PNG

Ahora te debió salir en la parte inferior derecha una ventana donde te pide que reinicies el editor dale click en reiniciar.

¡Lo has logrado!

Si te sigue saliendo la ventana de un error el cual dice que esta corrupto solo dale a la opción de no mostrar de nuevo.

¡Ahora disfruta de un entorno dark y colorido mientras transformas el mundo!

tutofinal.PNG
Escribe tu comentario
+ 2
Ordenar por:
6
12197Puntos

Genial Sebas !!! 🐰💚Gracias por compartirlo… ✨

3
22099Puntos

Genial post Sebastián, eres uno de esos enormes ejemplos que hacen de la comunidad de platzi el gran diferenciador en cuanto a enseñanza efectiva online se trata! 🤗

2
55774Puntos
un año

Muchísimas gracias 🥺, esperando algún día poder llegar al nivel de ustedes nuestros mentores ❤️

1
5229Puntos

excelente muchas gracias Sebas esta muy bueno

1
11819Puntos

A la profe le aparecen las palabras reservadas y números iluminados, pero a mí me aparecen iluminadas solo las palabras y los números no.
POR QUÉ??

1
11796Puntos
4 meses

La iluminación de los brackets pairs y otras cositas ya son nativas de Vistual Studio Code. Busca la extensión de Bracket Pair Colorizer 2 no descargues la extensión, porque ya no tiene soporte, pero ahí te dice como activar todas esas características de forma nativa. 🙂