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 69

Preguntas 11

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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.

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

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

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 ?

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.

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.

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

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

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

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

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

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.

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.

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

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.

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;)