No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Configurando nuestras herramientas

3/35
Recursos

Para instalar los plugins que te mostr茅, da click en 铆cono de extensiones de tu Visual Studio Code, escribe el nombre del plugin en la barra de b煤squeda, seleccionalo e instala.
Untitled.png
Icono de extensiones en VSC
Plugins importantes para este curso:

  1. Code Runner. Permite ejecutar piezas de c贸digo seleccionadas y muestra el output directamente en nuestro editor de c贸digo. (M谩s de Code Runner)
  2. Live Server. La vamos a utilizar para ejecutar un servidor y ver los cambios efectuados en tu c贸digo. (M谩s de Live Server)
  3. JavaScript (ES6) code snippets. Autocompleta y brinda sugerencias al momento de escribir c贸digo. (M谩s de code snippets)

Plugins recomendados para usar en tu d铆a a d铆a como frontend developer

  1. Auto Close Tag. Ayuda a cerrar m谩s r谩pido las etiquetas que vas abriendo.
  2. Error Lens. Muestra los errores visualizandolos de forma atractiva para que no pases ninguno por alto.
  3. Guides. Te ayudan a indentar tu c贸digo y ordenarlo de forma m谩s eficiente.
  4. Indent-rainbow. Hace que la indentaci贸n sea m谩s amigable con la ayuda de colores diferentes por nivel.
  5. Palenight Theme. 脷salo si quieres visualizar los mismos colores que se muestran en mi editor de c贸digo.

Aportes 36

Preguntas 16

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Reproducirse en todos lados

No olviden el archivo .gitignore y configurarlo para ignorar node_modules y no subirlo a su repositorio 馃き

No solo me llevo grandes conocimientos, si no tambi茅n una nueva colecci贸n de plugins de vc, esta genial!!!

Me parece genial cuando Platzi deja en sus recursos el resumen de la clase (key points) y enlaces a m谩s info y recursos. Ojal谩 lo hicieran como regla general para todos los cursos.

M谩s adelante en el cuso hago el aporte, pero igualmente me gustar铆a recomendarles desde esta clase una extensi贸n de VS code que me gusta mucho usar cuando estamos haciendo este tipo de ejercicios, siento que sirve mucho para organizarte y volver a tu propio c贸digo para repasar tus ejemplos y entenderlos.

  • La extensi贸n en cuesti贸n se llama Better Comments:

Para inicializar el proyecto vamos a agregar las configuraciones base de npm e iniciarlizar con git con los siguientes comandos

git init
npm init -y

Para abrir la carpeta desde VSCode desde la terminal estando ubicados en la carpeta que inicializamos lo podemos hacer con el comando code .

Luego creamos un archivo llamado .gitignore en el que podemos ignorar los archivos que no queremos subir a nuestro repositorio ya que son autogenerados al correr npm install.

.gitignore

/node_modules

Carpeta src

Es un estandar donde vivir谩n los archivos que vamos a manejar dentro de nuestro proyecto.

Plugins 煤tiles

  • Auto Close Tag
  • Code Runner
  • Error Lens
  • Guides
  • indet-rainbow
  • Live Server
  • Palenight theme
  • JavaScript (ES6) code snippets

Si desean actualizar Node.js a su versi贸n estable o a su ultima versi贸n, pueden utilizar estos comandos los que utilizan wsl:
鈫 sudo npm cache clean --force
鈫 sudo npm install -g n
鈫 sudo n latest
Ultima versi贸n es con 鈥渓atest鈥 y si quieres la versi贸n estable es 鈥渟table鈥

Que bonito es que el profe recomiende un curso y tu ya haberlo pasado porque sabes que la p##Bida esfking dura y escojes el camino del guerrero nocturno solitario aprovechando al m谩ximo para estudiar, send my love tM8t, a seguir estudiando 8)

