Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Extensiones y personalización de VSCode

5/13
Recursos

Aportes 96

Preguntas 13

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Yo quiero dejarles algunas cuantas otras extensiones que me han resultado muy útiles:
.

  1. Auto Close Tag: Esta extensión escribirá automáticamente la etiqueta de cierre cuando tú escribas una etiqueta de apertura dentro de HTML.
  2. Ayu: Esta es una extensión que le agregará más temas a tu Visual Studio Code, recomiendo probarla, ya que tiene temas geniales.
  3. Bookmarks: Esta es una extensión que te servirá para cuando trabajes con archivos largos, te sirve para dejar una marca en tu código (como lo harías en un libro al poner un separador de página). De esta forma puedes irte a cualquier otra parte de tu código y cuando quieras regresar simplemente presionas la combinación de teclas necesaria y automáticamente te llevará a donde dejaste esa marca 😄.
  4. Bracket Pair Colorizer: Esta te servirá para cuando estés trabajando con lenguajes de programación, ya que te va a resaltar de diferentes colores los paréntesis y las llaves, de esa forma no tienes que estar buscando cuál es el paréntesis o llave de cierre por cada llave o paréntesis de apertura que tengas, simplemente te basas en los colores 😄
  5. html tag wrapper: Te sirve para que, cuando selecciones un bloque de código, simplemente presionas 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)
  6. IntelliSense for CSS class names in HTML: Esta extensión va a leer todos tus archivos de CSS y va a detectar todas tus clases para que, cuando estés escribiendo clases dentro de HTML, te haga sugerencias con base en las clases que tienes escritas en CSS, muy útil cuando empieces a usar frameworks como Bootstrap o Tailwind 😄.
  7. Project Manager: Esta es una de las mejores extensiones, en los cursos te van a enseñar a arrastrar la carpeta de tu proyecto a Visual Studio Code, pero con Project Manager tú puedes asociar varios proyectos a tu editor de ćódigo y simplemente seleccionas en cuál quieres trabajar, lo genial de esta extensión es que conserva las tabs que tenías abiertas por cada proyecto. Así puedes cambiar fácilmente entre proyectos y continuar en las tabs donde te quedaste 😄.

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.

📌 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

En esste link hay 10 extenciones que recomienda el Team Platzi

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.

Otras extensiones que he instalado gracias a cursos de Platzi son:

  1. Auto Rename Tag: Si editas el nombre de una etiqueta de HTML, automáticamente se modifica la etiqueta de cierre.
  2. Bracket Pair Colorizer: Resalta los pares de paréntesis o llaves con colores, lo que ayuda al momento de cerrarlos.
  3. Git Blame: Informa del status de git en los archivos y lineas de código

Y otras que instalé por necesidad personal:

  1. Quick and Simple Text Selection: Permite añadir atajos de teclado para seleccionar todo el texto que está entre comillas y agilizar el proceso de edición de código.
  2. vscode-pdf: Permite visualizar archivos pdf en Visual Studio Code.

Espero les sirvan para nunca parar de aprender!😉

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.!!

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

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 ?

¡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:

  1. abre los ajustes presionando el icono de de ajuste en la esquina inferior izquierda.
  2. Una vez en la pantalla de ajuste busca: > Guides Bracket Pairs

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

creo q le falto hablar del NetBeans que también trae server live o algo que es muy parecido

Clase 5 – Extensiones y personalización de VSCode


¿Qué extensiones deberíamos de instalar en Visual Studio Code?

  • Prettier.
  • Color Highlight.
  • Live Server.
  • Path Intellisense.
  • Auto Rename Tag.
  • Material Icon.

¿Para qué sirve Prettier?

  • Esa extensión la de un formato de indentación a nuestro código para que este sea más fácil de leer.

¿Es importante tener un código legible y por qué?

  • Sí, porque este código será leído por nosotros o otras personas en el futuro.

¿Para qué sirve Color Highlight?

  • Esta extensión nos permite agregar un borde a la línea de código que nos permita asignarle a algún elemento un color. El color del borde que tendrá la línea será del mismo que queramos asignarle a el elemento.

¿Cuál es la ventaja en el flujo de desarrollo cuando usamos Color Highlight?

  • Evitamos salirnos del contexto, es decir, evitamos estar saltando de programa en programa para ver los cambios que estamos realizando.

