Instalación y configuración de VSCode

Clase 7 de 17 • Curso de Prework: Buenas Prácticas y Entorno de Desarrollo en macOS 2019

Resumen

Si la primera mejor amiga del programador es la línea de comandos, es momento de instalar y configurar el segundo mejor amigo del programador: el editor de código.

Existen multiples editores de código, para la escuela de JavaScript vamos a utilizar Visual Studio Code. Vamos a añadir diferentes plugins para VSCode:

Git Blame: va a mostrar el autor de la línea de código en la que estemos trabajando.
ESLint: es una herramienta de análisis de código estático para identificar patrones problemáticos encontrados en el código JavaScript, o sea, nuestro linter. Debemos instalar y configurar eslint para que siga el estilo de código que le indiquemos.
Color Highlight: resalta el color que estemos escribiendo.
SASS: es un preprocesador de CSS.

Cristobal Peña

student•

La ruta del curso no está clara. Visual Studio fue instalado y el entorno confirgurado en el clase 2. Creo que estas redudancias pueden generar errores. Por eso hay tanta genet con problemas para instalar lo que el profesor solicita. Debió haber clases especiales para windows y para mac, pues está claro que hay diferencias. Por ejemplo para instal my zsh en windows Ubuntu no permite algo tan simple como pegar. Sin embargo el profesor lo puede hacer en su Mac. En definitiva el curso parece algo errático y los comentarios lo están demostrando. Ojalá lo mejoren en el futuro para que no nos hagan perder tanto tiempo.

Armando García

student•

Totalmente de acuerdo contigo. Para ser el pre-work, me es complicado pensar que con lo mal organizado que está alguien que se encuentre con tantos problemas considere continuar. Es normal que aprender algo nuevo duela, sin embargo, no está justificado que Platzi haga que te duela aún más.

Julián David Palacios Cárdenas

student•

franco JH

student•

A los que lñe sale ese tipo de error solo escriban el comando: sudo npm install -g eslint y luego les pedira su contraseña, y listo

Julio Gragirena

student•

gracias por la ayuda

Bernardo Aguayo Ortega

student•

Gracias maestro

Gabriel Quevedo

student•

PARA LOS USUARIOS DE WINDOWS Se me desconfiguró todo en esta clase... y lo arreglé :').. cualquier comando npm no era válido, me aparecía lo siguiente: : not foundram Files/nodejs//npm: 3: : not foundram Files/nodejs//npm: 5: /mnt/c/Program Files/nodejs//npm: 6: Syntax error: word unexpected (expecting "in")

PARA SOLUCIONARLO ES NECESARIO INSTALAR NODE Y NPM OTRA VEZ PERO UNO TRAS OTRO..

Paso 1 Ejecutar:

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -

Este comando nos permite usar sudo en la linea de comandos linux instalada.. casi lloro cuando lo logré :') Paso2 Ejecutar:

sudo apt-get --purge remove node

Este comando elimina nodejs en modo desquisiado!!! (Si no les funciona escriban lo mismo pero con js "sudo apt-get --purge remove nodejs" porque windows es tonto y no sabe asociar ;D) Paso 3 Ejecutar:

sudo apt-get install -y nodejs

Esto les instalará node y con la flag -y se pueden ir a tomar un tecito, porque se demora :cc Paso 4 Ejecutar:

sudo apt-get install -y build-essential

Este comando es el que nos permitirá instalar dependencias de node y otros sin problemas :') tbn casi lloro con este.. es hermoso! Paso 5 Ejecutar:

sudo apt-get install npm

Instalamos npm, y vamos por unos snaks porque los boleros son más rápidos :ccc

Paso 6 Ejecutar:

export PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin

ESTE COMANDO ES IMPORTANTÍSIMO, nos permite ejecutar como corresponde nuestro npm, el que tiene mal direccionado windows.. por eso no podemos ejecutar el pinche npm..

Finalmente Podemos ejecutar

node -v
npm -v

Y la vida es maravillosa... Consejo: Si los aportes de nuestros apartados no les funciona, busquemos en internet, a veces somos cómodos y si en los comentarios no está la respuesta nos quedamos ahí... y si encuentran la respuesta, compártanla :c todos estamos con ganas de aprender, pero BUSQUEMOS, internet tiene tooodo no nos quedemos sin hacer naaara :ccc #yonosoyelosoperez ^^ Saludos.

