Extensiones esenciales para personalizar Visual Studio Code

Clase 5 de 17 • Curso de Configuración de Entorno de Desarrollo en Windows

Clase anteriorSiguiente clase

Sandra Ximena Caldas

student•

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

Ricardo R.

student•

Gracias por el listado :)

sebastian reyes

student•

Gracias!! ;)

Porfirio González López

student•

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.

Hugo Humberto Crespo Martínez

student•

muchas gracias, que gran aporte

Marcos Monteverde

student•

gracias

Maria Gabriela Rodriguez Cuevas

student•

🪄 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++ 🧰

Listado de temas para que personalicen el VSCode 📄

• Entrar a enlace

Extensión Auto Rename Tag

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

Extensión 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.

Extensión Bracket Pair Colorizer

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

Extensión Code Spell Checker

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

Extensión Color Highlight

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

Extensión Color Picker

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

Extensión CSS Flexbox Cheatsheet

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

Extensión CSS Grid Snippets

• 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

Extensión CSS Peek

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

Extensión ESLint

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

Extensión GitLens

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

Extensión Highlight Matching Tag

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

Extensión Icon Material Theme

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

Extensión Indent-rainbown

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

Extensión Live Server

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

Extensión Material Icon Theme

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

Extensión Node Require

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

Extensión Path Intellisense

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

Extensión Polacode

Que genera bonitas screenshots de tu código.

Extensión Prettier

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

Extensión Project Dashboard

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

Extensión Settings Sync

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

Extensión 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.

Extensión 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 ++VSC++.

Extensión Turbo Console Log

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

Extensión WSL

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

Listado de extensiones para PHP

• 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

Listado para Agilidad al codificar

• 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

Listado Para JS

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

Gabriel Chamorro

student•

Gracias por su aporte

Ingrid Katherine Hernández Aya

student•

gracias por tu aporte

Enrique A. Estrada

student•

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

Hugo Humberto Crespo Martínez

student•

Muchas gracias por tu aporte, lo hice de inmediato. Aun no se en que me sirva, pero seguro mas adelante me servira.

Iván Viveros

student•

Coincido con el compañero, lo hice, espero que sirva en un futuro

Marcos Monteverde

student•

@youtube

Arianna Clemente

student•

Estan geniales estas configuraciones!

helmut martinez

student•

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

Carlos Ramos

student•

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.

Felipe Silva Gonzalez

student•

¿Cómo instalo la sección de idioma en español? Ya puse en la extensión de spelling el español también, pero no se ve n la clase dónde se cambia.

Norma Natalia Moreno Espinoza

student•

¡¡Hola!! ✨

Primero busca que extensión colocaras, si spell chekcer en español o en inglés, para sí darle en Instalar.
Posterior a eso, en tu barra de estatus(abajo a la derecha) te aparecerá el icono de Spell:
y es ahí donde lo puedes activar o incluso configurar.
Una vez activado ya podrás ver que te dará opciones de correcciones ortográficas ^^

Cuéntame si pudiste activarlo :3

Nunca pares de aprender~ 💚

raul steven lerma

student•

hola compañero quiero enfatizar que no desisntales code spell ya que es el principal intente solo instalar code spell spanish y me dice que cada vercion depende de la primera pero si podemos desintalar las demas verciones que deseemos

Leonardo Miranda

student•

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.

Jafet Brito

student•

Remote Development - Ese no lo conocía, lo voy a probar. Gracias

Jader Castro

student•

Una extensión en diseño que me gusta mucho es el tema 2077 que se basa en el juego Cyberpunk

Otras extensiones son:

Color Highlight

Muy util para saber qué color selecionados cuando usamos hexadecimal o RGB

Error Lens

Una extensión que te muestras los errores del código directamente donde estamos trabajando

Image preview

Nos muestra una previsualización de las imagenes que usemos en ele proyecto

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:

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:

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:

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

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.

Fernando Borea

student•

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

Johan Rodriguez

student•

Tienes razón, se trabaja más cómodo así. Muchas gracias.

Francis Gamboa

student•

se ve raro pero es practico

David Antonio Morales Barrera

student•

Me encantó el 'Material Icon Theme'

Ricardo Antonio Gaviria Escobar

student•

Apenas estoy comenzando, pero me parece importante, para los que estamos comenzando, tener en cuenta este detalle: Al tratar de instalar la extensión debemos seleccionar: Confiar en el publicante e instalar porque si no instala la extensión peroes como si no la habilitara por no haber confiado en el publicante...Me pasó y tuve que desinstalar para poder volver a hacerlo...

Luis Alférez

student•

Otras extensiones que yo uso son las siguientes

Path Intellisense Te autocompleta el nombre de tus archivos
VSCode-Pets Agrega una pequeña mascota en nuestro editor de texto
Indent Rainbow Una extension muy util para ayudarnos a que la identacion sea mas legible
Discord Rich Presence Para mostrarle a nuestros amigos en discord en que estamos trabajando
Snazzy Plus Un tema para nuestro editor de codigo

Norberto Iván Tolaba

student•

Indent Rainbow de diez, ayuda mucho con la identación

Claudia Abalos

student•

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.

Andres Salazar

student•

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

Juan José Saavedra Realpe

student•

Entendí la referencia y muchas gracias.

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

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.

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

Fabian Camilo Huertas Suarez

student•

@youtube

Camilo Tuñón Madrid

student•

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.

Fabian Camilo Huertas Suarez

student•

Les dejo estas extensiones que menciona el profe Oscar😎 @youtube

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

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

Extensiones esenciales para personalizar Visual Studio Code

Herramientas para la web

Configuración de Entorno de Desarrollo en Windows

Instalación y uso de Google Chrome para desarrollo web

Herramientas para Desarrolladores en Google Chrome

Editor de texto

Uso de Visual Studio Code para Desarrollo Web Básico

Extensiones esenciales para personalizar Visual Studio Code

Cómo usar Linux dentro de Windows

Instalación y configuración de Windows Subsystem for Linux 2

Instalación de WSL y solución de errores en Windows 10

Configuración y Uso de Windows Subsystem for Linux (WSL) con Ubuntu

Instalación de Máquina Virtual con VirtualBox en Windows

Uso de Ubuntu en Máquinas Virtuales: Instalación y Configuración

Comandos básicos de terminal en Linux y edición con Visual Studio Code

Instalación de Node.js y npm en Ubuntu paso a paso

Instalación y Ejecución Básica de Python en Linux

Git y Github

Registro y configuración inicial de GitHub en WSL

Creación y Configuración de Llave SSH para GitHub

Subir y gestionar repositorios en GitHub con Git

Trucos de Windows

Instalación y Uso de PowerToys en Windows