se que lo dejaron en ingles los paso en español.
Acciones generales
Ctrl + Shift + P: Abrir la paleta de comandos.
Ctrl + Shift + N: Crear un nuevo archivo.
Ctrl + X: Cortar la línea actual.
Ctrl + C: Copiar la línea actual.
Ctrl + V: Pegar la línea cortada o copiada.
Ctrl + Z: Deshacer la última acción.
Ctrl + Shift + Z: Rehacer la última acción.
Ctrl + S: Guardar el archivo actual.
Ctrl + Shift + S: Guardar todos los archivos abiertos.
Navegación del editor
Ctrl + Tab: Cambiar entre pestañas abiertas.
Ctrl + 1, Ctrl + 2, etc.: Cambiar a una pestaña específica.
Ctrl + G: Ir a una línea específica del archivo.
Ctrl + Shift + O: Ir a un símbolo (variable, función, etc.) en el archivo.
Ctrl + Shift + M: Mostrar la lista de errores y advertencias.
Edición de texto
Alt + ↑ y Alt + ↓: Mover la línea actual hacia arriba o hacia abajo.
Ctrl + Shift + L: Seleccionar todas las ocurrencias de la selección actual.
Ctrl + D: Seleccionar la siguiente ocurrencia de la selección actual.
Ctrl + U: Deshacer la última selección.
Ctrl + Shift + ]: Indentar el texto seleccionado hacia la derecha.
Ctrl + Shift + [: Indentar el texto seleccionado hacia la izquierda.
Depuración
F5: Iniciar la depuración.
F10: Paso a paso en la depuración.
F11: Paso a paso en la depuración con entrada en las funciones.
Shift + F11: Salir de una función en la depuración.
F9: Establecer o eliminar un punto de interrupción.
¡Espero que esta lista te sea útil! Recuerda que también puedes personalizar los atajos de teclado en Visual Studio Code según tus preferencias.
Herramientas para la web
¿Qué necesitas configurar en tu entorno de desarrollo en Windows?
Descargar e instalar un navegador web: Chrome
Manejo básico de las DevTools
Quiz: Herramientas para la web
Editor de texto
Instalar VSCode
Extensiones de VSCode
Cómo usar Linux dentro de Windows
¿Qué es WSL?
Configurar Windows 11 para soportar la instalación de WSL
Ubuntu en WSL
Instalación de VirtualBox
Instalación de Ubuntu en VirtualBox
Comandos básicos de la terminal
Instalación de Node
Instalación de Python
Quiz: Cómo usar Linux dentro de Windows
Git y Github
Instalando Git
Vincular la llave SSH
Subir tu primer repo
Quiz: Git y Github
Trucos de Windows
Power toys
Quiz: Trucos de Windows
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Instalar VSCode
4/17Aportes 82
Preguntas 21
Profe, se saltó crerar el primer archivo y la pantalla de bienvenida a visual code. El resto, pepa, muy muy muy bueno.
🪛 Clase #4: Instalar VSCode 4/17 🪛
IDE 📓
Un IDE (Integrated Development Environment) representa un entorno de desarrollo integrado, un ambiente en donde puedes programar. Este IDE trae consigo herramientas que ayudan al desarrollador, como: debugger (depurador), consola, GIT, inteligencia (la cual te ayuda a corregir la sintaxis cuando estás escribiendo código), etc.
Lo que hace ser código al código es la sintaxis y el formato del archivo (.js , .css) etc.
Existen diferentes tipos de IDE, como por ejemplo:
• Visual Studio Code: “Edición de código redefinida”, es totalmente gratuito, está construido encima de open source, es decir que es de código libre y se ejecuta o corre en cualquier sistema operativo. Es muy versátil y puede servir con muchos lenguajes de programación.
• WebStorm: Se venden a sí mismos como “El IDE más inteligente para JavaScript”.
• Eclipse: es un IDE para el desarrollo de Java, sin embargo, admite varios lenguajes como C / C ++, PHP, ColdFusion, Python, Scala y la plataforma Android. Fue desarrollado en Java y sigue el modelo de código abierto.
• Atom: se venden a sí mismos como “El editor de texto hackeable”, es decir que nos dejan construir herramientas, modificarlo, hacerle variaciones a su código para adaptarse a lo que necesitamos.
• Editor de texto: Existen editores de texto / editores de código, las cuales son herramientas más minimalistas donde puedes programar pero con ciertos límites. Como el Bloc de Notas.
Visual Studio Code 🔵
Tiene la siguiente interfaz:
Ejemplo de HTML de la Clase: 🖱
<!DOCTYPE html>
<html>
<head>
<title>Página ejemplo</title>
</head>
</html>
Tips 📌
La forma de “Autocompletar” dentro del archivo html, se coloca el signo de admiración (!) y sale automáticamente un menú como éste:
- Si seleccionas el primero:
!te sale una plantilla HTML.
- Si eliges el segundo:
! !!solo aparece el<!DOCTYPE html>
- Das
ENTERen cualquiera que seleccionas y listo 😉
Casi que no entiendo, tenes que poner en el nombre del archivo que es .html, me dejaron media hora descubriendolo
no es un curso de html pero falto la configuracion inicial del Visual Studio y que el archivo se debe llamar .html si no no te lo muestra en el navegador como en el video
Dato curioso aprendido: VSCode es de Microsoft.
Amo el autocompletado de las etiquetas, te ayuda mucho a ahorrar tiempo. El atajo de ctrl+s se convierte en algo tan automatico en la programacion, que no te das cuenta cuando lo haces… 😄
Un editor de código es una aplicación de software diseñada para escribir, modificar y formatear código fuente de programas informáticos. Estas herramientas están especialmente diseñadas para desarrolladores de software y programadores, que necesitan crear y modificar el código fuente de sus aplicaciones.
Los editores de código son herramientas esenciales para los desarrolladores de software, ya que les permiten escribir y mantener su código de manera eficiente y organizada. Además, muchos editores de código son de código abierto y están disponibles de forma gratuita, lo que los convierte en una opción accesible para cualquier programador. Algunos ejemplos populares de editores de código incluyen Visual Studio Code, Sublime Text, Atom, Notepad++, entre otros.
Un editor de código proporciona una interfaz para escribir y editar el código fuente de un programa en varios lenguajes de programación, como HTML, CSS, JavaScript, Python, C++, entre otros. Los editores de código tienen características avanzadas, como el resaltado de sintaxis, la indentación automática, autocompletar , la búsqueda y reemplazo de texto, la integración con herramientas de depuración, entre otras.
se salto la parte para habrir una carpeta y todo eso y ahora … a buscar x mi cuenta un buen rato sera
Que es el InteliSense:
IntelliSense es una función de autocompletado usada en el entorno de desarrollo integrado Microsoft Visual Studio y también en el editor de código fuente Visual Studio Code. Es un auxiliar de finalización de código que incluye una serie de características como lista de miembros, información de parámetros, información rápida y palabra completa.
Qué es el debugging:
La depuración de programas es el proceso de identificar y corregir errores de programación. Es conocido también por el término inglés debugging, cuyo significado es eliminación de bugs (bichos), manera en que se conoce informalmente a los errores de programación.
Visual Studio Code
Visual Studio Code (VS Code) es un editor de código fuente desarrollado por Microsoft que se ha convertido en una de las herramientas más populares entre los desarrolladores debido a su flexibilidad, su amplia gama de extensiones y su rendimiento optimizado. A continuación, se destacan algunas características y trucos útiles de Visual Studio Code:
Características Principales:
Interfaz Intuitiva: VS Code tiene una interfaz de usuario limpia y fácil de usar que proporciona una experiencia de edición de código fluida.
Resaltado de Sintaxis: Ofrece resaltado de sintaxis para una amplia variedad de lenguajes de programación, lo que facilita la lectura y escritura del código.
IntelliSense: Proporciona sugerencias inteligentes mientras escribes código, incluyendo autocompletado, información sobre los métodos y parámetros, y más.
Depuración Integrada: VS Code tiene una poderosa funcionalidad de depuración que permite establecer puntos de interrupción, inspeccionar variables y ejecutar el código paso a paso.
Control de Versiones Integrado: Integra Git directamente en el editor, lo que permite gestionar repositorios y realizar operaciones de control de versiones sin salir del entorno de desarrollo.
Extensiones: VS Code es altamente extensible y permite a los usuarios instalar extensiones para agregar nuevas características y soporte para diferentes lenguajes y tecnologías.
Terminal Integrada: Incluye una terminal integrada que permite ejecutar comandos del sistema directamente desde el editor.
Trucos y Consejos:
Atajos de Teclado: Conoce los atajos de teclado para agilizar tu flujo de trabajo. Por ejemplo, Ctrl + P (o Cmd + P en Mac) abre el buscador de archivos, Ctrl + (o Cmd + en Mac) abre y cierra la terminal, y Ctrl + D (o Cmd + D en Mac) selecciona la siguiente ocurrencia del texto seleccionado.
Extensiones Útiles: Explora el mercado de extensiones para encontrar herramientas que mejoren tu productividad. Algunas extensiones populares incluyen “Prettier” para el formateo de código y “Bracket Pair Colorizer” para mejorar la visibilidad de los pares de corchetes.
Integración con Contenedores: VS Code tiene una excelente integración con contenedores Docker. Puedes editar archivos directamente dentro de un contenedor Docker sin necesidad de configuraciones complejas.
Snippet y Emmet: Utiliza Snippets y Emmet para acelerar la escritura de código. Emmet te permite generar código HTML y CSS rápidamente usando abreviaturas.
Temas y Personalización: Personaliza el tema del editor y ajusta la configuración a tus preferencias desde el archivo settings.json.
Integración con GitHub: La integración de GitHub en VS Code permite crear gists, clonar repositorios, y más, directamente desde el editor.
Multi-Cursor y Multi-Seleccion: Utiliza Alt (o Option en Mac) + clic para colocar múltiples cursores en diferentes ubicaciones del código, lo que te permite editar varias líneas simultáneamente.
Guardar para Formatear: Configura VS Code para que formatee automáticamente tu código al guardar el archivo. Puedes hacerlo agregando “editor.formatOnSave”: true en tu archivo settings.json.
Visual Studio Code es altamente personalizable y ofrece una experiencia de desarrollo rápida y eficiente para una variedad de lenguajes y tecnologías. Con las extensiones adecuadas y algunos trucos, puedes adaptar el editor a tus necesidades específicas y mejorar tu productividad como desarrollador.
Nota:
Poner .html
Si no se autocompleta de manera automatica poner Control+k
populares de editores de texto incluyen:
Visual Studio Code: Un editor de texto altamente configurable y extensible desarrollado por Microsoft.
Sublime Text: Un editor de texto rápido y sofisticado con una interfaz de usuario minimalista.
Atom: Un editor de texto de código abierto desarrollado por GitHub con una fuerte comunidad de usuarios y numerosas extensiones.
Notepad++: Un editor de texto ligero y gratuito para Windows que ofrece muchas funciones útiles para los programadores.
Vim y Emacs: Editores de texto populares en la línea de comandos de sistemas Unix y Linux, conocidos por su potencia y flexibilidad, aunque tienen una curva de aprendizaje más empinada.
Clase 4 - Instalar VSCode
Repaso de la clase
¿Cómo se llama la herramienta que usa un desarrollador de software para escribir código?
- Editor de código.
¿Microsoft Office es un editor de código, por qué?
- No. Esto es porque este editor de texto agrega caracteres especiales al texto que estamos escribiendo.
¿Podemos usar el bloc de notas para escribir código?
- Sí, pero esta herramienta no es eficiente para esta tarea.
¿Qué editor de código se recomienda usar hoy en día?
- VSCode.
¿Quién desarrolló VSCode?
- Microsoft.
¿Cuáles son las ventajas de usar VSCode como nuestro editor de código?
- Brinda sugerencias al código que estamos escribiendo.
- Permite hacer debugging.
- Conexión con GitHub y Git.
- Autocompletado de código.
¿Qué configuraciones se recomienda que hagamos mientras instalamos VSCode?
- En la ventana “Select additional tasks” debemos activar las siguientes opciones:
- Add “Open with code” action to Windows explorer file context menu.
- Add “Open with code” action to Windows explorer directory context menu.
¿Cómo guardamos un archivo en VSCode?
- Atajo: CTRL + S
Para que me aparezca automaticamente <!doctype tuve que crear el archivo con extension .html. Si creo un archivo nuevo sin grabar ni porner extension y elijo el lenguaje HTML desde la lista de lenguajes no dio la opcion al escribir <.
ME EMOCIONA ESTE PROCESO.
excelente para quienes estamos desde 0, no se ve dificil 😃
No se de html, pero teniendo en cuenta que la etiqueta “title” se encuentra dentro de “head”, y head es “encabezado”, supongo que la wed debe rederizar el nombre del titulo en el “encabeza de la pagina”
Un editor de código es una herramienta de software que se utiliza para escribir, editar y visualizar código fuente de programación. Los editores de código son programas diseñados específicamente para facilitar la escritura de código mediante el resaltado de sintaxis, la autocompletación y la organización de bloques de código.
El title se mostrará en la ventana del navegador
creo que va salir en la pestaña donde sale los nombre creo no se deje en pause para escribir jaja
La etiqueta de titulo va a aparecer en el nombre de la pestaña de nuestro navegador Google Chrome
¿Cómo puedo restaurar a fabrica rapidamente VSC (Visual Studio Code)? ✨
Time to interactive, no conocia este nuevo termino
uffff que clase tan bacana
Atajos para VSC 🚀
Guarda esta lista de los atajos, te serán muy útiles para trabajar con mucha más velocidad.
es el titilo que va el la barra inicial de la página
También un dato extra que es de utilidad, si modificaron el archivo en Visual Studio Code y no se ha hecho el guardado, fíjense en la pestala del video en el minuto 5:43 ,cómo es que tiene el título del archivo ejemplo.html
Tiene justito al lado una bolita blanca, eso significa que no se han guardado los cambios, vean como el profe hace Ctrl+S y se quita la bolita, eso es porque así como ves el archivo se ha guardado correctamente.
Funciona mucho saber esto porque aveces ni sabes que pasó con el archivo, y porque usando Git te detecta cambios y tu ni en cuenta, pues eso sirve porque aveces uno le da clic a un botón por accidente y ya se modificó todo nuestro trabajo.
Este editor también tiene extensiones, en mi caso por ejemplo que uso las bases de datos, puedo configurar el archivo como .sql y detecta mis sentencias de búsquedas, y si detecta el comando lo hace como aquí en platzi
Select * From estudiantes
Pero ese es un lenguaje universal de sql, dependiendo del motor de búsqueda que uses tendrá sentencias especiales de dicho motor, en el caso de PostgreSQL tiene unos cuantos que no son básicos en el SQL pero al agregar una extensión en Visual Studio Code detectará los comandos especiales del programa que uses, en mi caso PostgreSQL
En lugar de arrastrar el archivo a google, una mejor opción es instalar la extensión Live Server. Esta extensión actualiza de manera automatica el navegador, dandole click en la opción Go live que se activa al instalar la extensión. Abrira de manera automatica el archivo ejemplo.html.
Cuando colocamos la etiqueta title aparece en el navegador como el nombre de la pestaña
La pagina ejemplo que se coloco en la etiqueta titulo es la descripción de la pagina que se esta creando como aparece en la parte superior de la ventana del navegador.
¿Qué es Visual Studio Code?
Visual Studio es una herramienta de desarrollo eficaz que permite completar todo el ciclo de desarrollo en un solo lugar. Es un entorno de desarrollo integrado (IDE) completo que puede usar para escribir, editar, depurar y compilar el código y, luego, implementar la aplicación. Aparte de la edición y depuración del código, Visual Studio incluye compiladores, herramientas de finalización de código, control de código fuente, extensiones y muchas más características para mejorar cada fase del proceso de desarrollo de software.
Sale en la pestaña del navegador como la que mande el pantallazo
Aquí sale el title:
Haber era asi:
<!DOCTYPE html>
<html></html>
<head></head>
<title></title>
fffffffr
El titulo se muestra como nombre de la pestaña.
Visual Studio Code (VS Code)
- Visual Studio Code es un editor de código desarrollado por Microsoft.
- Se ha vuelto muy popular y ampliamente utilizado por desarrolladores.
- Ofrece ventajas como IntelliSense, que proporciona autocompletado inteligente y sugerencias de código.
- Permite ejecutar y depurar código, encontrar y corregir errores (bugs) y trabajar con repositorios de GitHub.
- Se puede descargar e instalar en diferentes sistemas operativos, como Windows, macOS y Linux.
La forma más rápida de crear un documento HTML es con el atajo en VS:
html:5
Me surgió la curiosidad y bueno, aquí está en link de las características que tiene la computadora que está usando el profesor Celis. ¡Se ve BASTANTE guay! 👀
el titulo apareceria en el encabezado, es decir arriba bueno espero ser mas concreto despues de ver mas html
Visual Studio Code me parece genial para codigo y si quieren algo más general TYPORA me gusta mucho.
El titulo aparece en la pestaña del navegador
¡Como nombre del sitio web!
Gracias!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?