¿Para qué sirve Live Server?

  • Para que podamos ver en tiempo real los cambios que vayamos guardando de nuestro código en el navegador.

¿Para qué nos sirve Path Intellisense?

  • Esto nos permite autocompletar las rutas absolutas de los recursos que queramos agregar a nuestro proyecto.

¿Para qué sirve Auto Rename Tag?

  • En caso de que necesitemos cambiar una etiqueta por otra, esta extensión nos ayudara a cambiarlo en ambas parejas de etiquetas.

¿Para qué nos sirve Material Icon?

  • Nos permite agregarle un icono para diferenciar las carpetas y archivos dependiendo de lo que tengan dentro y sus extensiones.
Soy nuevo en este mundo y me parece super genial lo aprendido

Bookmarks: Esta es una extensión que te servirá para cuando trabajes con archivos largos, te sirve para dejar una marca en tu código. De esta forma puedes irte a cualquier otra parte de tu código y cuando quieras regresar simplemente presionas la combinación de teclas necesaria y automáticamente te llevará a donde dejaste esa marca.

Súper lista! Ya instalado todas las extensiones

Buenisimo!
Creo que vscode-icons me ayudara muchisimo a organizar mi codigo.

Excelente todas las extensiones me encanta “Icons for Visual Studio Code”

No me imagino el estrés en los tiempos de antaño… cuando escribían código en ¡blocs de notas!

Me encantas todas!!!

Creo que uno de los más útiles es el Prettier, ya que, hipotéticamente, hace que tenga más coherencia el código escrito.
Por otro lado el AutoRenameTag es un time-saver y hace un major improvement en el flujo de trabajo, al sincronizar los tags de HTML.

Visual Studio Code puede ser personalizado en muchos aspectos: el aspecto estético, los procesos de trabajo, las herramientas de desarrollo específicas, etc. En esta lección se comenta cómo están organizadas las opciones de personalización, que se encuentran separadas en siete categorías:

los Paquetes de idiomas permiten traducir el interfaz a muchos idiomas, entre ellos el español
los Temas de color permiten personalizar el color y color de fondo de todos los elementos del interfaz
las Áreas de trabajo contienen los archivos con los que trabaja VSC
las Extensiones permiten ampliar las funciones y herramientas disponibles
las Preferencias de configuración permiten especificar de forma detallada el comportamiento de las funciones y herramientas
las Tareas permiten conectar Visual Studio Code con otros programas instalados en el ordenador y automatizar operaciones
los Atajos de teclado permiten acceder fácilmente a las herramientas
La configuraciones recomendadas para cada uno de los cursos de mclibre se encuentran en los propios cursos:

Configuración recomendada para el curso Páginas web HTML y hojas de estilo CSS.
Configuración recomendada para el curso Introducción a la programación con Python.
Configuración recomendada para el curso Programación web en PHP.

Aparte de las mencionadas uso:

  1. indent rainbow para la indentación.
  2. **Flx seti monokai **que es un tema genial.
  3. Bracket pair colorizer para dar color a las llaves.
  4. Auto close tag para cierres automáticos de las etiquetas que abras.

TabNine también es uno de los paquetes que te ayudan a auto completar código en múltiples lenguajes

Les comparto que la extensión Bracket Pair Colorizer, que hacia que los pares de { } [ ] y ( ) tuvieran el mismo color. Fue agregado nativamente a VS Code y por lo tanto mucho más rapido!
Para activarlo solo presionas F1 o Ctrl + Shift + P para el comand palette y escribres “Open Settings JSON” y agregas :
“editor.bracketPairColorization.enabled”: true

(recuerda agregar una coma despues de la instrucción previa para que sea parte del JSON)

Muy recomendado!!

Si tienes un poco de experiencia te recomiendo: tabnine y Github Copilot, te ahorra mucho trabajo, y aunque a muchos opinan que no es bueno aprender con un ayudante así a mi me ha servido, sobre todo cuando estoy aprendiendo algo nuevo porque me da acceso a muchas soluciones y código de manera muy acertada y rápida. Hay que tener cuidado porque no es mágico y si no revisas el código que te sugiere puede causarte problemas.

Lo bueno de las extensiones es que puedes volver tan poderoso tu editor como quieras.
Yo tengo extensiones que me gustaría recomendar.

  • Polacode te permite sacar pantallas de tu código de una forma mucho mas bonita, hasta que la pruebes me entenderás.
    No eran tantas jeje pero 😄

