Personaliza tu VSCode para que parezca StackBlitz 🔥

Samuel Burbano — Wed, 15 Feb 2023 17:56:28 +0000

Siempre me ha gustado mucho el tema que usa Stackblitz para su editor en línea, es muy limpio y permite "codear" tranquilamente, y yo necesito esa tranquilidad en mi vida 😌

Descripción de VSCode por ChatGPT

VSCode es uno de los editores de código más populares y poderosos que existen actualmente. Uno de los motivos de su éxito es su gran cantidad de personalización y extensiones que le permiten a los desarrolladores adaptar el editor a sus necesidades específicas. Una de estas características de personalización es "workbench.colorCustomizations", que permite cambiar los colores del editor y ajustar el tema visual del mismo.

Descripción de Stackblitz por ChatGPT

Stackblitz es un editor de código en línea gratuito y colaborativo que permite a los desarrolladores crear y ejecutar proyectos de JavaScript, TypeScript, React, Angular y otros frameworks web directamente en el navegador, sin necesidad de configurar un entorno de desarrollo local. También ofrece características avanzadas como integración con Git, autocompletado, vista previa en vivo y más. Es una herramienta útil para prototipado rápido, pruebas y colaboración en equipo.

Empezamos

Lo primero que tenemos que saber es que Stackblitz usa el tema por defecto de VSCode Dark+ (default dark).

A partir de este tema usando "workbench.colorCustomizations" (Documentación) vamos a cambiar los colores para que se parezca a Stackblitz con su paleta.

Usando nuestra magia desde el inspector vamos a notar 5 colores que usaremos para cambiar las distintas partes de nuestro editor.

"#15181e": Será nuestro color de fondo. Es ese azul oscuro que que le da sensación de noche a nuestro editor.
"#2e3138": Será como nuestro color "primario", el color que usaremos para la interfaz al rededor del editor, como el Title Bar, Activity Bar, Input Backgrounds, etc.
"#202327": Será como nuestro color "secundario", es el que usaremos para nuestro Side Bar, Dropdown, Quick Input.
"#0068b3": Será nuestro color para focus, punto 😅. Bueno, y para el Remote, ya verás.
"#26292e": Este es el color de los Tabs, en este si, punto 👀.

Vamos a por ello! ⚡

"editor.background": Vamos por lo mejor, el fondo!

"titleBar.activeBackground", "menu.background", "statusBar.background", "activityBar.background", "input.background", "editorGroupHeader.tabsBackground", "editorWidget.background", "list.inactiveSelectionBackground": Con estas propiedades cambiaremos la interfaz al rededor.

Obviamente no le daremos el horrible rojo, si no nuestro hermoso color primario: "#2e3138"

"quickInput.background", "dropdown.background", "sideBar.background": Usando nuestro color "secundario" cambiaremos el resto de partes de la interfaz.

Nota como estamos cambiando específicamente esta vez el background del Quick Input porque no queremos que se mezcle con las partes "primarias" del editor. No te olvides de poner nuestro color secundario! ("#202327")

"statusBarItem.remoteBackground", "list.activeSelectionBackground": Ahora cambiaremos 2 cosas, el color de selección en listas y el color del Remote, que es donde se muestra que estamos en WSL en el caso de Windows.

List Selection & Remote	List Selection

Y ya con nuestro color azul ("#0068b3") aplicado:

"tab.inactiveBackground": Solo nos queda una cosa! Cambiar el color de los tabs, ya que siguen teniendo el color del antiguo Dark+, con esto le daremos un mejor contraste con el tema oscuro azul que tenemos usando el color: "#26292e"

Y VOILÀ! ⚡

Podrías decir la diferencia entre nuestro VSCode y StackBlitz? 😌

TL;DR

Cambia tu tema a Dark+ (default dark) y agrega en tu settings.json la siguiente configuración:

"workbench.colorCustomizations": {
  "editor.background": "#15181e",
  "titleBar.activeBackground": "#2e3138",
  "menu.background": "#2e3138",
  "statusBar.background": "#2e3138",
  "activityBar.background": "#2e3138",
  "input.background": "#2e3138",
  "editorGroupHeader.tabsBackground": "#2e3138",
  "editorWidget.background": "#2e3138",
  "list.inactiveSelectionBackground": "#2e3138",
  "quickInput.background": "#202327",
  "dropdown.background": "#202327",
  "sideBar.background": "#202327",
  "statusBarItem.remoteBackground": "#0068b3",
  "list.activeSelectionBackground": "#0068b3",
  "tab.inactiveBackground": "#26292e"
}

Y VOILÀ! ⚡

DEV Community: Samuel Burbano

Personaliza tu VSCode para que parezca StackBlitz 🔥

Descripción de VSCode por ChatGPT

Descripción de Stackblitz por ChatGPT

Empezamos

TL;DR