Extensiones de VSCode

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 🧰

 
• Entrar a enlace
 

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

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

 
• Ésta les pinta los brakets que abren y cierran funciones, así, pueden darse cuenta si les falta algo por cerrar.
 

 
• Es una herramienta que sirve como corrector ortográfico del código fuente.
 

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

 
• Genera códigos de color como notaciones de color CSS.
 

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

 
• 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
 

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

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

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

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

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

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

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

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

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

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

 
Que genera bonitas screenshots de tu código.
 

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

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

 
• É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.
 

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

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

 
• É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.
 

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

 
• 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
 

 
• 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
 

 
• 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

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.

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.

Recomiendo el tema Nebula :

https://marketplace.visualstudio.com/items?itemName=ChirtleLovesDolls.nebula-theme

Me encantó el ‘Material Icon Theme’

Extensión rara que “podrí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 “orden”

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

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.

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😎

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
   

   

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.

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

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.

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

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?