Camilo Andrés Pérez Galeano

student•

Ejecuto el comando del paso 6 pero no me deja. Hay algún espacio en el comando? export PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin

Iván Eduardo Consuegra Acero

student•

Viejo no sabes cuanto tiempo estuve dando vueltas buscando la solución a este problema: El terminal de VSCode no reconocía el npm y ya había confirmado que todo estaba bien desde Hyper. Lo único que necesitaba era ejecutar el paso 6 que muestras aquí !! Como bien dices es importantísimo ejecutarlo, pues sino npm es como si no existiera. Mil gracias!

Eduardo Antonio Rivero Rivera

student•

Es muy frustrarte que lo que hace el instructor no funciona en todas las plataformas, la configuración que el hace en IOs marca montones de errores en Windows subsistem linux y es mucho tiempo perdido tratando de setear el entorno de trabajo igual que el instructor sin tener un camino claro. El taller debería estar orientado multiplataforma y ser lo mas claro posible. Y sobre todo contestar los comentarios de los alumnos todos están batallando montones y solo entre alumnos se apoyan. Tache para teamPlatzi

PD. gracias a la comunidad enserio son de gran ayuda.

Javier Biurrun

student•

pues un año después parece que ésto sigue igual.... menudo inicio de escuela... creo que no hubiera costado nada hacer diferentes videos para diferentes plataformas. montón de tiempo perdido y sigo sin solución...

Felipe de Jesus Ramirez Rodriguez

student•

¿Que es EsLint? ESLint es una herramienta de análisis de código estático para identificar patrones problemáticos encontrados en el código JavaScript.

Instalación de EsLint sudo npm install -g eslint o sudo npm i -g eslint (das permisos de administrador)
Configuración de Eslint npx eslint --init
❯ To check syntax and find problems ❯ JavaScript modules (import/export) ❯ React ? Does your project use TypeScript? (y/N) N ? Where does your code run? Browser ❯ Use a popular style guide ? Which style guide do you want to follow? Airbnb: https://github.com/airbnb/javascript ? What format do you want your config file to be in? JavaScript ? Would you like to install them now with npm? (Y/n) Y

Miguel Angel Escurra

student•

Muchas gracias! Es justo lo que necesitaba. Saludos!

Braian Suarez

student•

Muuuchisimas gracias!! Una vez mas la comunidad salvando las papas. Un saludo

Luis Salas

student•

Para los que usamos windows en mi caso al principio me marcaba muchos errores pero luego de leer varios comentarios de aportes logre instalar todo bien y los pasos fueron los sguientes.

como no tenia el el proyecto de ejemplo de git que colocan en el video utilice el que se hizo al principio del curso -abri ubuntu como administrador -cd /mnt/c (para estar en el disco C)
luego que estoy en el disco C voy a la carpeta Users (cd Users) -ya que estoy dentro de Users me voy a la carpeta que cree en el inicio en mi caso luisDev, luego me fue a la carpeta portafolio que es donde esta el proyecto de node. -estando en esa carpeta inicio Vs Code con Code . (punto) -ya con el proyecto abierto verifico el bash y lo cambio por el ZSH -reinicio el vs code y lo inicio nuevamente desde ubuntu -inicio la terminal y coloco el comando: *sudo npm install -g eslint -luego de que se instala coloco el comando: *sudo npx eslint --init -seguimos el video todo normal hasta la parte de : *Would you like to install them now with npm? Yes se instala todo normal pero mandaba el siguiente error:

npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself. -luego de leer he investigar tenia que instalar typescript -se instala con el siguiente comando en la terminal de vs code: *sudo npm install typescript -luego que se instala volvemos a usa el comando: *sudo npx eslint --init -y hacemos el resto del video normalmente.

Juan Manuel Hernandez Marcano

student•

gracias hermano tu aporte si me ayudo bastante

Guillermo Sanchez

student•

Uy anotese un 10!!

Gracias.... la pregunta es porque toca lanzar VScode desde ubuntu y no se puede normal? lo intente un montón de veces incluso con sudo todo.

Gracias!

ROLANDO ALFREDO GAVILAN

student•