Soy muy organizada por lo que el apoyo para organizar por tipo de programa me gusta mucho

Definitivamernte la mejor extensiòn es Auto Rename Tag porque nos quita la incomodidad de tener que cambiar los tags cada vez que los tengamos que cambiar.

VSCode tiene buenas extensiones

Excelente Clase!!! Realmente son una ayuda estas extensiones!!

<h4>Para tener en cuenta:</h4>

El plugin live server está desactualizado desde noviembre de 2018 según su repositorio en Github. Así que puede tener bugs o incompatibilidades con nuevas características de vs code.

Muy buenas extensiones 😄

No tenia en mi radar Auto Rename Tag. Agregada

Lejos material icon es la mejor!!! siempre vi estos icon lindos pero nunca supe cual era la extensión!

listo

Yo creo que el que mas voy a usar es live server porque me paree bastante útil quedarte en el código mientras estas cambiando o arreglando errores.
A veces siento que usar un prettier estándar se complica al trabajar con un equipo grande, alguna recomendación? Gracias de antemano 🙏🏼
Invertí en una mac, y he vuelto a revisar estas clases.
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!
Veo que todas son de gran ayuda al momento de programar, cada una destaca dentro de su roll para el flujo de trabajo de un programador y ,s pàra uno que esta empezando a prender a como avanzar en este viaje de retos y aprendizaje constantes. **Pero definitivamente mi favorita fue live server**, se vuelve muy tedioso estar actualizando a cada momento, por fortuna live server llega para salvarnos.
hola, les comparto un articulo sobre las mejores extensiones de VS <https://rafaelneto.dev/blog/15-mejores-extensiones-visual-studio-code-desarrollo-web/>
Genial el tema de las extensiones, para facilitar el flujo de trabajo.

Interesante la instalacion de las extensiones que se usan en nuestra mac. La que me impresiono fue la de “vscode-icons” y como son implementadas.

Extensiones

  • Prettier - Code formatter (Re-imprimir codigo con sus propias reglas - formato legible del codigo)
  • Color Highlight (Codigo en CSS para dar estilos, esta extension con el codigo hexadecimal resalta el color que escribi, ayuda en el cambio de contexto (ir al navegador y hacer recargo constante, vsc y chrome a la vez))
  • Live Server - Permite hacer simple y sencillamente los cambios en actualizaciones automaticar en el navegador
  • Path Intellisense - Ayuda a que cuando se referencia la referencia a una ruta de un archivo, permite que todo el camino quede perfecto, es un autocomplete
  • Auto Rename Tag - Sirve para automaticamente cambiarle el nombre a los tag de HTML que son pares
  • Material Icons - Cambia la vista de la carpeta por iconos

a mi parecer la extencion que evita, que cambies de contexto es la que mas me serviria, y la de live server

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

Súper recomendaciones, gracias Ricardo!

Puedes descargar el tema oficial de Platzi para VSC aqui

Mi Extensión favorita es Material Icon, no solo le da un aspecto bonito al editor sino también nos brinda una enorme ayuda a la hora de identificar las carpetas y archivos. Aaaa y tambien Path Intellisense me parece super útil.

no entiendo ni para preguntar. espero que más adelante, todo tome sentido.

hola necesito ayuda,no he podido encontrar extensiónes para abrir pretier

Es un paquete de extensiones fabulosas que todo desarrollador debe de tener.

Se ven geniales estas herramientas, para poder trabajar los códigos de manera más sencilla y eficiente. Muchas gracias!!!

**Me pareció interesante Prettier.
**es como un asistente para mejorar la forma de visualizar el código. mirando en youtube un poco más me ayuda a
agregar espacios en donde haga falta, ayuda a mejorar la sintaxis de código

Pair coloraizer fue mi salvación se le mucho mejor y te ayuda a identar mejor tu codigo

Ya tengo instaladas las extensiones sugeridas, para mí todo esto es un mundo nuevo.

¡Todo lo que nos ayude a trabajar más fácil y cómodo, bienvenido!

mi favorita hasta ahora es Prettier.

repasando el tema de extensiones. gracias por las sugerencias!

me estoy riendo como científico loco, me emociona el simple hecho de instalar las librerías no puedo esperar por empezar a programar

live server es TOP, imprescindible para desarrollo web.

las extensiones son de las cosas más ricas de VSC.

live server suena como la herramienta mas util, aunque en realidad no lo se

