No seas un mono programador. Usa estas extensiones de VSCode para convertirte en un ninja del código.
Sé lo que estás pensando: “Soy un verdadero desarrollador front-end, no necesito extensiones. Haré todo a mano como un verdadero hombre.” Te aplaudo, pero las extensiones de VSCode pueden hacer tu vida mucho más fácil. Te ayudarán a escribir mejor código, encontrar bugs más rápido y ahorrar tiempo en tareas repetitivas.
Las Mejores Extensiones de VSCode
- Prettier - Code Formatter
- ESLint
- GitHub Copilot
- GitLens — Git supercharged
- Tailwind CSS IntelliSense
- Auto Rename Tag
- Color Highlight
- Auto Close Tag
- CSS Peek
- Live Server
- ES7+ React/Redux/React-Native snippets
- Better Comments
- Material Icon Theme
- Dracula Official
- Pretty TypeScript Errors
Prettier - Code Formatter
Prettier es un formateador de código con opinión que automáticamente formateará tu código a un estilo consistente. Esta extensión es genial para equipos que quieren hacer cumplir la consistencia, o simplemente para que no tengas que preocuparte por formatear tu código.
Con más de 34 millones de instalaciones, podrías decir que es popular.
ESLint
ESLint es un linter configurable para ayudarte a encontrar y corregir problemas en tu código JavaScript. Puede usarse tanto para desarrollo frontend como backend, y es una excelente manera de detectar bugs antes de que sucedan. Puede verificar errores como variables no utilizadas, punto y coma faltantes, y más.
GitHub Copilot
GitHub Copilot es un programador de pares impulsado por IA que te ayuda a escribir mejor código, más rápido. Aunque esta es una herramienta de pago (actualmente $10/mes), puede ser un gran ahorro de tiempo para los desarrolladores.
INFO
Si eres un estudiante verificado, profesor, o mantenedor de un repositorio popular de código abierto en GitHub, puedes obtener Copilot gratis.
GitLens — Git supercharged
GitLens es una extensión de VSCode que, bueno, sobrecarga tus funciones de git. Te permite ver quién editó por última vez una línea de código, cuándo fue editada por última vez, y más.
Tailwind CSS IntelliSense
Tailwind CSS IntelliSense es una extensión que proporciona autocompletado inteligente, resaltado de sintaxis y linting para Tailwind CSS.
Si estás usando Tailwind CSS, querrás esta extensión al 100%.
TIP
Si no estás usando Tailwind CSS, deberías 😊
Auto Rename Tag
Auto Rename Tag es una extensión bastante simple, pero un gran ahorro de tiempo. Si cambias la apertura de una etiqueta HTML, automáticamente actualizará la etiqueta de cierre. Esto asegura que tus etiquetas siempre coincidan.
Color Highlight
Color Highlight es una extensión simple que resaltará los colores en tu código. Esto es genial para ver rápidamente a qué color está configurada una variable, o si estás usando el color correcto en tu CSS.
Auto Close Tag
Auto Close Tag es otra extensión simple que puede ahorrarte tiempo. Cerrará automáticamente las etiquetas HTML por ti. Así que cuando escribas <div>, automáticamente agregará el </div> para coincidir.
CSS Peek
CSS Peek es una gran extensión para desarrolladores frontend. Te permite ver rápidamente el CSS para un elemento HTML dado. Esto es genial cuando estás tratando de averiguar por qué un cierto elemento está estilizado de cierta manera.
Live Server
Live Server es una extensión de VSCode que te permite ejecutar un servidor local con recarga en vivo. Esto es genial cuando estás aprendiendo inicialmente desarrollo web con archivos básicos HTML, CSS y JS, ¡ya que actualizará tu vista previa en tiempo real!
INFO
Si estás usando un framework, lo más probable es que esta extensión sea innecesaria. Tu framework tendrá una característica similar incorporada para la recarga en vivo.
ES7+ React/Redux/React-Native snippets
ES7+ React/Redux/React-Native snippets es una colección de snippets para React, Redux y React Native. Si escribes código React, querrás esta extensión.
Better Comments
Better Comments mejora los comentarios de tu código. Proporciona resaltado de sintaxis para diferentes tipos de comentarios, como muestra la imagen de abajo.
Material Icon Theme
Material Icon Theme proporciona iconos para archivos y carpetas en VSCode. Esto hace que sea más fácil encontrar lo que estás buscando, y hace que tu ventana de código se vea más bonita.
Dracula Official
Dracula Official es un tema oscuro para VSCode. Es uno de los temas más populares en el marketplace, y mi tema favorito personal.
Si no te gusta este tema en particular, deberías elegir un tema diferente para instalar en VSCode, ya que pueden proporcionar soporte adicional para el resaltado de sintaxis.
Pretty TypeScript Errors
Pretty TypeScript Errors proporciona un mensaje de error más legible y proporciona un enlace a la documentación del error. Me he enamorado de esta extensión para el desarrollo de TypeScript.
Extensiones Bonus
Estas son algunas otras extensiones que encuentro útiles, pero no llegaron a la lista de primer nivel.
Astro
Astro es una extensión obvia si estás desarrollando usando Astro. Proporciona resaltado de sintaxis, snippets de código y más.
TIP
Astro es mi meta framework de elección para SSG y SSR, que te permite usar cualquier framework de UI que quieras dentro de él (React, Vue, Solid, etc). Lo recomiendo altamente.