Tuve varios errores El primero fue que no encontraba " Terminal" en help ++Solucion esta aparte, al lado de help:++ Funciono OK El segundo que no encontraba zsh en la terminal de VS ++Solucion; En mi terminal ZSH = WSL++ : Funciono OK El tercero : No podia instalar npm me salia error EACCES ++Solucion: agregue sudo al inicio ++: Funciono Ok El Cuarto: No me aparecia nada en el comando npx ++Solucion: cargue de nuevo el codigo sin npx++: Funciono Ok

Rafael Alejandro Vargas González

student•

Héroe.

Diego Michael Zabala Montenegro

student•

Estaba apunto de renunciar a mi carrera de desarrollador hasta que vi lo que publicaste de que ZSH = WSL. Te amo, estaré eternamente agradecido.

Daniel Riveiro

student•

Para los que tiene problemas con EsLint

Deben iniciar Visual como administrador.
Deben de estar en la carpeta que estamos trabajando (Portfolio)
Colocan el siguiente comando en la terminal (sudo npm install -g eslint)
Luego el comando (npx eslint --init), siguen los pasos en el video.
Listo

Carlos Nicolas Gonzalez Cabrera

student•

muchas gracias se soluciono mi problema

Fabio Leonardo Fuentes Melendez

student•

Muchas gracias compañero me ayudó con el problema que tenía, aquí es donde nos damos cuenta que windows es muy celoso con todo lo que se instala que tenemos que reiniciar programas, ejecutarlos como administrador y hasta reiniciar el equipo.

Daniel Ramirez Ramirez

student•

Si como a mi, al ejecutar :

npx eslint --init

Te arrojo estos errores:

Es porque los archivos de la clase son (por asi decirlo) del final de la clase, no del principio, es decir que desde que descargues los archivos ya se incluyen los archivos:

.eslintrc.json
package.json
package-lock.json

El problema con esto es que a pesar de ya estar ahí no nos corregirá la sintaxis ni nada, esto se soluciona ELIMINANDO estos archivos, y ejecutando el siguiente comando:

npm init

Ahora ya podemos ejecutar npx eslint --init y nuestro proyecto se configurara correctamente.

Nick David Fuenmayor Molinares

student•

Excelente amigo, muchas gracias

Nick David Fuenmayor Molinares

student•

Hay que tener claro que el archivo package.json no hay que borrarlo lo que hay que hacer es eliminar la dependencia de ESlint que se encuentra al final del documento, porque ESlint necesita tener este archivo creado con anterioridad para su funcionamiento.

roberto vargas castro

student•

Es un desmadre esto, hacen dos videos con distintos profesores para instalar las cosas y se crea mucha desinformación, para ser una plataforma de paga deberían tener mas seriedad.

César Paredes

student•

NO DEBES OBVIAR PASOS, NO TODOS TENEMOS UN MAC EN CASA.

Antony Jose Cabeza Rauseo

student•

Una sugerencia para el profesor,

Veo pertinente realizar otra clase configurando VSCode en Windows, debido a que, leyendo todos los aportes, me di cuenta que la mayoría de los usuarios de Windows tenemos problemas, llevo todo el día buscando soluciones para que me funcione la terminal y creo que si estoy viendo una clase es para que el profesor explique como se tiene que hacer, ya que desconozco mucho del tema y hago lo que puedo.

No me malinterpreten, excelente explicación, pero solo si tienes una Mac. Si eres usuario de Windows arréglatelas por tu cuenta.

Hay una oportunidad de mejora muy grande para los que usamos Windows que deberían tener en consideración.

Ramdhei López Arcila

student•

A quienes les salte en la parte de "npx eslint --init" que les hace falta un "package.json" hagan ésto (recuerden correr el editor con permisos de administrador):

En la línea de comandos, ir al directorio de su proyecto (o a donde quieran instalar eslint)

cd/mnt/c/Users/Ram/Documents/ProyectoX

Cuando estén en en el directorio, escriban lo siguiente

npm init --yes

Eso creará un package.json con los atributos necesarios, ya que si lo hacemos con un comando "touch" sólo creará un archivo vacío y saltarán más errores (experiencia propia).

Vuelvan a escribir npx eslint --init y todo funcionará correctamente.

Estaré atento a sus preguntas.

Víctor Rolack

student•

Gracias!

David Saavedra Vázquez

student•

Muchas muchas gracias amigo! No sabes cuanto me sirvió

Enrique Orozco Gaytán

student•