![](

Si algunos realizan el procedimiento desde la consola de GIT bash en Windows, es muy probable que al ejecutar el comando npm init salga un error de command not found.

Para esto se puede instalar el nodejs para Windows en su versi贸n LTS desde el siguiente link:

https://nodejs.org/en/

Es recomendado crear un directorio en D (Con cualquier nombre), de tal manera que al seguir el procedimiento de instalaci贸n se cambie la ruta por defecto para el programa (鈥Archivos de programa鈥) a la ruta creada (D:\Directorio para npm鈥). Despu茅s de esto la instalaci贸n se contin煤a y finaliza de manera normal.

Una vez instalado node.js dentro del directorio creado se reinicia la consola de GIT (salir con exit), volver a abrirla, se ingresa al directorio donde se instal贸 el node.js (cd /d/鈥uta Directorio para npm), al ingresar ls debe desplegar todos los archivos correspondientes al programa y finalmente al digitar npm -v debe desplegar la versi贸n del npm:

$ npm -v
8.19.3

Esto nos indica que ya se podr谩 ejecutar las funcionalidades del npm como el npm init.

Aporte de mucho texto xdxd

Toda la informaci贸n sobre las reglas se encuentra en:
https://docs.npmjs.com/about-semantic-versioning

Aqu铆 solo hago un peque帽o resumen鈥

Las versiones sem谩nticas son un codigo, por asi decirlo, que especifica la version o fase del programa, por ejemplo, si es la primera fase por estandar el codigo sem谩ntico ser铆a el 1.0.0, si es su 2da version ser铆a 2.0.0, y as铆 sucesivamente.

En el enlace se ve reflejado un cuadro descriptivo que muestra los estandares distintos para las versiones

  • Primer lanzamiento (nuevo producto): regla

    Empezar con 1.0.0

  • Correcci贸n de errores (Lanzamiento de parche para esa version): regla

    Incrementa el tercer d铆gito 1.0.1

  • Nuevas funciones compatibles (lanzamiento menor de nuevas caracteristicas): regla

    Incrementa el d铆gito del medio y restablece el 煤ltimo d铆gito a cero 1.1.0

  • Cambios que rompen la compatibilidad con versiones anteriores (lanzamiento importante o de nueva version): regla

    Incremente el primer d铆gito y reinicie el medio y el 煤ltimo d铆gito a cero 2.0.0

Tambi茅n pueden usar nvm para instalar node, les permite cambiar de version de node y npm cuando quieran, muchas veces las nuevas versiones arrojan errores que se solucionan pasando a versiones mas antiguas.

Oscar, cuando hablas asi de fluido y no haces tantas pausas de verdad que eres uno de los mejores profesores del sitio! Felicitaciones por eso

otro comando de Visual Studio Code es

code ./ -r

Hola a todos, les recomiendo usar RunJS, est谩 para Windows, Linux y MacOs y es bastante 煤til para correr c贸digo de JavasCript mientras lo vas escribiendo.

鉁 Extensiones principales para instalar en nuestro vscode:

  1. Code Runner. 馃捇
  2. Live Server. 馃攨
  3. JavaScript (ES6) code snippets. 鉃★笍

Para Windows se puede usar nvm for windows https://github.com/coreybutler/nvm-windows que permite gestionar distintas versiones de node:

nvm install latest
nvm install lts
nvm use latest

woo

Quokka es mejor que Code Runner. <https://quokkajs.com/docs/index.html>
Instale Node js, pero la verdad no me sale nada, ni la ruta donde estoy y no me recibe sino instruscciones como console.log, pero no me permite ver en que ubicacion estoy ni mkdir sale error ```js Welcome to Node.js v20.9.0. Type ".help" for more information. > mkdir ''prueba' mkdir ''prueba' ^^ Uncaught SyntaxError: Unexpected string > mkdir 'prueba' mkdir 'prueba' ^^^^^^^^ Uncaught SyntaxError: Unexpected string > mkdir prueba mkdir prueba ^^^^^^ Uncaught SyntaxError: Unexpected identifier 'prueba' > ```Welcome to Node.js v20.9.0. Type ".help" for more information. \> mkdir ''prueba' mkdir ''prueba' ^^ Uncaught SyntaxError: Unexpected string \> mkdir 'prueba' mkdir 'prueba' ^^^^^^^^ Uncaught SyntaxError: Unexpected string \> mkdir prueba mkdir prueba ^^^^^^ Uncaught SyntaxError: Unexpected identifier 'prueba' \>

鉁煢

Con estos dos comandos se puede instalar la versi贸n lts de node de forma r谩pida :3

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
nvm install --lts

Y para comprobar la instalaci贸n simplemente le damos a:

node -v
por que en recursos no me sale nada?

Para los que estamos usando WSL instalar node y tener npm ultima version estable
https://learn.microsoft.com/es-es/windows/dev-environment/javascript/nodejs-on-wsl

驴Qu茅 es npm?
.
鈥淎unque puedes ver diferentes variaciones del significado de npm, las siglas significan 芦Node package manager禄.
.
npm es un gestor de paquetes para los proyectos de Node.js disponibles para su uso p煤blico. Los proyectos disponibles en el registro de npm se llaman 芦paquetes禄.
.
npm nos permite utilizar f谩cilmente el c贸digo escrito por otros sin necesidad de escribirlo nosotros mismos durante el desarrollo.
.
El registro npm tiene m谩s de 1,3 millones de paquetes que son utilizados por m谩s de 11 millones de desarrolladores en todo el mundo.鈥

.
Fuente: kinsta

El audio es malo

Los pluggins estan geniales

Herramientas a usar;

  1. Git
  2. Node LTS
  3. Cuenta en GitHub
  4. Visual Studio Code

A煤n no tomo el curso de Prework pero ya ten铆a instalado todo lo que se mencion贸 en clase 馃槄.

Hab铆a visto este v铆deo hace un tiempo y me fue 煤til en mis proyectos.

https://www.youtube.com/watch?v=9vLplH-JzCE

Oscar Barajas siempre recomienda buenas extensiones!

Como un 鈥渢ip extra鈥, vayan al canal de Youtube del gran 脫scar Barajas. Van a encontrar un video, sobre 茅ste tema.
脫scar: https://www.youtube.com/@gndx/featured

Si estas en mac y no funcion貌 el 鈥渃ode .鈥 puedes abrir visual studio code y con 鈥渃md + shift + p鈥 abres la paleta de comandos y escribes 鈥渟hell command鈥 y despues eliges la opci貌n 鈥淚nstalar鈥濃 cierras tu editor y tu terminal y abres una nueva鈥 se supone que ya deber矛a funcionar con 鈥渃ode .鈥

Por si alguien llega a presentar este problema al configurar node.js o al correr 鈥楥ode Runner鈥:
鈥楽oluci贸n (FIX): NodeJs: 鈥榥ode鈥 no se reconoce como un comando interno o externo, programa o archi鈥︹

Una posible soluci贸n:
https://www.youtube.com/watch?v=0EYq0u_6wo8

Que buenos pluggins para ayudarnos y adornar todo