Carlos Eduardo Gomez García
Victor Andres Castillo Zambrano
Juan Christopher
¿Qué extensiones de Visual Studio Code son esenciales para el desarrollo web?
En el dinámico mundo del desarrollo web, contar con las herramientas adecuadas puede hacer toda la diferencia en tu productividad y eficiencia. Platzi ha seleccionado una serie de extensiones de Visual Studio Code (VSCode) que prometen transformar tu experiencia como desarrollador o desarrolladora, ya sea que recién estés empezando o que ya tengas algo de experiencia en esta área. A continuación, te presentamos estas extensiones que podrías considerar indispensables.
¿Cómo Prettier mejora la legibilidad del código?
Prettier es una poderosa herramienta que ayuda significativamente a mejorar la legibilidad del código. Al instalar esta extensión, se encargará de formatear automáticamente tu código siguiendo un estilo consistente predefinido. Este proceso de "autoformateo" garantiza que el código sea legible y uniforme, facilitando la colaboración tanto contigo mismo en el futuro como con otros miembros de tu equipo de trabajo.
¿Qué beneficios ofrece Color Highlight?
El desarrollo de estilos CSS para páginas web puede hacerse más visual y directo gracias a Color Highlight. Esta extensión destaca colores web y representa gráficamente los códigos hexadecimales con un cuadro del color que representan. Esto elimina la necesidad de estar revisando la página en un navegador para confirmar el color exacto, agilizando tu flujo de trabajo y mejorando la eficiencia.
¿Por qué usar Live Server?
Live Server es una de esas herramientas que revoluciona la forma en que visualizamos cambios en las páginas web mientras codificamos. En lugar de tener que ir manualmente al navegador y refrescar la página cada vez que realizas un cambio, esta extensión actualiza automáticamente la vista del navegador en cuanto guardas cambios en tu editor de código. Esto no solo ahorra tiempo, sino que también reduce errores al momento de observar los resultados de tus modificaciones.
¿Cómo optimizar el trabajo con rutas y etiquetas en HTML?
¿Qué hace Path Intelligence?
Trabajar con múltiples carpetas y archivos puede convertirse en un verdadero dolor de cabeza, especialmente cuando se refiere a la referencia correcta de rutas de archivos. Path Intelligence es una extensión que provee autocompletado para rutas de archivos, eliminando los errores y ahorrando tiempo al hacerlo de manera precisa y automática.
¿En qué ayuda Auto Rename Tag?
Para quienes trabajan con HTML y suelen lidiar con la asociación de etiquetas abiertas y cerradas, Auto Rename Tag podría ser tu salvador. Te permite cambiar el nombre de una etiqueta en HTML y automáticamente ajusta su pareja correspondiente. Esta funcionalidad garantiza que las actualizaciones sean consistentes y que el flujo de tu código sea más eficiente.
¿Qué aporta Material Icon a la visualización de archivos?
A veces, un cambio en la forma de presentar la información puede ser revolucionario. Material Icon transforma la vista de tus carpetas en VSCode mostrando íconos que representan el contenido de cada una. Si trabajas con tecnologías como Angular o Java, por ejemplo, te será mucho más sencillo identificar los tipos de archivos y áreas de trabajo de un vistazo rápido gracias a los íconos visuales.
¿Cómo integrar estas extensiones en tu flujo de trabajo?
Instalar y configurar estas extensiones en Visual Studio Code es un paso esencial para mejorar tu flujo de trabajo cotidiano como desarrollador o desarrolladora. Solo necesitas buscarlas por nombre en el Marketplace de extensiones de VSCode, instalarlas y configurarlas según las especificaciones que mejor se ajusten a tus necesidades. Te animamos a probarlas y descubrir cuál se convierte en tu herramienta favorita e indispensable.
Con estas herramientas, estás listo o lista para llevar tu experiencia de desarrollo en VSCode al siguiente nivel. Recuerda compartir tus descubrimientos y experiencias con estas extensiones en los comentarios, ¡nos encantaría conocer tu opinión!
Carlos Eduardo Gomez García
Victor Andres Castillo Zambrano
Juan Christopher
Michelearcangelo Salvatore Fontt Oliva
DARWIN JUAN CARLOS CATUNTA GARCIA
Luis Ángel Pérez Hernández
Usuario anónimo
UserCarlos Fernando Medina de la Cruz
Jose Angel Gonzalez Becerril
Orlando Jose Altamiranda Piñango
DARWIN JUAN CARLOS CATUNTA GARCIA
Ivan Acosta
Jimmy Buriticá Londoño
Matthias Ignacio Clein Espinoza
Mi Chu
Gerardo Auyón Pérez
Pablo Antipan Quiñenao
Leví Arista Sánchez
Victor Andres Castillo Zambrano
Efraín Hernández García
Joel Dominguez Merino
Martin DAVILA
Sergio Ruiz
Adrian Alexander Salgado
Diego Cucaresse
Jhean Pacheco
Victor Alvarado
July Vanessa Azen
Max Castillo
Juan Manuel Chagüendo Benavides
DARWIN JUAN CARLOS CATUNTA GARCIA
Juan Sebastian Rojas Carrillo
Gustavo Urzúa López
Joel Dominguez Merino
carlos quintero
Luis Lopez
Yo quiero dejarles algunas cuantas otras extensiones que me han resultado muy útiles: .
cmd + i y automáticamente encerrará todo ese código en una etiqueta nueva (cuando serpas de HTML sabrás a lo que me refiero)gracias
Buen aporte. Crack.
Hola gente, les dejo un mini resumen de las extensiones de esta clase, espero les sirva;) | Prettier - Code formater Mejora la forma en que se visualiza el código (agrega espacios en donde haga falta, ayuda a reacomodar el codigo, etc). | Color Highlight Agregar un recuadro alrededor del código hexadecimal en CSS el cual muestra el color del mismo (previsualizacion). | Live Server Actualiza automáticamente en el navegador los cambios guardados. | Path Intellisense Autocompleta las rutas (esos significa 'path' en informática)... | Auto Rename Tag Si haces un cambio en alguna pareja de tags, esta extensión autompleta los cambios en el otro tag por ti. | Material Icon Theme Agrega íconos a los archivos según su extensión, lo cual lo hace más visual. | SynthWave '84 Este es un tema que recomiendo mucho por su estética retro.
Se agradece por el aporte !! 👍
Muchas gracias :)
📌 Lo primero que realizo en un editor de código o IDE es instalar un tema de personalización, como Drácula. Para tener un entorno de desarrollo más a gusto. https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula
yo también soy darks
En esste link hay 10 extenciones que recomienda el Team Platzi
Gracias.. Hay varias que no nombraron aquí. Aunque algunas muy avanzadas para novatos como yo.. XD
Grande @gndx
Muchas gracias por el dato !! 👍
Algunas extensiones complementarias y que utilizo en mi día a día:
**- CodeSnap: ** Screenshot al código. Esencial para cuando se quiere usar un screenshot para una presentación o documentación. **- Git Graph : ** Se visualiza el historial y gráficas de cambio en el repositorio de GIt **- Markdown Preview Enhanced : ** Esencial para documentación en formato MarkDown **- Code Runner: ** Ejecutar C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, - Monokai Pro: Varios themes desde una sola extensión.
Bien por el aporte, voy a probar un par.
Otras extensiones que he instalado gracias a cursos de Platzi son:
Y otras que instalé por necesidad personal:
Espero les sirvan para nunca parar de aprender!😉
Bracket pair ya viene instalada de manera nativa en VSC 🥳🥳 ya no es necesario descargarla :3
Les recomiendo también esta extensión, te muestra un logotipo de la tecnología en la que estes trabajando, ya se HTML, CSS, JS etc.!!
Que cool Gerardo! Gracias por el aporte!
Aparte de las extensiones que ya han comentado por aquí, éstas también les podrían servir:
Turbo Console Log
Esta extensión te permite que seleccionando tu variable y con un solo atajo de teclado, generes un línea de console.log con un mensaje significativo y más entendible a la hora de debuggear o examinar tus variables.
Trailing Spaces Con esta extensión se resaltarán todos los espacios de más que se te pueden ir al final de una línea. Aunque también puedes habilitar esta funcionalidad directamente en las configuraciones de VSCode.
Project Dashboard Te permite organizar tus proyectos por grupos en un dashboard visualmente simple y personalizable.
Todo Tree Que filtra todos los comentarios que comiencen con TODO o con FIXME y los muestra en una vista de árbol, desde el que puedes acceder fácilmente a visualizar donde están tus pendientes.
Better Comments Pinta de distintos colores tus comentarios según su tipo de acuerdo a como hayas empezado tu comentario, los categoriza en alertas, queries, TODO's, importantes y puedes personalizar estas categorías o sus colores.
CSS Peek Para que puedas echar un vistazo a los estilos CSS de cada clase, id o etiqueta HTML.
Polacode Que genera bonitas screenshots de tu código.
Si estas aprendiendo Javascript te recomiendo code runner, este te permite verificar porciones de codigo que selecciones sin tener que ir al navegador
Si, un plugin súper recomendado.
Adicionalmente yo recomendaría instalar un Tema. Hay demasiados y cada uno con un toque personalizado. Te recomiendo que busques el que mas te haga sentir a gusto con el editor. Sobretodo para trabajar de forma más feliz. Yo el que estoy usando es: 2077 Theme Los colores son muy hermosos conforme a mis gustos. Pero recuerda no cazarte con un tema y probar diferentes hasta que encuentres un match perfecto con alguno ^^
Existe algun maximo o minimo de extensiones que debes tener ? VSCode se vulve mas lento entre mas extensiones ?
Creo que eso depende de tu pc y de las extensiones que tu utilices para volver mas comodo tu flujo de trabajo.
En mi caso la extensión que tarda en cargar más es live server las demás no deben ser más rápidas
¡CUIDADO! Me llamó la atención la relativamente baja calificación de la extensión Auto Rename Tag para ser una extensión tan descargada. Ha muchas menciones de usuarios que dicen que rompe la cadena de "rehacer" y "deshacer" (undo/redo). Aunque el desarrollador menciona que una actualización del 2017 resuelve el problema, desde el 2019 hay menciones de que este problema no está resuelto.
Las funcionalidades de varias extensiones ya las tiene incluidas el propio VS Code como Auto Close Tag o Color Highlight, basta con activarlas en las configuraciones del usuario.
Para colorea las guías de indentación en tu VSCode sin necesidad de instalar plugin adicional solo haz lo siguiente:
Material Icon them es mi favorita
No tengo Mac, pero estoy tomando el curso para aprender más, el curso de prework de windows estuvo muy bueno, acá sin embargo esta mas pulido y directo
Excelente, muchas gracias por el resumen !! 👍
creo q le falto hablar del NetBeans que también trae server live o algo que es muy parecido
Tengo entendido que NetBeans es un IDE y no un editor de texto como lo es VSC, hasta donde tengo entendido, si no es así que alguien me corrija. Saludos.
Si, Netbeans es un IDE. Yo lo he usado solo para Java. Pero recomendaría darle una oportunidad a Visual Code. Las extensiones son un plus frente a cualquier IDE o editor de texto.
Relaciono las extensiones que yo uso, agrupadas por la tecnología o el lenguaje de programación con el que considero son más útiles:
JavaScript/React/Redux/GraphQL/Node.js: Prettier - Code formatter Path Intellisense ES7+ React/Redux/GraphQL/React-Native snippets ESLint JavaScript (ES6) Code Snippets Import Cost
Python: Python Pylance iSort Jupyter Jupyter Cell Tags Jupyter Keymap Jupyter Notebook Renderers Jupyter Slide Show
PHP/Laravel: PHP CS Fixer PHP Debug PHP Intelephense Laravel Blade Snippets Laravel Goto View Laravel Blade
HTML/CSS: Live Server Auto Rename Tag HTML Tag Wrapper IntelliSense for CSS Class Names in HTML Auto Close Tag Color Highlight
Java: Tabnine AI Autocomplete for Java
MongoDB: MongoDB for VS Code
Git/Version Control: Git Graph GitLens Git Blame
General (útiles para cualquier lenguaje o tecnología): Material Icon Theme Bracket Pair Colorizer Bookmarks JSON Paste JSON as Code SonarLint TODO Highlight TODO Tree Project Manager Indent-rainbow Trailing Spaces WakaTime Settings Sync
Hola!
Yo les quiero compartir algunas otras para complementar:
1- css-auto-prefix
2- HTML Format
3- Image preview
4- Live Sass Compiler
5- WakaTime
Saludos!