Aquí comparto la configuración que se siguió para completar exitosamente el procedimiento:

NOTA:

Después de ejecutar los pasos anteriores, continuar desde el paso 1: sudo npm install -g eslint

Camilo Echeverry

student•

Muchas gracias !! casi no puedo avanzar de ese error...

Juan Amedh Sanchez Salas

student•

muchas gracias, tenia media hora atorado y me funciono perfecto

Obed Tzay

student•

Posibles problemas y sus soluciones:

zsh no aparece en la terminal de VSC: en visual studio code no nos aparecerá zsh, si no que wsl(si estamos en Windows).
Si al ejecutar npm install -g eslint, te tira errores, deberás de ejecutarlo anteponiendo la palabra sudo.
Si al ejecutar npx eslint --init te muestra error, prueba ejecutarlo sin npx, sólo eslint --init.

Igor Vitriago

student•

Gracias Crack!

Obed Tzay

student•

De nada bro! :)

Sergio Armando Medina Chaparro

student•

Por si les salen un error con la instalación del eslint minuto 4:43, es posible que sea porque necesitan derechos de administración. Usen este código con sudo:

sudo npm install -g eslint

Ponen la contraseña y listo.

Por cierto, recuerden entrar por la consola de ubuntu como en la clase 2 para que les aparezca la extension zsh en la terminal :)

Fidel Eduardo Moreno Fierro

student•

Amigos vengo del futuro!! Los que tengan problemas con windows vayan a la clase 10 "Como instalar NodeJS" para solucionarlos.

Romina Montero

student•

Bueno, mi problema en particular fue desde:

npm install -g eslint

La solucion no fue tan simple, con la consola zsh corriendo en VS intenten ejecutar los comando con (sudo su). Luego, la version de nodejs debe ser minimo 12.x, la version que automáticamente descargar ubuntu es 8.x y por alguna razón no reconoce los comandos npm y npx (en mi caso particular). Por tanto, el comando que me permitió actualizar nodejs a la version 12.x es la siguiente:

curl -sL https://deb.nodesource.com/setup_12.x | sudo bash -

Despues de descargar nodejs v12.x debes instalarlo:

sudo apt-get install -y nodejs

Luego de verificar que ya tienes nodejs v12.x , puedes seguir con los comandos del profesor de instalar eslint globalmente. (en mi caso con sudo por delante).

sudo npm install -g eslint

Y listo, ya ejecuta los comandos npm y npx tambien.

Joaquin Roman Vazquez Zuñiga

student•

Gracias me funciono.

Marco Antonio Flores Robles

student•

a mi no me pregunta el estilo, sabes por que?

Jonathan Garcia Centurion

student•

para los que tengan el siguiente error o uno parecido ejemplo del error:

npm ERR! Cannot read property 'match' of undefined

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\tivac\AppData\Roaming\npm-cache\_logs\2018-06-06T16_16_57_256Z-debug.log

la solución es la siguiente borrar el archivo de nombre package-lock.json y volver a ejecutar el comando

npx eslint --init

y con esto esta solucionado, pido disculpas si alguien tiene este error y no le respondo en su mismo comentario o pregunta es que hay demasiados comentarios si pueden respondan las preguntas que tengan este error como interrogante, gracias.

Angel Andres Miranda Castillo

student•

gracias por tu comentario, ya estaba deseperado

Pedro Hernández Villegas

student•

¿Buenas tardes por qué no responden las inquietudes de los estudiantes?. Sin esas respuestas no podemos seguir el curso.

No aparece ZSH 2 El comando npm install -g eslint no esta funcionando a algunos les sale error
el comando npx eslint --init, a algunos nos sale zsh: command not found: npx igual pasa cuando se utiliza "sudo".

Por favor necesitamos respuestas de los profesores, pues parece que ustedes solo cuelgan videos y realmente no dan una clase o retroalimentan a los estudiantes y son problemas que vienen desde hace rato.

Muchas gracias

Leisy Karina Algarra Fernandez

student•

Estoy trabajando con Windows. Para hacer los cambios que se solicitan en VS en la terminal seleccione wsl actualice e instale eslint con el siguiente comando :npm install -g eslint. Inicialmente presentó un error pero automaticamente se corrigió, de momento todo va bien.

Mayerly Prieto Muñoz

student•

Tampoco me sale zsh que podemos hacer?