Adios sublimetext, hola visual studio code

Les comparto mi tema favorito de vs code

Instale todo al pie de la letra, hay muchísimas extensiones asi que a chismear y probar, alla vamos!

El solo hecho de ver el tipo de extensiones que existen da cuenta del carácter de la comunidad de desarrolladoras y desarrolladores que hay detrás, en el mundo del desarrollo de software, esto es lo más emocionante de hacer parte de esta comunidad: el sentido de crowdsourcing activo.

min 4:19 > Gracias!

A mi me quedo así.

Instaladas 😃

Material icooonnnn es mi favorita 😃

Hay un par de extensiones que son muy utiles a la hora de desarrollar, estas son:

Git GRaph: Este plugin nos muestra de una forma muy amigable todo el historial de commits y ramas de nuestros proyectos git y permite regresar a un comit y ademas poder ver comodamente el log de los commits sin tener que ir a github o gitlab

Code runner: Este plugin es muy util cuando estas programando ya sea en javascript, node, C, etc ya que nos agrega un boton de play para ejecutar el codigo escrito en un archivo o tambien si asi lo deseas puedes seleccionar un trozo de codigo y al darle boton secundario sobre el texto te permite ejecutar ese codigo y ver el resultado en la terminal del vs code

Color brackets: Esta herramienta le coloca colores a las llaves emparejandolas, de esta forma poderas saber muy facilmente donde abre y cierran las llaves del codigo que estás escribiendo

Project manager: Este plugin nos permite tener en un lugar centralizado todos los proyectos que vayas creando en vs code, su funcionamiento es muy sencillo, le indicas la carpeta donde tienes los proyectos y te agrega un tab nuevo donde podras ver los proyectos y al darle doble click sobre uno de ellos te carga ese proyecto en la ventana del editor

Muchas gracias! Las descargue todas. Yo les recomiendo Quokka: “Permite ver con anotaciones en el propio editor el resultado de la ejecución de las sentencias o bucles.”

Ayu: Esta es una extensión que le agregará más temas a tu Visual Studio Code, recomiendo probarla, ya que tiene temas geniales.

Resumen de clases:

Prettier: Refuerza un estilo consistente al pasar tu código, le dará un formato mucho más legible por defecto, ayudará para manejar en un futuro tu código.

Color Highlight: esta extensión hace que cuando escribas tu código hexadecimal en CSS, va a resaltar el código en el color que es.

Live Server: con esto ya no necesitas estar actualizando a cada momento el navegador, porque los cambios ya se actualizan automáticamente.

Path Intellisense: es un autocomplete de la ruta de donde traen los archivos.

Auto Rename: cambia los tag de HTML que son pares.

VSCode Icons Team: cambia la vista de las carpetas por ícenos que reflejan lo que contiene la carpeta, si trabajas un archivo de Java, coloca un icono de java, si es html, coloca el icono de html.

live server ❤️

Definitivamente todas las herramientas son fabulosas, antes intente trabajas CSS y HTML en windows, no tenia estas herramientas y veo que me vas a ser de una gran ayuda. Muchas gracias.

todas se ven interesantes, mirando comentario de compañeros y en las misma búsqueda hay un montón. Para divertirme. Gracias profe Ricardo

Les recomiendo mucho la extensión “Codesnap”, no hay nada más útil y elegante para presentar tu código a otras personas de una manera versátil.

Suponog que me servirá mucho VSCODE-ICONE porque soy muy visual y se me facilita identificar las acciones con el ícono.

Definitivamente Color Highlight es super útil y la que más me impresionó. Después de Live Server claro, pero eso lo veremos en otra clase.
Saludos!
EstanVolando!

Perfecto. Ya tenía varias instaladas 😃

HTML CSS Support
IntelliSense for CSS class names in HTML
Polacode — Polaroid for your code
Prettier ESLint
Rainbow Brackets
Tabnine
Visual Studio IntelliCode

Me gustaron todas las extensiones, facilitan mucho el trabajo programando

La última extensión que mencionas es “Material” sin embargo la que nos muestras y descargas es VSCode Icons Theme.

Gracias Ricardo por esta clase!

El tema de Drácula es genial

Les comparto un top de extensiones para VSCODE
https://blog.logrocket.com/top-10-vs-code-extensions-2021/

Les dejo acá un mini resumen de las extensiones:
|
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 por su genial estética retro.
|
Espero les haya servido;)