Extensiones y personalización de Visual Studio Code

Clase 6 de 18 • Curso de Prework: Configuración de Entorno de Desarrollo en Windows

Santiago Lopera Naranjo

student•

Les recomiendo la extensión Bracket Pair Colorizer, esta les pinta los brakets que abren y cierran funciones, así, pueden darse cuenta si les falta algo por cerrar.

Cesar Mora

student•

Increible aporte, muchisimas gracias

Pedro Moreno

student•

Gracias! Justo estaba buscando algo parecido

Jonathan Carrasco

student•

Les dejo unos atajos de teclado para VS Code, que seguro les resultarán muy utiles 😄

Juan Christopher

student•

Buen aporte.

Eduardo Zambrano

student•

Muchas gracias compañero :)

Alejandro Picado Brenes

student•

Lista de extensiones recomendadas:

Prettier: Mejora como se visualiza el código y ayuda a que sea más legible
Color Highlight :Muestra los colores en .css para verlos.
Live Server : Recarga de forma automática el navegador con los cambios que realicemos.
Path Intellisense: Autocompleta rutas de archivos
Auto Rename Tag: Permite actualizar al mismo tiempo una pareja de tags de html
Material Icon Theme: Muestra iconos para identificar más fácil los tipos de archivo

Ignacio Crespo

student•

Gracias por pasar la lista!

Alejandro Picado Brenes

student•

Con mucho gusto Ignacio, espero le ayuden

Arnold Stuwar Pedraza Marin

student•

Nicolás Mellado

student•

¡Muchas gracias! Yo en lo personal suelo entender mucho más con ejemplos gráficos como estos jaja

Felipe Molano Corredor

student•

Muy buena analogia para aprender la relacion entre los tres gracias

Héctor Alonso Padilla Ramírez

student•

Adicional a las que mencionó Celis: Color Picker

CSS Flexbox Cheatsheet

CSS Grid Snippets

CSS to MDN

Git Cheatsheet

Git Graph

Polacode

TODO Highlight

Marcos Avila Rodriguez

student•

Gracias por las recomendaciones

Victor Manuel Franco Cañon

student•

Excelente aporte!!!

Ezequiel Maximiliano Silvestre

student•

Les recomiendo mucho usar una extensión de VS Code que se llama Settings Sync. Esta sirve para guardar de forma automática su configuración de VS Code en su cuenta de github, de esta forma pueden usar VS Code en diferentes computadoras sin tener que preocuparse de tener que actualizar su configuración en cada pc

Juan Miguel

student•

buen aporte, gracias

Andres Velasquez

student•

Lo intente pero pide que un usuario tenga acceso a mi cuenta de Github y me parecio sospechoso.

Juan Carlos Hernández

student•

1.25 velocidad perfecta

Daniela Beltran

student•

Total!

Rolando Mamani Salas

student•

Hay que probarla jeje

Jhaider Jordan

student•

me gusta tener todo bien bonito así me da ganas de codear
![](

Alejandro Picado Brenes

student•

Nice!!! se ve muy tuanis!!

Jhaider Jordan

student•

@pikdo bueno si te gusta el color lo puedes instalar en tu visual estudio code https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode

Andres Felipe

student•

Yo estaba casado con Sublime Text, pero conocí a VSCode y la verdad por una cuestión técnica es el mejor editor y para el futuro de los desarrolladores es más cómodo, pero a veces regreso a sublime text, es como cuando terminas con ex porque solo es bonita y nada más, y conoces a alguien que tiene estudio, buena familia, te invita el helado, te rasca la espalda y se ve que juntos se puede comprar algo, pero tu siempre Ex estará buena y pecaras. (ojala que no).

Diego Rubio

student•

gracias! por tu opinion

Andres Felipe

student•

jejejjee bueno, por ahora lo interesante es literal nose porque sublime text me encanta tanto debe ser que por su simpleza para programar, pero hay que ser sinceros VScode te facilita la vida, y eso lo que debemos buscar los desarrolladores, facilitarnos la vida.

Juan Esteban Galvis

student•

Comparto las extensiones que más uso y que recomiendo:

Bookmarks : Te permite dejar como separadores en tu código, por ejemplo para encontrar un código que dejaste para después más fácilmente (Crea una pestaña con todos los separadores que pusiste)
Code Runner : Ejecutar directamente en la consola de VSC un código, Principalmente para JavaScript
** Elm Emmet ** : Te ayuda a escribir código HTML 1000 veces más rápido en una sola línea
** Google Fonts ** : Te permite importar fuentes directamente desde el navegador (Sea por link para HTML o import para CSS)
** WakaTime ** : Te permite obtener métricas de tu tiempo programando como: Porcentaje de lenguajes que más usaste en la semana, tiempo que estuviste programando, dispositivos, etc.

Javi Felices

student•

¿Qué aporta Elm Emmet al Emmet que trae de serie el VSCode? Gracias.

Celeste Yamile

student•

Gracias.

Carlos Mazzaroli

student•

Jamás me faltara esta extensión en ningún entorno de trabajo nucna

Fernando Campos

student•

Jaja ¡qué cool!

Uriel Moran Dorantes

student•

soy indigno de estar en su presencia.

Hernán Quillay Cevallos

student•

Otra extensión que les recomiendo es: Settings Sync Permite hacer un backup de nuestras extensiones instaladas y poder restaurar nuestra configuración en cualquier momento sin necesidad de volver a instalar una x una.

Además platzi tiene un blog de como poder configurar la extensión, aquí: https://platzi.com/tutoriales/1650-prework/4407-vs-code-extensions-backup/

Maria Belen Vicente Sanchez

student•

muchas gracias por compartir!!

Jean Paul Luna Flores

student•

Es mucho mejor la sincronización que trae VSCode de forma nativa, necesitarás para eso una cuenta de GitHub o Microsoft.

Guillermo Díaz

student•

Yo uso el theme Dracula Official

Diego Rubio

student•

se ve genial!

Karla

student•

Yo también, es mi favorito

Miguel Lopez Chan

student•

Yo vengo de haber tomado cursos de programación en diferentes lugares y nunca te enseñan a instalar todas estas valiosísimas extensiones que serán de gran ayuda. Gracias Platzi!

Hernán Josué Hernández Lamprea

student•

Apoyo tu comentario. Algo muy útil que uno puede aprender de los docentes y compañeros de estudio, son todos esos tips y trucos del oficio. Lamentablemente no se ve en todos lado, pero Platzi lo entiende y estoy muy agradecido con ellos.

Andres Condezo Monge

student•

Unas buenas extensiones para VS Code son:
.

**- Bracket Pair Colorized 2**
Una extensión para colorear en pares los corchetes.
.


**- Highlight Matching Tag**
Destaca a juego las etiquetas de cierre y apertura.
.


**- Horizon Theme**
Un tema cálido para Visual Studio Code.
.


**- Kimbie Dark+**
El tema Kimbie Dark mejorado.
.


**- Vim**
Emulación de Vim para Visual Studio Code.
.


**- CSS Flexbox Cheatsheet**
Abre una hoja de referencia de flexbox directamente en VS Code.
.


**- CSS Navigation**
Permite ir a la definición de HTML a CSS.
.


**- Git Graph**
Abre una pestaña donde permite ver un gráfico de Git de su repositorio y realizar acciones de Git desde el gráfico.
.


**- HTML to CSS completion suggestions**
Proporciona sugerencias de finalización para clases e identificadores, desde documentos de marcado hasta hojas de estilo.
.


**- HTMLHint**
Integración de VS Code para HTMLHint: una herramienta de análisis de código estático para HTML.
.


**- Image preview**
Muestra la vista previa de la imagen en el margen y al pasar el mouse por encima.
.


**- Indent-rainbow**
Facilita la lectura de la identación del código.

Stalin Badillo

student•

Muchas gracias :)

