¡Ya somos 20874 en Twitch, de los cuales 147 son subscriptores y 26 donantes! ¡Muchas gracias por el apoyo!

Donantes 26 Donantes
Fundadores 3 Fundadores
Cloud 1 Cloud
Cluster 1 Cluster
WiFi 12 WiFi
Network 5 Network
Server 20 Server
HardDisk 12 HardDisk
USBDisk 11 USBDisk
SDCard 14 SDCard
CD/DVD 15 CD/DVD
Diskette 56 Diskette
¡Quiero apoyar!

Extensiones de VSCode

Para utilizar Visual Studio Code, puedes descargarlo desde la página oficial: Visual Studio Code. Si te interesa una versión open source, descarga Visual Studio Codium.

A continuación muestro un listado completo de las extensiones de VSCode que más suelo utilizar en mi día a día, desglosadas en diferentes apartados por temática:

Tema / Syntax

Icono Nombre del paquete Autor Descripción Enlace
Flatland Monokai Thành Trang Mi tema de VSCode favorito, basado en Monokai. 💾
Victor Mono Font runbjo Tipografía de programación moderna y con ligaduras. 💾
vscode-icons VSCode Icons Team Vistosos y bonitos iconos para VSCode. 💾
indent-rainbow oderwat Colorea las indentaciones con columnas de colores. 💾
es6-string-html Tobermory Coloreado de sintaxis para HTML, CSS, SVG, XML, SQL, GLSL en string templates. Ideal para WebComponents. 💾
Image preview Kiss Tamás Muestra una previsualización de la imagen referenciada en el margen de la línea. 💾
VSCode Color Picker AntiANtiSepticeye Color Picker para otro tipo de documentos. Ideal para colores en Javascript o WebComponents. 💾
Astro Language Support Astro Da soporte de sintaxis de color y otros detalles cuando utilizas Astro. 💾

Uso general

Icono Nombre de la extensión Autor Descripción Enlace
GitHub Copilot GitHub Pair programming con una Inteligencia Artificial 💾
Cloak John Papa Oculta secretos en los ficheros .env de modo que no se vea accidentalmente en streams. 💾
Import Cost Wix Muestra el tamaño de un paquete importado con import o require en node_modules. 💾
Markdown Preview GitHub Styling Matt Bierner Previsualización de ficheros Markdown (más potente que la integrada). 💾
Error Lens Alexander Muestra warnings y errores de código en rojo en el propio código. 💾
Bracket Lens wraith13 Identifica que estás cerrando al lado del carácter de cierre de unas llaves, corchetes o paréntesis. 💾
Duplicate action mrmlnc Añade la opción de duplicar ficheros en VSCode. 💾
EditorConfig EditorConfig Soporte para EditorConfig en VSCode. 💾
Rainbow CSV mechatroner Colorea la sintaxis de ficheros CSV, TSV y ficheros SQL. 💾
ChatGPT: write and improve code using AI Tim Kmecl Usa ChatGPT y GPT4 dentro de tu VSCode para explicar, mejorar o buscar problemas en tu código. Requiere key de OpenAI. 💾
Smart Clicks Anthony Fu Selección inteligente de textos con doble clic. 💾

Frontend

Icono Nombre de la extensión Autor Descripción Enlace
css-triggers Kiss Tamás Añade a las propiedades CSS un indicador visual del coste de rendimiento. 💾
colorize kamikillerto Muestra los colores CSS escritos en el fondo del propio código. 💾
ESLint Dirk Baeumer Integra ESLint (Linter Javascript) en VSCode. 💾
StyleLint stylelint Integra StyleLint (Linter CSS) en VSCode. 💾
Fix JSON Oliver Sturm Arregla errores de sintaxis en ficheros JSON. 💾
SVG Preview Simon Siefke Previsualización de ficheros SVG en el propio editor de código. 💾
HTML to CSS/LESS/SCSS Tautvydas Derzinskas Permite copiar código HTML y pegar la estructura en forma de código CSS. 💾
Vitest Zixuan Chen Ejecutar y depurar casos de test con Vitest 💾
Template Literal Editor plievone Usa CTRL+ENTER para editar template literals multilínea de Javascript. 💾

Backend/Devops

Icono Nombre de la extensión Autor Descripción Enlace
Docker Microsoft Crea, administra y depura aplicaciones en contenedores de Docker desde VSCode. 💾
DotENV mikestead Coloreado de sintaxis para ficheros .env. 💾
Remote WSL Microsoft Abres proyectos, carpetas o ficheros alojando en WSL. 💾

Humor/Otros

Icono Nombre de la extensión Autor Descripción Enlace
Power Mode Cody Hoover Extensión de partículas al escribir en VSCode. 💾
vscode-pets Anthony Shaw Coloca pequeñas mascotas en tu Visual Studio Code para mejorar tu ambiente de trabajo. 💾
In Your Face TTOOWA Muestra imágenes del meme de Mr. Incredible según los errores de tu código. 💾

Configura tu Visual Studio Code

A continuación algunos otros consejos interesantes relacionados con VSCode:

En el siguiente directo puedes encontrar más consejos y trucos para configurar tu Visual Studio Code que mencionamos en uno de mis directos de Twitch: