¡Ya somos 22885 en Twitch, de los cuales 92 son subscriptores y 26 donantes! ¡Muchas gracias por el apoyo!
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:
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. | 💾 |
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. | 💾 |
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. |
💾 |
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. | 💾 |
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. | 💾 |
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: