No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Extensiones de VSCode

5/17
Recursos

Aportes 59

Preguntas 11

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Les recomiendo probar estas extenciones鈿
.
Auto Rename Tag
Facilita el trabajo de renombrar etiquetas
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

.
Discord Presence
Compartir que estas codeando en Discord


https://marketplace.visualstudio.com/items?itemName=icrawl.discord-vscode
.
Code Runner
Correr codigo dentro de Visual Studio

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
.
indent-rainbow
Te resalta en colores los saltos de linea
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow


.
Color Highlight
Te resalta los colores que uses
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

.
Trailing Spaces
Te resalta los espacios vacios en rojo
https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

Extensiones recomendadas a instalar en VSC:

  • Live Server
  • Highlight Matching Tag
  • ESlint
  • CSS Peek
  • Code Spell Checker
  • WSL
  • Node Require
  • Material Icon Theme

Otras Recomendadas

  • Color Highlight
  • Auto Rename Tag

Para abrir la terminal de configuraciones me sirvi贸 tambi茅n F1

Plug-in

  • Live Server

    • Cuando haces cambios en un archivo, estos cambios se ver谩n reflejados el navegador, pero hasta que lo recargues. Este plug-in te ahorra ese trabajo haci茅ndolo autom谩ticamente.
  • Highlight Matching Tag

    • Resalta las etiquetas pares, te resalta donde empieza una etiqueta y donde termina.
  • Eslint

    • Revisa tu c贸digo est谩ticamente (o sea que no ejecuta el c贸digo) en busca de errores
  • CSS Peek

    • Te permite hacer un Peekin (una observaci贸n o mirar r谩pidamente los estilos que tenemos desde las etiquetas)
  • Code Spell Checker

    • Muchos no somos de habla inglesa por lo que ser铆a bueno tener un corrector de ortograf铆a del ingl茅s.
    • Algo genial es que tiene varios paquetes de idiomas.
  • WSL

    • La extensi贸n oficial que nos permite abrir cualquier folder en el WSL (Windows Subsystem For Linux) y permite usar VSC para construir aplicaciones de Linux sencillamente corriendo la Terminal de WSL.

                                **No te adelantes, lo instalaremos pronto.**
      
  • Node Require

    • Nos muestra autom谩ticamente que m贸dulos de Node.js nos hacen falta.
  • Material Icon Theme

    • Te agrega iconos para cada uno de los diferentes archivos. Est茅tico y sobre todo 煤til cuando manejas montones de archivos

Esto se tiene que activar, usa:

**Ctrl + Shift + P**

Nos habr茅 una tipo de Terminal para configuraciones, velo como un cuadro de texto donde le dar谩s instrucciones a VSC y el va a encargarse de ejecutarlo.

Escribe Material Icon Theme y escoge la opci贸n de Activado

Plug-in Recomendados

  • PRETTI
    • Nos ayuda en la visualizaci贸n de nuestro c贸digo, agregando espacios donde haga falta, reacomodando el c贸digo en la forma m谩s legible posible.
    • Muy bueno para todo lo que tiene que ver con Desarrollo Web e incluso algunas librer铆as como Vue.js y Angular
  • Highlight
    • Con CSS puedes asignar colores mediante unos c贸digos de n煤meros, este plug-in te muestra el color que asignas.
  • Path Intellisense
    • Tendr谩s que vincular unos archivos con otro. Y para hacerlo requieres escribir la ruta de direcci贸n de los archivos este plug-in autocompleta.
      • Autocompleta rutas de archivos
  • Auto Rename Tag
    • En HTML se usan etiquetas y siempre van en pareja. Este plug-in hace que lo que modifiques en una se modifique en la otra tambi茅n.

馃獎 Clase # 5: Extensiones de VSCode 5/17 馃獎


Extensiones y personalizaci贸n de Visual Studio Code 馃拠鈥嶁檧

驴Cu谩l es el atajo de teclado para abrir el men煤 de extensiones en VSC? 鈱


CRTL + Shift + I

驴Cu谩l es el atajo de teclado para guardar un archivo en VSC? 鈱


CRTL + S

驴C贸mo realizar una b煤squeda de palabras en VSC? 馃攳


VSC puede usar el mismo comando para buscar, con Ctrl + F te habilita la b煤squeda.

Adem谩s hay algunos plug-ins para realizar b煤squedas m谩s avanzadas.

驴C贸mo llamamos a nuestro primer archivo HTML? 馃攷


index.html

驴Desde d贸nde deber铆amos crear un proyecto web? 馃摬


鈥 Desde nuestro editor de c贸digo.

驴Por qu茅 debemos crear un proyecto web desde el editor de c贸digo y no desde Windows? 鉂斺潛


鈥 Porque si nuestro Windows no est谩 configurado para mostrar las extensiones de los archivos, estos aparecer谩n con una extensi贸n .txt y deberemos renombrarlos.

Extensiones de VSC 馃О

<h5>Listado de temas para que personalicen el VSCode 馃搫</h5>


鈥 Entrar a enlace

<h5>Extensi贸n Auto Rename Tag</h5>


鈥 Esta extensi贸n nos ayuda a renombrar la pareja de una etiqueta cuando estemos cambiando estemos cambiando el nombre de una de las parejas.

<h5>Extensi贸n Better Comments</h5>


鈥 Pinta de distintos colores tus comentarios seg煤n su tipo de acuerdo a como hayas empezado tu comentario, los categoriza en alertas, queries, TODO鈥檚, importantes y puedes personalizar estas categor铆as o sus colores.

<h5>Extensi贸n Bracket Pair Colorizer</h5>


鈥 脡sta les pinta los brakets que abren y cierran funciones, as铆, pueden darse cuenta si les falta algo por cerrar.

<h5>Extensi贸n Code Spell Checker</h5>


鈥 Es una herramienta que sirve como corrector ortogr谩fico del c贸digo fuente.

<h5>Extensi贸n Color Highlight</h5>


鈥 Esta extensi贸n nos ayudara a detectar los coleres que vayamos implementando en nuestro sitio web. Esto lo hace dibujando un recuadro al c贸digo hexadecimal del mismo color que especificamos. Muestra los colores en .css para verlos.

<h5>Extensi贸n Color Picker</h5>


鈥 Genera c贸digos de color como notaciones de color CSS.

<h5>Extensi贸n CSS Flexbox Cheatsheet</h5>


鈥 Permite ver en una hoja los tipos de flexbox y las posiciones que puede tomar.

<h5>Extensi贸n CSS Grid Snippets</h5>


鈥 Trae un conjunto de atajos para configurar el Grid:
鈼 dg 鈥 display grid
鈼 dig 鈥 display inline-grid
鈼 gg 鈥 grid gap
鈼 gtc 鈥 grid-template-columns
鈼 gta 鈥 grid-template-areas

<h5>Extensi贸n CSS Peek</h5>


鈥 Para que puedas echar un vistazo a los estilos CSS de cada clase, id o etiqueta HTML.

<h5>Extensi贸n ESLint</h5>


Sirve para filtrar c贸digo TypeScript o JavaScript con el objetivo de escribir un c贸digo m谩s 贸ptimo y limpio.

<h5>Extensi贸n GitLens</h5>


鈥 Les dar谩 todas las herramientas de git para tener un mejor orden y llevar mejor el flujo de desarrollo.

<h5>Extensi贸n Highlight Matching Tag</h5>


Resalta las etiquetas de apertura y/o cierre. Opcionalmente, tambi茅n muestra la ruta a la etiqueta en la barra de estado.

<h5>Extensi贸n Icon Material Theme</h5>


鈥 Nos permite agregar un icono distintivo a los archivos para poder identificarnos.

<h5>Extensi贸n Indent-rainbown</h5>


鈥 Es para orientarnos en las indentaciones y no confundirnos al indentar u ordenar nuestro c贸digo.

<h5>Extensi贸n Live Server</h5>


鈥 Esta extensi贸n nos ayudara a actualizar autom谩ticamente la p谩gina en donde estamos viendo c贸mo va quedando nuestro sitio web. Esto lo hacemos con el fin de no refrescar la p谩gina cada vez que hagamos un cambio en el c贸digo de manera manual.

<h5>Extensi贸n Material Icon Theme</h5>


鈥 Nos permite cambiar el estilo de algunos 铆conos de acuerdo con el tipo de archivo. Para activarlo, presionamos las tecla Ctrl + Shift + p y al salir el cuadro ingresamos: Material Icon Theme, al seeccionarlo se activa la extensi贸n.

<h5>Extensi贸n Node Require</h5>


鈥 Nos indica autom谩ticamente qu茅 m贸dulos de nodejs nos hace falta y tener menor errores posibles por no instalar o importar los paquetes necesarios.

<h5>Extensi贸n Path Intellisense</h5>


鈥 Esta extensi贸n nos ayudara a autocompletar las rutas de los archivos que necesitemos en nuestro sitio web.

<h5>Extensi贸n Polacode</h5>


Que genera bonitas screenshots de tu c贸digo.

<h5>Extensi贸n Prettier</h5>


鈥 Nos ayuda a identar nuestro c贸digo para que sea m谩s legible. Mejora como se visualiza el c贸digo y ayuda a que sea m谩s legible.

<h5>Extensi贸n Project Dashboard</h5>


鈥 Te permite organizar tus proyectos por grupos en un dashboard visualmente simple y personalizable.

<h5>Extensi贸n Settings Sync</h5>


鈥 脡sta sirve para guardar de forma autom谩tica su configuraci贸n de VSC en su cuenta de github, de esta forma pueden usar VSC en diferentes computadoras sin tener que preocuparse de tener que actualizar su configuraci贸n en cada pc.

<h5>Extensi贸n Todo Tree</h5>


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

<h5>Extensi贸n Trailing Spaces</h5>


鈥 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 VSC.

<h5>Extensi贸n Turbo Console Log</h5>


鈥 脡sta 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.

<h5>Extensi贸n WSL</h5>


鈥 Le permite usar el Subsistema de Windows para Linux (WSL) como su entorno de desarrollo de tiempo completo directamente desde VSC.

<h5>Listado de extensiones para PHP</h5>


鈥 Laravel Extension Pack
鈥 Laravel Blade Snippets
鈥 Laravel 5 Snippets
鈥 PHP Itellisense
鈥 PHP Formatter
鈥 PHP IntelliSense -> completa los path de los use
鈥 PHP PHP Intelephense -> completa los path de los use
鈥 Vetur -> Para ver las plantillas .VUE
鈥 Beautify Blade

<h5>Listado para Agilidad al codificar</h5>


鈥 AutoFileName
鈥 FileNameComplete
鈥 Auto Close Tag
鈥 Auto Rename Tag
鈥 seti-icons y vscode-icons
鈥 Duplicate selection or line
鈥 Git Graph
鈥 Material Icon Theme
鈥 Color Highlight
鈥 Bracket Pair Colorizer
鈥 Tailwind CSS IntelliSense
鈥 shell-format
鈥 HTML Snippets
鈥 Salesforce Docum -> SFDoc -> Para documentar tu codigo
鈥 CODESNAP -> Tomar Fotos de tu codigo
鈥 Live Server

<h5>Listado Para JS</h5>


鈥 indent-rainbow
鈥 Color Highlight -
鈥 Path Intellisense -
鈥 Auto Rename Tag -
鈥 Material Icon Theme -
鈥 Prettier - Code formatter -
鈥 vscode-icons -
鈥 Bracket Pair Colorizer
鈥 Babel
鈥 npm intellinsense
鈥 typeScript import
鈥 Simple React Snippets

驴C贸mo usar Live Server en proyectos reales de HTML y CSS? 馃帴

Los pasos son: 馃摑


鈥 Creamos una carpeta para nuestro proyecto.
鈥 Damos clic derecho y abrimos Visual Studio Code.
鈥 En caso no poder hacer el paso anterior, esto se configura durante al instalaci贸n, entonces abrimos VSC y arrastramos nuestra carpeta al editor.
鈥 Desde el VSC creamos los archivos index.html ( se nombra de esta forma al primer archivo html del proyecto) y un archivo basic.css.
鈥 Si lo creas desde la carpeta en Windows se va a crear con la extensi贸n de archivo .txt (pues lo estamos creando como un archivo de block de notas, de texto plano).
鈥 De no haber instalado la extensi贸n Live Server, se instala presionando las teclas Ctrl + Shift + x y luego buscarla. Luego instalar y esperar.
鈥 Una vez instalada, buscamos Go Live en la esquina inferior derecha.
鈥 Permitimos el acceso de salir alg煤n cuadro.
鈥 Se abrir谩 una pesta帽a en nuestro navegador con nuestro sitio.
鈥 Si hacemos un cambio en el c贸digo y guardamos nuestro sitio se va a recargar solo sin necesidad de abrir de nuevo el navegador.

Lo mas principal para mantener tus configuraciones en cualquier m谩quina es sincronizar tus settings de VSCode a tu cuenta de Github, en el 铆cono de engrane de la parte inferior derecha seleccionan Settings Sync On

馃毃馃毃馃毃馃毃馃毃馃毃
Ahora con la nueva update, les recomiendo enormemente el usar profiles en visual studio code, el cual permite tener distintos 鈥渨orkspaces鈥 con extensiones independientes en cada una.
馃毃馃毃馃毃馃毃馃毃馃毃
Por ejemplo:

Tenemos un perfil con solo extensiones para python y podriamos tener otro completamente con extensiones para javascript.

NOTA: al usar las extensiones que solo necesitas, reduce los recursos y el tiempo de arranque de vscode

Mas informaci贸n

Para tener un bonito tema en Visual, se llama: Night Owl

Live Share - Permite la colaboraci贸n en tiempo real en el mismo proyecto o archivo, ideal para trabajo en equipo o para dar soporte t茅cnico.

GitLens - Proporciona informaci贸n 煤til sobre el historial de cambios de un archivo, incluyendo qui茅n lo cambi贸 y cu谩ndo.

Bracket Pair Colorizer - Ayuda a visualizar f谩cilmente los pares de par茅ntesis, corchetes y llaves, lo que facilita la lectura del c贸digo.

Code Spell Checker - Revisa la ortograf铆a del c贸digo y muestra errores en palabras mal escritas.

Prettier - Ayuda a mantener el c贸digo bien formateado y consistente.

ESLint - Analiza el c贸digo para detectar errores y sugerencias de mejora seg煤n las reglas de ESLint.

Auto Close Tag - Cierra autom谩ticamente las etiquetas HTML o XML mientras se escribe.

Path Intellisense - Proporciona autocompletado de rutas de archivo y nombres de archivo mientras se escriben.

Color Highlight - Resalta los colores hexadecimales en el c贸digo y muestra el color real en l铆nea.

Remote Development - Permite trabajar con archivos en un servidor remoto o en una m谩quina virtual.

Pueden mover la barra de VS Code a la derecha para que al abrirla no les mueva el c贸digo, me resulta bastante c贸modo :) Pueden hacer esto en View > Appearance > Move Primary Bar Left ![](https://static.platzi.com/media/user_upload/image-289b9392-270b-4e02-85ed-1295960c8fa1.jpg)![](https://static.platzi.com/media/user_upload/image-5ab1b636-2b0b-4c22-8e16-e3af1cd7b556.jpg)

Clase 5 - Extensiones e VSCode


Repaso de la clase


驴Qu茅 es lo que ha hecho que VSCode sea tan famoso?

  • Su incre铆ble capacidad de personalizarse.

驴Qu茅 extensiones debemos instalar para iniciar nuestro camino como desarrolladores web?

  • Live Server.
  • Highlight Matching Tag.
  • ESLint.
  • CSS Peek.
  • Code Spell Checker.
  • WSL.
  • Node Require.
  • Material Icon Theme.

驴D贸nde encontramos las extensiones de VSCode?

  • En el men煤 lateral de VSCode hay unos iconos y al que debemos dar click es al icono que tiene 4 cuadrados y est谩 al final de este men煤.

驴Para qu茅 sirve Live Server?

  • Nos permite ver en tiempo real y sin necesidad de recargar la p谩gina los cambios que hagamos en nuestro HTML.

驴Para qu茅 nos sirve Highlight Matching Tag?

  • Nos permite identificar de manera r谩pida el lugar de apertura y de cierre de una etiqueta HTML.

驴Para qu茅 nos sirve ESLint?

  • Para revisar nuestro c贸digo Javascript est谩ticamente y encontrar errores.

驴Con qu茅 est谩ndar viene configurada la extensi贸n ESLint?

  • Con EcmaScript.

驴Para qu茅 nos sirve CSS Peek?

  • Nos permite tener una vista r谩pida los estilos que est茅n asignados a un elemento HTML.

驴Para qu茅 nos sirve Code Spell Checker?

  • Nos ayuda a identificar errores ortogr谩ficos en el idioma ingl茅s.

驴Para qu茅 nos sirve WSL?

  • Nos permite abrir cualquier folder en WSL y usar VSCode para crear aplicaciones de Linux corriendo en la terminal.

驴Para qu茅 nos sirve Node Require?

  • Nos permite ver de manera autom谩tica los m贸dulos que nos hagan falta para evitar errores.

驴Para qu茅 nos sirve Material Icon Theme?

  • Nos permite agregar nuevos iconos para lograr identificar la extensi贸n de los archivos y directorios.

Me encant贸 el 鈥楳aterial Icon Theme鈥

Visual Studio Code (tambi茅n conocido como VS Code) es un editor de c贸digo fuente gratuito y de c贸digo abierto desarrollado por Microsoft. Est谩 dise帽ado para ser una herramienta vers谩til para desarrolladores de software y programadores.

Visual Studio Code cuenta con caracter铆sticas avanzadas, como el resaltado de sintaxis, el autocompletado de c贸digo, la depuraci贸n integrada, la integraci贸n con sistemas de control de versiones como Git, y la capacidad de extender la funcionalidad mediante la instalaci贸n de complementos y extensiones.

Los desarrolladores de la comunidad han creado extensiones y complementos para mejorar a煤n m谩s su funcionalidad. Adem谩s, como es de c贸digo abierto, los usuarios pueden acceder al c贸digo fuente y contribuir a su desarrollo.

Visual Studio Code es una herramienta popular y poderosa para desarrolladores de software y programadores, que se utiliza en una amplia variedad de proyectos y entornos de desarrollo.

Extensi贸n rara que 鈥減odr铆an [servile] si se pone las pilas, mi perro鈥:

Sort lines by Daniel Imms
USO: Organizar lineas en cualquier texto (muy 煤til en CSS) seleccionando y presionando la tecla F9 (por defecto)

Caso de uso: Aveces en CSS se escribe 2 veces la misma propiedad cuando hay muchas. revisar es un poco tedioso si no hay un 鈥渙rden鈥

Ejemplo:

header { /* desordenado y hay una propiedad repetida*/
	background-color: #000;
	display: flex;
	height: var(--header-height);
	padding: 0.5em;
	position: fixed;
	width: 100%;
	color: var(--white);
	padding: 0.5em 1em;
	z-index: 3;
	top: 0;
} 

Elementos organizados:

/* ac谩 es mas facil ubicar la propiedad est谩 repetida*/
header {
	background-color: #000;
	color: var(--white);
	display: flex;
	height: var(--header-height);
	padding: 0.5em 1em;
	padding: 0.5em;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 3;
}
Una extensi贸n en dise帽o que me gusta mucho es el tema 2077 que se basa en el juego Cyberpunk ![](https://static.platzi.com/media/user_upload/imagen-ea4700ff-7897-4459-83c7-9c06b0c12e09.jpg) Otras extensiones son: * **Color Highlight** Muy util para saber qu茅 color selecionados cuando usamos hexadecimal o RGB ![](https://static.platzi.com/media/user_upload/imagen-73482fba-7546-4401-9f71-2624cf1352b5.jpg) * **Error Lens** Una extensi贸n que te muestras los errores del c贸digo directamente donde estamos trabajando ![](https://static.platzi.com/media/user_upload/imagen-ca76a350-e732-46ac-9880-cb82f54a919a.jpg) * **Image preview** Nos muestra una previsualizaci贸n de las imagenes que usemos en ele proyecto ![](https://static.platzi.com/media/user_upload/imagen-cf776a3d-d482-4206-8c57-08dad21d7b1a.jpg) Otras configuraciones que se pueden hacer directamente en VSCode sin necesidad de estensiones son: Para iniciar vamos a dar clic en archivo, luego en preferencias, luego en configuraci贸n. O tambi茅n, presiona Ctrl+, 1\. **Configurar el parpadeo del cursor**: En el buscador de las configuraciones buscamos: **Cursor Blinking**. Una vez encontrado, selecciona la opci贸n que le guste: ![](https://static.platzi.com/media/user_upload/imagen-99a3c45d-d069-4773-81bd-a1fb8fa1014d.jpg) 2\. Para renombrar las etiquetas, **ya no es necesario una extensi贸n:** Para ello buscamos en las configuraciones lo siguiente: **Linked Editing**, y activamos la opci贸n: ![](https://static.platzi.com/media/user_upload/imagen-74b21b4d-6938-473c-bf7c-fe06a8dbfe04.jpg) 3\. Colorear llaves y par茅ntesis, **otra configuraci贸n que no necesita de una extensi贸n:** Para activarlo buscamos: **Bracket Pair Colorization**, y activamos las opciones: ![](https://static.platzi.com/media/user_upload/imagen-65e47da7-c120-47b3-b6c1-967cd0b857fe.jpg) **4. Colorear las l铆neas gu铆a que muestran el contexto de las llaves y elementos:** En las configuraciones buscamos: **Bracket Pairs,** y ponemos la opci贸n en True ![](https://static.platzi.com/media/user_upload/imagen-015c3807-63a6-4155-afeb-0017341afc9a.jpg) **5. Animaci贸n suave del cursor:** No menos importante, es una peque帽a animaci贸n suave que acompa帽a al movimiento del cursor. Para ellos buscamos en las configuraciones: **Cursor Smooth Caret Animation,** y seleccionamos ***on*** en las opciones. ![](https://static.platzi.com/media/user_upload/imagen-cc0fdf2c-636a-4928-8a3e-6a2e7a8544a3.jpg)

Tengo un tiempo viendo videos en YouTube y jugando a ser programador, y no tenia nada de estas extensiones. Este es un valor agregado enorme, lo aprecio un monton.

Les dejo estas extensiones que menciona el profe Oscar馃槑

***Extensiones recomendadas*** * Live Server. * Highlight Matching Tag. * ESLint. * CSS Peak. * Code Spell Checker. * WSL. * Node Require. * Material Icon Theme.

Otras extensiones que yo uso son las siguientes

  1. Path Intellisense
    Te autocompleta el nombre de tus archivos

  2. VSCode-Pets
    Agrega una peque帽a mascota en nuestro editor de texto

  3. Indent Rainbow
    Una extension muy util para ayudarnos a que la identacion sea mas legible

  4. Discord Rich Presence Para mostrarle a nuestros amigos en discord en que estamos trabajando

  5. Snazzy Plus
    Un tema para nuestro editor de codigo

Live server, para ver cambios de manera automatica. Highlight matching tag, ayuda a visualizar los tags con colores. ESlint, lee el codigo pata buscar problemas, sirve para JS y JSX. css peek, ayuda para reconocer los estilos y clases. code spell checker, traductor para codigo. WSL, abre folder en windows subsystem for linux node require, remarca los modulos de node js falta en el codigo. material icon theme, le da iconos a los lenguajes que estamos trabajando. \---------- comando para abrir la terminal ctrl, shift y p.

ESTA CLASE ES MUY IMPORTANTE, y tambi茅n la que viene abajo en clases relacionadas, porque es importante, porque luego cabian de computadora y vuelven a instalar el VS Code y andan de que hijole como se llamaba la extensi贸n que me gustaba mucho, o a mi me pasaba de que los temas como el monokai pro, que como batalle para dar con el de nuevo, de echo les recomiendo hacer una lista de cada una de las extensiones que vayan usando y una breve explicaci贸n de para que sirve.

Extensiones de VS explicadas en este video 1. Live Server 2. Highlight Matching Tag 3. ESLint 4. CSS Peek 5. Code Spell Checker 6. WSL 7. Node Require 8. Material Icon Theme

Recomiendo mucho las extensiones:

Console Ninja
Peacock
Version Lens
Error Lens

Extensiones de Visual Studio Code


Visual Studio Code es altamente personalizable y por eso es muy popular en el mundo del desarrollo de software. Esta personalizaci贸n se puede realizar por medio de configuraciones internas o por medio de extensiones.
.

Algunas extensiones interesantes para VS Code son:

  • Live Server: Inicia un servidor de desarrollo local con funci贸n de recarga en vivo para p谩ginas est谩ticas y din谩micas.
    .
  • Highlight Matchin Tag: Resalta las etiquetas de apertura y/o cierres coincidentes. Opcionalmente, tambi茅n muestra la ruta a la etiqueta en la barra de estado.
    .
  • ESLint: Analiza est谩ticamente su c贸digo JavaScript para encontrar problemas r谩pidamente. Est谩 integrado en la mayor铆a de los editores de texto y puede ejecutar ESLint como parte de su proceso de integraci贸n continua.
    .
  • CSS Peak: Permite mostrar una instant谩nea o vista previa de los estilos definidos para etiquetas de HTML y c贸digo JS.
  • Code Spell Checker: Es un corrector ortogr谩fico b谩sico que funciona en c贸digo y documentos dentro de VS Code. Tiene versiones diferentes para varios idiomas. Ayuda a detectar errores ortogr谩ficos comunes.
    .
  • Node Require: Permite importar o requerir m贸dulos de Node y archivos locales.
    .
  • Material Icon Theme: Cambia el estilo de los iconos de diferentes archivos en nuestro directorio de trabajo.

05 Extensiones de VSCode

Extensiones para Vs Code - PLATZI

  • LIVE SERVER: Muestra los cambios en tiempo real en nuestro codigo en el NAVEGADOR.
  • LIVE PREVIEW: Muestra los cambios en tiempo real DENTRO VScode.
  • HIGHLIGHT MATCHING TAG: Marca con color las 2 etiquetas de apertura y cierre.
  • ESLINT: Encuentra y soluciona problemas en tu c贸digo javascript.
  • CSS PEEK: Permite hacer una vista rapida de los estilos (CSS) desde la etiqueta y clases.
  • CODE SPELL CHECKER: Corrije ortografia en ingles en tu codigo.
  • WSL: Permite usar VS CODE en Windows para crear apps de Linux.
  • NODE REQUIERE: Muestra que modulos de NodeJs FALTAN.
  • MATERIAL ICON THEME:

Extensiones para Vs Code - COMENTARIOS

  • AUTO RENAME TAG: Cambias una y renombra la 2da Etiqueta Automaticamente.
  • CODE RUNNER: Ejecuta y Muestra dentro de VScode.
  • DISCORD PRESENCE: Muestra en Discord que esta codeando.
  • INDENT-RAINBOW: Muestra la sangria a colores para q sea mas legible.
  • COLOR HIGHLIGHT: Resalta los colores q uses.
  • TRAILING SPACES: Resalta los espacios vacios con rojo.

TIP: Lo mas principal para mantener tus configuraciones en cualquier m谩quina es sincronizar tus settings de VSCode a tu cuenta de GITHUB, en el 铆cono de engrane 鈿欙笌 de la parte inferior y seleccionan Settings Sync On (Sincronizaci贸n de configuraci贸n activada).

Live Server, qu茅 grandes recuerdos, fue la primera que descargue.

Yo recomiendo esta extensi贸n https://codeium.com/download y wow con el curso de Relic, impresionante.

Muy util la actualizacion de este curso, Gracias @RicardoCelis

Live Server Highlight matching Tag ESlint CSS peek code spell checked Spanish - Code Spell Checker WSL NODE require Material Icon Theme Color Highlight Auto Rename Tag **Path Intellisense** Prettier - Code formatter
![](https://static.platzi.com/media/user_upload/image-a7958da0-dc88-493b-a150-fa8372edf485.jpg)
Una de las razones principales del 茅xito de Visual Studio Code es su alta capacidad de personalizaci贸n. En esta clase, exploramos las extensiones m谩s importantes que pueden mejorar tu experiencia de desarrollo y adaptar Visual Studio Code a tus necesidades. ### **1. Live Server** * **Descripci贸n:** Esta extensi贸n te permite lanzar un servidor local de desarrollo con la funci贸n de Live Reload, lo que significa que puedes ver los cambios en tiempo real mientras editas tu HTML.聽 ### **2. Highlight Matching Tag** * **Descripci贸n:** Resalta las etiquetas de apertura y cierre correspondientes, lo que facilita la identificaci贸n de la estructura del c贸digo HTML. ### **5. ESLint** * **Descripci贸n:** Esta extensi贸n habilita ESLint en Visual Studio Code, lo que te permite identificar y corregir problemas en tu c贸digo JavaScript est谩ticamente, siguiendo el est谩ndar ECMAScript. ### **4. CSS Peek** * **Descripci贸n:** Nos permite mirar r谩pidamente los estilos que tenemos de las etiquetas y clases que tenemos en nuestros CSS .聽 ### **5. Code Spell Checker**聽 * **Descripci贸n:** Corrector ortogr谩fico en distintos idiomas. Se tiene que instalar el paquete de idioma requerido .聽 ### **6. WSL**聽 * **Descripci贸n:** C Nos permite abrir folders en windows subsystem for linux.聽 ### **7.聽 Node Require** * **Descripci贸n:** Nos dice que m贸dulos de Node hacen falta, para tener el m铆nimo de errores.聽 ### **8.聽 Material Icon Theme** **Descripci贸n:** Nos permite manejar ciertos iconos para ciertas herramientas, Por ejemplo los lenguajes. Hay que activarlo abriendo la terminal (ctrl+shift+p). Escribimos Material Icons: Activate Icon Theme.聽
Excelente video, buenos complementos q no conocia del VScode
CodeSnap : para realizar screenshots de tu c贸digo.?

Encontrar extensiones en el icono Ventana de m贸dulos. live server: facilidad para ver cambios de html, ahorra click Highlight mactching tag: Interaccion de colores. Eslint: Encuentra los problemas. Css peek: vista r谩pida Code spell: Revisa fallas de ortograf铆as. WSL: Para construir aplicaciones de linux./ no instalar todav铆a. Node Require: Nos indica que hace falta importar. Material Icon Theme: Permite manejar iconos para ciertas herramientas. Debemos instalar todas menos 1 de estas extensiones.

*Esta no es una extensi贸n de VSCode, pero la disfrutar谩s.* Se trata de PORTS que en las palabras m谩s b谩sicas que pueda usar, te permite usar tu compu como servidor y acceder remotamente a tu proyecto a trav茅s de una URL. 脷sala con cuidado y responsabilidad
para backend python con django que extenciones recomiendan.
No he probado la extensi贸n 'Highlight', pero estoy seguro de que me ayudar谩 un mont贸n con eso de las llaves ( {} ) que tanto trabajo y dolor de cabeza me causan jajaja. Ya ir茅 madurando en esto de la programaci贸n y s茅 que superar茅 esa peque帽a dificultad.

Desarrollo Web:
Live Server: Crea un servidor local en vivo para proyectos web y recarga autom谩ticamente el navegador cuando se hacen cambios en el c贸digo.

HTML CSS Support: Proporciona sugerencias de CSS dentro de archivos HTML.

Path Intellisense: Ofrece autocompletado de rutas de archivo en tiempo real para ayudarte a escribir rutas de forma m谩s r谩pida.

Desarrollo Frontend:
Reactjs code snippets: Proporciona snippets de c贸digo para React, lo que facilita la escritura de componentes y estructuras de c贸digo comunes.

Vetur: Extensi贸n esencial para el desarrollo con Vue.js, que proporciona soporte para plantillas Vue, autocompletado, snippets y m谩s.

Desarrollo Backend:
Python: Ofrece soporte para el desarrollo en Python, con caracter铆sticas como resaltado de sintaxis, depuraci贸n y administraci贸n de entornos virtuales.

Java Extension Pack: Proporciona soporte completo para el desarrollo en Java, incluyendo la capacidad de compilar, depurar y ejecutar aplicaciones Java directamente desde VS Code.

Contenedores y Orquestaci贸n:
Docker: Proporciona herramientas para administrar contenedores Docker directamente desde VS Code, lo que facilita el desarrollo y la depuraci贸n en contenedores.

Kubernetes: Ofrece soporte para trabajar con cl煤steres de Kubernetes, lo que permite desplegar, actualizar y depurar aplicaciones en contenedores de Kubernetes.

Herramientas de Base de Datos:
SQL Server (mssql): Permite conectarse a bases de datos SQL Server y ejecutar consultas directamente desde el editor.

MongoDB for VS Code: Proporciona una interfaz gr谩fica para trabajar con bas

HII!!! Index-RainBow es Genial para NO CONFUNDIR con la Identacion de Python en los multiples loops. por tanto me gusta mas codetyping in C++ as low level language i+} es mas ccercano al lenguaje maquina y hardware. Yo y a estar viendo este curso muy util. luego el siguiente.
Me parece genial ! Muchas graicas!

Yo me instale una extension de git y no la entiendo 馃槮

El rey del momento:

驴Cual es tu tema favorito?

Para mi el Monokai Pro

As铆 se ve el HTML:

Y as铆 se ve el CSS:

Paquete de idioma espa帽ol para VS Code

Code Runner para hacer pruebas con javaScript

馃

Me encanta usar la extensi贸n "Path Intellisense"
Ver m谩s informaci贸n

Python y Jupyter (de Microsoft), Spring Boot Extension Pack (de VMware) y Angular Essentials Extension Pack

No se si mas que las extensiones es que sea multiplataforma lo que hizo que se convierta en standard.

Otras extenciones

GitLens:

  • GitLens proporciona una integraci贸n completa de Git dentro de VSCode. Ofrece informaci贸n detallada sobre el historial de cambios de un archivo, visualizaci贸n de autores, l铆neas de c贸digo modificadas y mucho m谩s.

Prettier:

  • Prettier es una extensi贸n que formatea autom谩ticamente el c贸digo seg煤n reglas predefinidas. Ayuda a mantener una consistencia en el estilo de c贸digo en todo el proyecto y ahorra tiempo en el formateo manual.

ESLint:

  • ESLint es una herramienta de linting para JavaScript. Esta extensi贸n integra ESLint en VSCode, lo que permite identificar y corregir errores y pr谩cticas no deseadas en el c贸digo JavaScript mientras se escribe.

Bracket Pair Colorizer:

  • Esta extensi贸n resalta los pares de corchetes y otros caracteres de cierre con colores distintos, lo que facilita la navegaci贸n y comprensi贸n de la estructura del c贸digo.

IntelliSense:

  • IntelliSense es una caracter铆stica incorporada en VSCode, pero hay extensiones que ampl铆an su funcionalidad para diferentes lenguajes de programaci贸n, como HTML, CSS, JavaScript, Python, etc. Proporciona sugerencias de c贸digo, completado autom谩tico y documentaci贸n en tiempo real.

hola querida comunidad hay una extencion que es gratuita se llama console ninja te facilita una manera mas productiva de depurar tu codigo mas facil sin escribir console .log

Bastante genial esta clase, en comparaci贸n con el antiguo curso de prework estoy conociendo m谩s extensiones para VSC

Quokka.js de las extensiones m谩s 煤tiles para ejecutar c贸digo sin necesidad de recurrir a la consola.

Yo uso estas tambi茅n:

Nombre: 2077 theme
https://marketplace.visualstudio.com/items?itemName=Endormi.2077-theme

Nombre: Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Nombre: Color Highlight
Ihttps://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

Nombre: Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Nombre: Prettier - Code formatter
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Muchas gracias!

驴Y el enlace profe?

No me funciona Ctrl+shift+p 驴Qu茅 puedo hacer? NO me aparece la especie de terminal que indica el profesor.