Transcripciones
1. Te doy la bienvenida a la clase: Bienvenido a esta clase en que aprenderás
sobre cómo impulsar la productividad usando Visual Studio Code VS
Code es uno de los más utilizados editores de código
más utilizados y
queridos, comunidad de
desarrolladores independientes. Y en esta clase,
aprenderás sobre algunos consejos y trucos geniales de la misma, como buscar,
Emmett, teclado, atajos y muchos más
en pequeñas lecciones de video. Hola, soy y soy desarrollador web full-stack desde hace más
de cuatro años. Y empecé al
desarrollo web con JavaScript. Por supuesto, después de
aprender HTML y CSS. Y en ese entonces, usé un editor de código
diferente. Pero cuando empecé a aprender diferentes lenguajes
como Python, Django, ruby o Java, tuve que
instalar un
editor de código separado para cada idioma. Pero cuando me encuentro con VS Code, me empezó a encantar en los primeros dos o tres días
ya que era muy flexible. Y hay
muchos atajos. Además, podemos descargar
extensiones para nuestras necesidades, convirtiéndolo en el editor de
código perfecto para el desarrollo
web y la programación en general, en esta clase, compartiré mi experiencia
de usarlo y algunos trucos geniales que
pueden aumentar tu productividad.
2. atajos de teclado y cómo cambiarlo: Atajos de teclado
y cómo cambiarlo. En primer lugar, abre tu
Visual Studio Code. Segundo, haz clic en este ícono de engranaje. Haga clic en este atajo de teclado. También puedes ver aquí el atajo para abrir el atajo de
teclado, que es Control más K y S. Aquí puedes ver todos
tus atajos de teclado. También puedes buscar los atajos de
teclado aquí, también haciendo clic en
este icono de lápiz, puedes cambiar tu atajo de
teclado. Por ej., I. Cambiará este
atajo para crear un nuevo archivo. Si tecleo aquí Control y N, puedes ver que
está mostrando un mensaje
porque un atajo existente
tiene esta combinación de teclas. Entonces le teclearía su control
y este corchetes. Y voy a presionar la tecla Enter. Se puede ver que mi
atajo ha cambiado. Ahora el atajo para crear
un nuevo archivo ha cambiado. Vamos a comprobarlo. Así que vamos a crear un nuevo
archivo usando ese atajo. Voy a escribir aquí index.html, y se puede ver
que está funcionando. De igual manera, he cambiado este atajo para
duplicar la línea, así puedo presionar Control y
D para duplicar la línea. Es muy útil.
3. Todas las técnicas de selección de cursor múltiples: La selección de múltiples cursores es una técnica muy útil para impulsar la productividad usando
Visual Studio Code. Supongamos que quieres agregar algo de texto en estas cinco líneas. Lo primero que puedes
hacer es escribir aquí el texto y copiarlo y
pegarlo cuatro veces más. Pero en Visual Studio Code, lo que puedes hacer es
seleccionar varias líneas, por ejemplo, presionar Alt y hacer clic izquierdo
sobre estas líneas, y
aparecerá múltiples cursor. Ahora puedes escribir
lo que quieras. Una aplicación de
esto podría ser al agregar el nombre de clase en
múltiples listas en HTML. Si desea agregar
la misma clase, que es un
elemento F discontinua en la lista múltiple. Puede presionar Alt
y hacer clic izquierdo aquí. Entonces escribe tu clase
es igual al elemento nav. También puede pulsar el botón central del ratón
para seleccionar varias líneas. Y entonces puedes
escribir aquí algo. También puede presionar
Control más Alt
más la tecla Flecha arriba para seleccionar
varias líneas desde la parte superior. También puede presionar
Control más Alt más tecla de flecha
hacia abajo para seleccionar
varias líneas desde abajo. Ahora para seleccionar una
aparición múltiple de una palabra, lo que puedes hacer es
presionar Control y D, por ejemplo, si quiero seleccionar la aparición múltiple de
esta variable prima Este, seleccionaré esta variable
y pulse Control. Y D, seleccionará la
siguiente ocurrencia de esta palabra. Y si presiono Control
y D una vez más, seleccionará otra
ocurrencia de esta palabra. Tenga en cuenta que si el control más selección
D no
funciona para usted, entonces lo más probable es que este
atajo haya cambiado. Entonces lo que puedes hacer es abrir los atajos de teclado
y escribir aquí, seleccionar dos próximos partidos. Y puedes ver
este atajo aquí. Entonces hay que presionar
esta cosa en lugar de controlar más D para seleccionar la
siguiente aparición de una palabra. Ahora bien, si quieres seleccionar
la ocurrencia total de una palabra, lo que puedes hacer es primero seleccionar esa palabra y presionar control más shift más L. Seleccionará toda la
ocurrencia de una palabra. Ahora otro truco es
seleccionar una pieza de código y presionar control más shift más la tecla de flecha
derecha. Ampliará la selección. Si presiona control más
mayús más la tecla de flecha izquierda
en lugar de la tecla de flecha derecha, se encogerá esta conferencia. Ahora, otra técnica
es colocar el cursor en alguna parte y mantener pulsada la tecla Mayús
y Alt y comenzar a arrastrar. Se seleccionará como una caja. Esto se conoce como selección de caja de
columna.
4. Buscar, reemplazar y buscar en todos los archivos: En VS Code, puedes
encontrar rápidamente texto y reemplazarlo. En esta lección, vamos
a aprender sobre esto en detalle. En primer lugar, si
quieres encontrar algo, puedes presionar Control y F, se abrirá este widget de búsqueda. Y si escribes aquí algo, los resultados de búsqueda que
van a quedar resaltados. Si hay dos o
más resultados de búsqueda, entonces puede presionar la tecla Intro para navegar al siguiente resultado. O bien, puede pulsar Mayús más Intro para navegar al resultado de búsqueda
anterior. Si seleccionas una palabra, entonces si presionas Control y F, Entonces los datos Word aparecerán automáticamente
en esta visita de búsqueda. Ahora, por defecto, esta operación de hallazgo se
ejecutará en todo el archivo. Pero si quieres ejecutarlo
en un área de texto seleccionada, tienes que usar este botón de
hamburguesa. Por ejemplo, si quieres encontrar algunos textos en estas
líneas, presiona Control. Y F. Y voy a escribir aquí es prime. Y selecciona estas líneas de código y presiona este botón de
hamburguesa. Ahora se puede ver que
sólo la palabra es primo, que están en estas
líneas, están resaltadas. Ahora, si quieres
seleccionar varias líneas, luego presiona Control y F, luego escribe aquí el texto. Y para insertar una nueva línea, presione Control e Enter. Entonces puedes escribir
a o algo así. Ahora también puedes maximizar
el widget para hacer eso, presiona aquí y arrástralo. Si haces doble clic
aquí, se maximizará. Y si de nuevo haces doble clic
aquí, se minimizará. Ahora para buscar a través. Por último, presiona control
más turno más f, y luego esta cosa
aparecerá aquí. También puedes
maximizar o minimizar esto haciendo clic
y arrastrando aquí. Ahora bien, si escribo aquí es prime, puedes ver que los
resultados de búsqueda han aparecido aquí. Me está diciendo que hay una variable S prime en
este archivo llamada hello.py. Si hago clic aquí, voy a
prestar a ese expediente. También puedes buscar
y reemplazar palabras directamente desde aquí. Por ejemplo, haga clic en este icono de flecha
y luego puede escribir aquí, reemplazan hacia
y presione este botón. También puedes ver
el atajo aquí, y luego dar clic aquí. Y eso es todo. Ahora se sustituye la palabra.
5. Servidor en vivo para la recarga y la realización de peticiones automáticas: En esta lección,
aprenderemos sobre Live Server. Pero antes de conocer
qué es el servidor en vivo, hablemos de sus usuarios. Por lo que el primer uso de Live
Server es la recarga automática. Por ejemplo puedes ver
aquí que tengo un archivo
index.html y aquí
está mi navegador Chrome. Ahora bien, si cambio algo
en este archivo HTML, por ejemplo voy a cambiar el
texto de este encabezado. Ahora bien, si presiono Control
y S para guardar este archivo, se
puede ver que este se había
vuelto a cargar automáticamente, detecta de este
encabezado había cambiado. También hay otro
uso de Live Server, que es que puedes hacer, obtener, poner,
publicar y eliminar
solicitudes
fácilmente usándolo. Bien, entonces hemos visto
algunos usos del servidor de la vida. Vamos a instalarlo. Y básicamente
es una extensión. Entonces para instalar esto, hay
que ir
al mercado externo y
buscar Live Server. Ahora después de instalar esto, tal vez tengas que
reiniciar tu VS Code. Abra un archivo HTML. Y puedes ver
este botón de ir a vivir en la parte inferior haz clic aquí. Y abrirá este archivo
en el navegador predeterminado, que en la mayoría de los casos creció. Ahora la segunda forma de abrir este servidor en vivo
es hacer clic derecho en este archivo HTML y elegir este abrir con la opción Live
Server. También puedes ver
el atajo aquí. Ahora puedes ver que si cambio
algo en el archivo HTML, se recarga automáticamente. Ahora para detener el servidor en vivo, puede presionar esta
opción en la parte inferior,
o bien puede hacer clic derecho y elegir esta opción detener
Live Server. Ahora por defecto, el servidor en vivo se ejecutará en el puerto 55 doble cero. Pero también puedes
cambiar esto para hacer eso abrir la configuración y escribir
aquí servidor en vivo. Desplácese hacia abajo y haga clic en este
enlace en la sección de informes. Ahora después de hacer clic ahí, este tipo de código obtendrá aparecido en el nuevo
tipo de VSCode, no escriba aquí el número de puerto en el que desea
ejecutar su servidor de vida. Por ejemplo si tecleo aquí 8080, y si guardo esto, ahora, si ejecuto este servidor en vivo, se
puede ver que el servidor
ha iniciado en el puerto 8080. Para no deshacer esto,
lo que puedes hacer es eliminar esta línea. Ahora, voy a guardar esto y ejecutar
este archivo en servidor en vivo. Ahora puedes ver que
este servidor ha iniciado en el puerto 5,500.
6. Cambia tu tema: Una de las
características interesantes de VSCode es el resaltado de sintaxis
y los equipos. En esta lección,
vamos a aprender sobre esto. En primer lugar, abra VS
Code en una carpeta. Por cierto, si quieres abrir VS Code en una carpeta específica, entonces lo que puedes
hacer es arrastrar esa carpeta y
soltarla en el código VS. Se abrirá esa carpeta. Ahora en Código VS, vaya a Archivo, Preferencias
y tema de color. También puedes ver
el atajo aquí. Da click en esto, y este tipo de cosas
conseguirán aparecer aquí. Ahora puedes usar la tecla de
flecha arriba y abajo para elegir
el equipo que más te guste, y te mostrará
la vista previa también, selecciona el equipo que más te guste. Se puede ver que estoy
usando una proteína de punto. También puedes descargar
Teams desde extensiones. Así que ve a extender Sun y escribe
aquí Tim, quieres por ejemplo puedes escribir material par, y este es el equipo de interfaz de usuario de
material. Ahora hay un
sitio web genial donde puedes encontrar equipos para usar
indivi tan bueno. Entonces este sitio web
es VS Code Teams. Y puedes ver aquí que
hay muchos temas. También puedes filtrar equipos. Elige el equipo que más te guste, y da click en este botón abierto
con Código VS. También puedes copiar su nombre y pegarlo aquí en
el sentido de la extensión, y descargar el equipo desde aquí. Ahora también puedes personalizar
tus iconos de archivo. Para ello, puedes buscar material Icon team
y descargarte este.
7. Vídeo final lec8: En esta lección,
aprenderá sobre algunos atajos básicos y útiles de línea de
comandos. Ahora para abrir el
símbolo del sistema en una carpeta, hay un bonito atajo
que es abrir esa carpeta y escriba CMD y
presione la tecla Enter. Ahora para crear una
nueva carpeta dentro esta carpeta usando la línea de comandos, que escribir aquí
MKDIR y el nombre de la carpeta. Entonces teclearé aquí mi carpeta
y presionaré la tecla Enter. Y se puede ver que
la carpeta había creado. Ahora para crear un archivo en
Windows, hay que escribir par,
tipo, nulo y es un símbolo
mayor que. Y el nombre de archivo, tipo de
suelo aquí, nuevo archivo punto HTML. Ahora en Mac, hay que
usar el comando touch. Entonces hay que escribir
aquí touch y el nombre del archivo para no
eliminar un archivo en Windows, hay
que usar el comando
delete. Así que escribe aquí, D E, N D nombre de archivo. Ahora en Símbolo del sistema
o en terminal, si estás en Mac, puedes presionar la tecla Tab para autocompletar por ejemplo puedes ver aquí que tengo
cuatro archivos en esta carpeta. Digamos que quiero
eliminar este archivo. Entonces voy a escribir a o D, L y L teclearé aquí m, y, dy, y luego presionaré la tecla Tab. Se autocompletará
este nombre de archivo. Si solo tecleo aquí
MY presione la tecla tabulador. Mostrará el primer resultado. Y si vuelvo a presionar la tecla tabulador, se mostrará el segundo
resultado, y así sucesivamente. Ahora para navegar a una carpeta
que está dentro de esta carpeta, tengo que usar el comando cd. Entonces voy a escribir aquí C, D,
y el nombre de la carpeta. Ahora bien, si quieres
volver una carpeta, entonces tienes que escribir aquí c, d, y este doble punto. Y eso es todo.
Piyush Jha, Web Developer & Educator
