Configuración del entorno de desarrollo para JavaScript

3/24
Recursos

Aportes 91

Preguntas 47

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

La extensión de Visual Studio Code para darle colorsitoss diferentes a cada proyecto donde trabajamos se llama Peacock (de John Papa).

Además, aquí puedes ver los atajos de teclado para VSCode:

El profe en el minuto 0:15 hace la hand pose.
Mi cerebro automáticamente:
-Escúchame una cosita nene, la familia no deja los cursos hechos a medias. Capisci?

Me encanta la actitud de Juan David como profesor, es increíble!

Vengo del futuro banda.

No vayan a saltar el curso de prework configuración de entorno de desarrollo o les va a volar la cabeza esta clase.

Recomendación:

Hagan el curso profesional de git y github, vale oro para su portafolio y profundiza a detalle el porque de cada acción para crear y conectar repositorios locales y remotos.

Juan David parece fumado, pero tiene buena actitud.

Me parece excelente lo que hicieron en este curso mostrando la pantalla del profe y también mostrando al profe mientras habla, un detalle excelente 👍❤

Hola, para quellos que no saben como sacar la terminal con el comando que Juan dijo, (Lo digo por que yo no pude) este comando me parace mas facil y hace lo mismo, llamar a la consola:
_
SHIFT + CTRL + Ñ
_

// y listo asi de simple😄💪🐱‍🏍

LOos fundamentos mas fundamentales! agendado! me encanta la onda del profe!

2. Configuración del entorno de desarrollo

¿Qué es git?

Es un software de control de versiones para administrar proyectos en el área de software. Su función principal es: guardar el histórico de los cambios de múltiples archivos o carpetas. Esto lo hace de forma atómica, en una base de datos interna que tiene git. Esta ventaja permite: fusionar cambios, confirmar cambios, crear ramas verificar quién y cuándo se realizaron ciertos cambios.

¿Qué es github?

Es una plataforma web de desarrollo colaborativo para alojar proyectos utilizando el sistema de control de versiones Git

comandos útiles:

  • Abrir carpeta actual reusando la misma ventana
    code ./ -r

  • Agregar todos los cambios al staging área (add)
    git add .

  • Realizar confirmar un cambio en la base de datos de git (commit)
    git commit -m "mensaje del commit"

  • subir cambios a github
    git push

Objetivos de la clase

  • Crear una cuenta en github
  • Crear un repositorio en github para el curso
  • Clonar el proyecto de github en visual studio code

Recursos extras

Además, aquí puedes ver los atajos de teclado para VSCode:

Algo de material para enlazar Git con GitHub de manera segura con dos clases del curso de Git y Github.
Configura tus llaves SSH en local
Conexión a GitHub con SSH

Si tu carpeta ya esta “trackeada” por Git, puedes hacer un commit asi:

git commit .gitignore -am "Mensaje"

De esta forma se agrega y se manda el mensaje al mismo tiempo

Juan David, tienes una excelente actitud para enseñar, y me gusta aprender lo que enseñas. Ojala seas profesor de muchos mas cursos en platzi. Gracias por este curso!

el mejor profe que estoy teniendo en mis estudios en platzi!

Les recomiendo esta extensión para visual studio code https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits para que nuestros commits siga esta convención https://www.conventionalcommits.org/

Me encanta este curso, con el curso básico logré sacar un proyecto de fisica, no es el mejor pero si desean verlo les dejo el repositorio
https://github.com/Astaroth1507/Proyecto-Final-Fisica-I
Sé que quizá no es el mejor código pero seguramente con este curso práctico mejorare!

Que emocionante el hecho de aprender con un profe que se ve que le apasiona lo que hace. Esto es lo que andaba buscando. mi repo:

Para abrir una nueva carpeta en VSC en la misma ventana (sin abrir una nueva) se puede usar la terminal integrada y el siguiente comando:

code ./ -r

Algo sencillo pero valioso que aprendí en esta clase.

En Mac no me funcionó el comando:

code ./ -r

Se soluciona desde el mismo visual: Abrir View > Command Palette, y digitar lo siguiente:
Shell Command: Install ‘code’ command in PATH command

El CLI de Visual Studio Code: code

Significa: interfaz de línea de comandos o interfaz de línea de órdenes (en inglés, command-line interface)

Serás de los mejores profesores en la plataforma Juan!
Espero sigan saliendo mas cursos contigo 😄
Después de haber completado el examen y de tener listo el entorno de desarrollo… ahora si viene lo chido diría el Luisillo.

No está demás aclarar que está usando la extensión de consola para vs, por ello clona el proyecto dentro del editor.
Si no la quieres usar utiliza git bash.

Estoy trabajando desde linux Mint y tuve cierto problema con el comando code ya que no me abría la terminal, lo que utilice para abrirla en su lugar fue:

code --

Sin embardo escribiendo

sudo code

logré que funcionara correctamente.

Que forma de hacer ver tan facil Git!!! Muy buena explicación.

este profesor se parece a thimothee chalamet

Excelente clase, muy bien detallado todo. Me gustó mucho que explica el significado de usar -r o -m, eso me aprece genial. Pinta muy bien este curso con JuanDC 👨🏻‍🏫

Muy buena la actitud y la pasión que tiene Juan. Que gusto aprender así, gracias Juan!

El curso es genial! pero Juan recomienda aprender todo y creo que lo esta explicando muy atenttamente.

Es mi primer curso con Juan, ahora que me sumé al JSchallenge pero entusiasma su energía y la forma en la que explica 😃

Genial la actitud de Juan, y súper importante haber pasado ya por los cursos de git y prework, en verdad hace la diferencia, se siente jajaja. Here we go!

En esta pagina colocan lo que deseen ignorar y les genera el template completo gitignore LINK

Para abril la Terminal en VSC oprimen ctrl ñ, también pueden ir a la opción VER / TERMINAL
casi me saco un ojo buscando como abrir la terminal jaja soy novato

1.25X y queda perfecto ❤️

voy lento pero seguro! buen cursoo!

Por si a alguien mas le pasó, comparto.

¿Qué hice?
Con VSC hice git init siguiendo al profe, pero decidí trabajar con git bash (la costumbre).

¿Qué pasó?
Llegué a un punto muerto al tratar de hacer commit en donde git bash me dijo.

“Another git process seems to be running in this repository”

¿Como se soluciona?
Primero hay que entender que Git no puede correr dos procesos en simultaneo, se puede solucionar borrando el archivo index.lock en el directorio .git/

y el comando es

rm -f .git/index.lock 

Lo que hará este comando es limpiar la cache en el index de Git, permitiéndote correr otro comando.

Fuente Créanme we

Excelente aunque no me acostumbro a la terminal de vscode, me siento mas cómodo con la terminal de Ubuntu para Windows cuando hice el prework de configuración del entorno en Windows la descubrí y desde entonces se me hace muy cómodo trabajar con ella…

Yo viendo como el profesor es un crack de javascript y que ademas maneja ternjs, mongodb, firebase, Go... // y yo aun viendo POO JS :,(

Les dejo mi repositorio del curso: UltiRequiem/practical-js-platzi. Incluye notas y todo el código 😃

Atajo para crear un repo: escribir en el buscador repo.new y ya.

Excelente!

[email protected], si tienen mac y les apaerce este error

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun 

Les dejo un resumen de 3 días de búsqueda:

  1. Use el comando
xcode-select --install 
  1. Pide permisos para hacer la instalación (en el mejor de los casos), con esto se soluciona.

  2. Si por el contrario, sucede que te sale la alerta “No se pude instalar el software porque no está disponible en el servidor de actualizaciones de software”

  3. Verifica que efectivamente tienes instalado xcode, con este comando

xcode-select --version
  1. Si lo tienes, entonces hay que instalar las herramientas de líneas de comando

Con una cuenta en icloud, vas acá

https://developer.apple.com/download/all/

Descargas las herramientas de linea de comandos, puede ser que si tienes (como en mi caso) tengas Catalina, me funcionó

Command Line Tools for Xcode 11.5

Juanda eres un crack

Yo para utilizar git lo corro desde la terminal de WSL de Ubuntu pero a veces tambien me gusta usar la de VS Code muy buena clase para comenzar el curso

Aquí Juan explica cómo funciona la extensión de VSCode que asigna un color diferenciado a cada ventana que contiene un proyecto diferente. Útil cuando se trabaja en múltiples proyectos a la vez.

Pagina que te ayuda a elegir una licencia en base a tu situación.

Yo estaba corriendo de Git, pero debo terminarlo ya que es super importante.

Qué clase tan emocionante

Con nuestra terminal lista, cortesia del maestro @codevars en el curso de Prework en Linux 😄😄😄

Me costo conectar mi repositorio en github con el repo en local. Al parecer era un error que se puede presenter en linux si usas SSH.
Aqui esta el enlace si a alguien le sirve.

https://docs.github.com/es/github/authenticating-to-github/troubleshooting-ssh/error-agent-admitted-failure-to-sign

Empecé con pie derecho gracias a que vengo tomando toda la escuela de desarrollo web y ya se utilizar git y GitHub… Here we go!

Me encanta la actitud de este profesor ojala en mi universidad dieran clases con esa energía !!

Excelente clase, justo vengo del curso de Git y GitHub y estoy seguro que va a complementar bien con ese curso

Excelente inicio, hasta aca vamos muy bien, recordando algo que ya había trabajado y uso en mis labores actuales.

Buenas noches, comparto mi repositorio, a este momento he desarrollado 7 proyectos, con html/css/sass/jv/sql, entre otros, si les puedo colaborar en algo, con todo gusto:

https://github.com/JhonnFy

No sabía que se daban estrellitas en github… o.O

Super importante lo que dice Juan David, primero hay que tomar los cursos que sugirio la clase pasada o uno va estar en el limbo x_x

Y es mejor saber a no saber 😃

  • les dejo esta captura con unas flechas apuntando donde tienen que seleccionar para que les aparezca la terminal del git bash.

Hice el curso Basico de JavaScript sin haber hecho el de Git y GitHub. Pero al saltar a este curso le hice caso a Juan David y me alegro haberle hecho caso. Me demore unos dias pero termine el de Git y GitHub y aca estoy para seguir. Adelantandome ya veo que se va a usar mucho y agradezco haberle hecho caso.

Me volví loco por que el comando code no funcionaba en mi VSCode. Así que busqué y encontré esto. Espero les sirva!

Haciendo uso del curso de prework, excelente

Pasos para crear un repositorio, abrirlo en VisualStudio Code y abrirlo desde el mismo editor de código:

  1. En Github en el símbolo “+” de la derecha-arriba, seleccionamos crear un nuevo repositorio “new repository”.

  2. Completamos “respository name”, también podemos colocar una breve descripción.

  3. Puede ser público o privado.

  4. Add a README file: describimos nuestro proyecto, podemos colocar toda la documentación de nuestro código o simplemente detallar con más detalle nuestro proyecto.

  5. Add .gitignore: éste archivo nos va a permitir decirle a Git, que archivos o que carpetas, no queremos incluir en nuestro repositorio, es decir, puede que nuestro sistema operativo por defecto cree algunos archivos o carpetas, que son privados y no queremos subir a Github, pero los necesitamos en nuestro entorno de trabajo local.

  6. Choose a license: podemos colocarle al proyecto una licencia.

  7. Crear el repositorio.

  8. Copiamos la url del repositorio, que esta en “Code”.Desde la terminal de VisualStudio Code o en Gitbash, nos posicionamos en la carpeta que vamos a clonar el proyecto. cd n y el nombre de la carpeta.

  9. git clone y la url que copiamos en Github.

  10. Nos va a crear una carpeta que se va a llamar igual que el nombre del repositorio que cramos y clonamos en Github. También nos va a traer todos los archivos que ya están creados por defecto en el repositorio, Y por último nos va a conectar git para que podamos traer los cambios que hay en nuestro repositorio, por ejemplo si somos varias personas trabajando en el mismo proyecto o nos va a permitir enviar los cambios que hagamos en nuestro entorno local.

  11. cd y el nombre de la carpeta que se creo, es el mismo nombre del repositorio.

  12. Conectamos mi editor de código con el repositorio:
    code ./ -r
    "code" es la herramienta que nos permite trabajar con VisualStudio Code, y el punto-slash es para indicar que la carpeta que queremos abrir es en la que estamos ubicados.
    Y el flag guión r que le va a indicar al editor de código, que no va a abrir una nueva ventana, sino que va a reutilizar la ventana que está abierta.

  13. Ingresamos a .gitignore, al final del archivo colocamos un comentario con el símbolo de “# Visual Studio Code”, enter, y abajo colocamos “.vscode” que es la carpeta que VSC nos esta creando, guaramos los cambios en el archivo.

  14. Ingresamos a la terminal, con Shift + Ctrl + Ñ. Ahora vamos a decirle a la terminal de git, que añada los cambios a gitignore:
    git add .gitignore
    git status Y nos muestra cambios en staging área.

  15. git commit -m "Añadí la carpeta .vscode al archivo .gitignore"
    git status Nos aparece el commit que creamos, pero, no nos aparece como el último commit conectado a mi repositorio. Entonces hacemos:

  16. git push Y listo, los cambios se envían al repositorio remoto en Github.

  17. Entramos al repositorio en Github, al parecer no hay cambios, pero, si entramos a .gitignore y bajamos hasta el final del archivo, aparecen las líneas de código que escribimos hace un momento en mi repositorio local.

Yo uso otro editor diferente… Nvim concretamente, este me parece el editor más cómodo para JS por todos los plug-ins en específico que sirve para este lenguaje…

En la prueba me fue bien a medias, porque me canse de escribir teoria, jejeje y aun tengo que terminar.

Me gustó el ejercicio práctico de conectar el GitHub.

Hay una herramienta que se llama EditorConfig que puede ser muy útil cuando las personas usan diferentes editores, también Prettier evita que se quieran cortar la cabeza entre devs; también existe un generador de gitignore que me parece fundamental al momento de empezar un proyecto

Excelente curso

Yo directamente puse git clon en vs, y asocie vstudio con github.
Automaticamente te aparece en cual carpeta quieres ubicar ese repositorio y desde ahi empiezas a trabajar. Pero si quieren pueden hacerlo clonando inclusive desde el gitbash, es buena practica para mantenerte aceitado. Saludos

Me recuerda a sparragus

Si a alguno de ustedes les saco de onda que la terminal de Visual Studio Code salga diferente… tienen que abrir su terminal de ubuntu, correr visual studio code desde la terminal con el comando “code”, esperen a que se abra el programa y ahora si abran la terminal desde ahi , y sigan todos los pasos , a mi me llego a preguntar mi contrasenia para poder hacer los cambios.
Exito en el curso!

Lo de github no me salió puesto que no soy capaz de que el internet me funcione con el WSL, así que a fuerzas me tuve que hacer los cursos desde windows nada más.

luego veo si le hago un dual boot a mi maquina. Como es nueva tampoco la quiero comprometer tanto.

Ojo! Mr, Freddy nos enseño que antes de hacer un push debemos hacer un pull!

hola que tal, dejo en el siguiente enlace un grupo de whatsapp en donde aclaramos dudas acerca de javascript
https://chat.whatsapp.com/EqcLzNha3PQJmHmuOLjZ4a

me sale esto cuando intento clonar en git fatal: could not create work tree dir ‘javascript-practica.’: Invalid argument

alguien me puede ayudar ?

Tuve algunos problemas con git y luego con que me permita la descarga, tuve que agregar path a mis variables de entorno luego de su instalación y luego generarme un keygen y agregarlo a mi perfil de github:

The term ‘git’ is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was
included, verify that the path is correct and try again.

[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Ya quedó resuelto pero tuve que hacer unas búsquedas extra en YouTube.

Quiero llevar todos los cursos de Juan David!!

Dejo mi repo para este curso 😃
https://github.com/Amariev/Practical-JavaScript

Muy buena clase

Mucho enrredo, hay cosas que no me aparece y lo estoy haciendo igual que el profe.

Hacer que el plug-in Peacock funcione:

Presione F1 para abrir la paleta de comandos.
Escribe peacock.
Elija Peacock: Change to a favorite color.
Elija uno de los colores predefinidos y vea cómo cambia su editor.

¿Tienes problemas instalando extensiones en Visual Studio Code?

Instalar extensiones VSIX de VS CODE a través de la linea de comandos cmd no requiere permisos de administrador

code --install-extension D:\Downloads\LAEXTENSION.vsix

ejemplo
code --install-extension D:\Downloads\CoenraadS.bracket-pair-colorizer-1.0.62.vsix

DEBO DESCARGAR LAS DIFERENCTES EXTENSIONES QUE NECESITE EN:

[AQUÍ](https://marketplace.visualstudio.com/search?target=VSCode&category=All categories&sortBy=Installs)

Luego de encontrada la extension buscar el link Download Extension.

Vincular VS code con GitHub

Buen curso

Yo no le pido favores a git, yo le doy ordenes 😎

wow muy muy buena clase, se aprende mucho y se repasan conocimientos adquiridos previamente

Vean porfa GitHub y prework, si no van a caer aqui.

si en tal caso no quieren hacerlo simplemente tengan en cuenta crear su llave SSH y su github y configurarlo, asi evitaran errores

UFF me aventure como todo novato a venir a este curso hace 1 mes. tenia el curso de git y github a medias (NO LO HAGAN) termine el curso de git y github satisfactoriamente. Ahora comprendo mejor esta clase! me siento GOKUUUUUU

Vayan al curso de git y github y al de prework es muy importante.

Aqui les comparto mi repositorio con todas las prácticas que llevo de la escuela de JavaScript (incluyendo obvio este curson y el anterior): https://github.com/mauriciorivero/Escuela_JavaScript

Igual hay quienes trabajan con la terminal fuera de githab, para mi en lo personal me es mas cómodo así y dejar solo githab para el proyecto, es decir, solo código del proyecto; la verdad que es vital hacer el curso de git y githab antes de este, de lo contrario estarás viendo cosas como si fueran en chino.