Ariel Ezequiel Biazzo Genua

student•

hola! este es un pequeño resumen que hice!

Porfirio González López

student•

¿En que idioma escribes tus apuntes?

Nestor David Velasquez Lopez

student•

Dos extensiones que también serán de muchísima utilidad serían GitLens y indent-rainbown. El primero les dará todas las herramientas de git para tener un mejor orden y llevar mejor el flujo de desarrollo, y el segundo es para orientarnos en las indentaciones y no confundirnos al indentar u ordenar nuestro código... Espero les sea de utilidad

Joel Dominguez Merino

student•

Muchas Gracias! Tomo la de Indent-rainbow Sera cuestión de acostumbrarse a las barritas de colores pero la verdad si me es muy útil saber donde cierra una llave :D

Hernán Josué Hernández Lamprea

student•

Se ven geniales ambas extenciones. Gracias

Raúl Adolfo Sánchez Rodríguez

student•

Comparto el resumen de la clase en PPT:

Slide 1:

Slide 2:

Slide 3:

Slide 4:

Slide 5:

Cristian Javier Arias Arismendy

student•

Que aporte! Mil gracias

Brandon Díaz

student•

Les recomiendo Git Graph. Ahorita no hemos visto mucho sobre Git, pero esta extension les servirá en un futuro.

Joel Dominguez Merino

student•

Yo cuando instale Prettier no me estructuraba el código despues de guardar el archivo y no sabia por que D: Vi este video y pude solucionarlo.
Se los dejo por si a alguien le pasa lo mismo!

Diorena Cristina Orea Gonzalez

student•

MUCHAS GRACIAS! Tengo mucho tiempo con esta duda

Unas buenas extensiones para VS Code son:
.

**- Bracket Pair Colorized 2**
Una extensión para colorear en pares los corchetes.
.


**- Highlight Matching Tag**
Destaca a juego las etiquetas de cierre y apertura.
.


**- Horizon Theme**
Un tema cálido para Visual Studio Code.
.


**- Kimbie Dark+**
El tema Kimbie Dark mejorado.
.


**- Vim**
Emulación de Vim para Visual Studio Code.
.


**- CSS Flexbox Cheatsheet**
Abre una hoja de referencia de flexbox directamente en VS Code.
.


**- CSS Navigation**
Permite ir a la definición de HTML a CSS.
.


**- Git Graph**
Abre una pestaña donde permite ver un gráfico de Git de su repositorio y realizar acciones de Git desde el gráfico.
.


**- HTML to CSS completion suggestions**
Proporciona sugerencias de finalización para clases e identificadores, desde documentos de marcado hasta hojas de estilo.
.


**- HTMLHint**
Integración de VS Code para HTMLHint: una herramienta de análisis de código estático para HTML.
.


**- Image preview**
Muestra la vista previa de la imagen en el margen y al pasar el mouse por encima.
.


**- Indent-rainbow**
Facilita la lectura de la identación del código.

Extensiones y personalización de Visual Studio Code

Herramientas para la web

¡Tenemos una nueva versión de este curso!

Qué es un navegador web

Qué aprenderás para configurar tu entorno de desarrollo en Windows

Instalando Firefox, Chrome y usando sus DevTools

Editor de texto

Editor de texto: instalando el tuyo

Extensiones y personalización de Visual Studio Code

Cómo usar Live Server en proyectos reales de HTML y CSS

Linux dentro de Windows

¿Qué es Windows Subsystem for Linux?

Instalación de Windows Subsystem for Linux

Configuración de Ubuntu en WSL

Instalación de VirtualBox

Instalando Ubuntu en una máquina virtual

Comandos básicos de la terminal e instalación de Node.js

Cómo configurar tu primer proyecto en React.js

Git y Github

Instalando Git

Vinculando nuestra llave SSH en Github

Subiendo nuestro primer repositorio

¿Qué es lo que sigue?