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.

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. 🤩

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. 🙈

• 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. 😃

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. 👇

• Synthwave84.css

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”.

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

1. Ya estas por terminar 😃 ahora recuerdas el archivo json que tenemos abierto en nuestro entorno de desarrollo te debe salir algo como esto:

• Alii adentro vas a poner la ruta del archivo que descargaste previamente, tienes que ponerlo de la siguiente forma.

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

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!