Configuraci贸n del entorno de desarrollo para este curso

2/25
Recursos

Aportes 51

Preguntas 12

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

La instalaci贸n de paquetes : npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier pritter -D

El comando tiene un peque帽o typo pero no es nada grave

npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D

Configuraci贸n del entorno de desarrollo

鉅鉅鉅鉅
Hola!, les dejo las definiciones de los siguientes conceptos para reafirmar las bases que ya tenemos sobre el desarrollo. 馃榿
鉅鉅鉅鉅
Git Ignore:
鉅鉅鉅鉅
Son archivos ignorados que suelen ser artefactos de compilaci贸n y archivos generados por el equipo que pueden derivarse de tu fuente de repositorios o que no deber铆an confirmarse por alg煤n otro motivo. Ejemplo: node_modules.

Linters:
鉅鉅鉅鉅
Herramientas que realizan la lectura del c贸digo fuente

  • Detectan errores/warnings de c贸digo
  • Variables sin usar o no definida, llave sin cerrar鈥

鉅鉅鉅鉅
Nodemon:
鉅鉅鉅鉅
Es una herramienta que ayuda a desarrollar aplicaciones en Node.js al reiniciar la aplicaci贸n aut贸maticamente cuando hay cambios en el archivo.
鉅鉅鉅鉅
gitignore.io:
鉅鉅鉅鉅
Contiene la configuraci贸n del entorno que espec铆fiques
鉅鉅鉅鉅
Editor Config:
鉅鉅鉅鉅
Todos los desarrolladores tendr谩n la misma configuraci贸n del proyecto.

Aqu铆 les dejo la configuraci贸n de .editorconfig

# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.js]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false

**La config del eslint para copiar desde los apuntes **

{
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "extends": ["eslint:recommended", "prettier"],
  "env": {
    "es6": true,
    "node": true,
    "jest": true
  },
  "rules": {
    "no-console": "warn"
  }
}

Pasos:

  1. Crear carpeta del proyecto
  2. Inicializar proyecto con npm
  3. Inicializar git
  4. Crear archivos de configuraci贸n
  5. Crear archivo index.js
  6. Crear scripts dentro del package.json
  7. Instalar dependencias
  8. Probar entornos desde los scripts npm
  1. gitignore para las configuraciones
  2. En VS instalar el Pluying EditorConfig
    3.En Terminal ejecutar: npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D
  3. npm run dev
  4. npm run start

Adicionalmente se pueden hacer un par de configuraciones adicionales si utilizan visual studio code

Instalar el plugin Prettier y creamos en la raiz del proyecto el archivo .pretttierrc y dentro colocamos esta configuraci贸n

{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 60
}

y creamos el directorio .vscode y dentro el archivo settings.json con el siguiente contenido

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.printWidth": 90,
  "editor.formatOnSave": true
}

Esto har谩 que nuestro editor formatee autom谩ticamente los archivos con el est谩ndar elegido al guardar el archivo

La web de gitignore.io

Les dejo la p谩gina para obtener la configuraci贸n del archivo .gitignore: https://toptal.com/developers/gitignore

Resumen del video:
Configuramos nuestro entorno de trabajo:

  • gitignore
  • linters
  • nodemon: servidor de desarrollo

.
Creacion de archivos necesarios:

  • Comando npm init -y:
    para crear el archivo package.json y gestionar nuestros paquetes y crear tareas.
  • Comando git init
    para iniciar un repositorio
  • Creamos un archivo .gitignore:
    para indicar que debe ignorar git
  • Creamos archivo .editorconfig:
    para configurar nuestro editor
  • Creamos archivo .eslintrc.json
    para las reglas de nuevas practicas

.
Contenidos de los archivos:

# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.js]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false

  • eslint
{
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "extends": ["eslint:recommended", "prettier"],
  "env": {
    "es6": true,
    "node": true,
    "jest": true
  },
  "rules": {
    "no-console": "warn"
  }
}

Ahora instalamos dependencias de desarrollo

npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prittier -D

Finalmente escribimos las tareas en package.json

  "scripts": {
    "dev": "nodemon index.js",
    "start": "node index.js",
    "lint": "eslint"
  },

Aqu铆 les dejo mis apuntes de las clases en Notion. Espero que les sirvan! 馃槂
.
https://bit.ly/3mLoAVQ

Les recomiendo esta extensi贸n para VSC, para generar el archivo .gitignore

https://marketplace.visualstudio.com/items?itemName=piotrpalarz.vscode-gitignore-generator

Hola,

Ac谩 les comparto un skeleton para sus proyectos en Javascript Vanilla, se incluyen algunas de las recomendaciones sugeridas por el instructor (no todas, pero si otras), se incluyen el .gitignore, babel, webpack, eslint, prettier, algunas de GitHub, el private: true para evitar que por defecto tus paquetes se publiquen como 鈥減煤blicos鈥 en la web de NPM, etc鈥 -> skeleton javascript vanilla

Hecho! Soy la 煤nica que piensa que el profesor explica muy bien?

Si vienen del curso de fundamentos de Node.js, posiblemente ya tengan instalado nodemon de manera global, verificando con el comando:

npm list -g --depth 0

As铆 que solo deje el comando de la siguiente manera:

npm i eslint eslint-config-prettier eslint-plugin-prettier prettier -D

Tengo el siguiente problema,

  1. levanto mi server en linux
  2. detengo el server
  3. levanto nuevamente
  4. Error porque el puerto usado ya est谩 ocupado

AL parecer por m谩s que detengo el servidor, el proceso sigue corriendo en segundo plano, siempre tengo que matar el proceso manualmente y es un poquito aburrido hacerlo.
Hay una forma de que no me pase eso?

Estos son los comandos de la terminal que se ejecutan una vez que se crea la carpeta del proyecto para tener el repositorio y los archivos listos para configurar:

npm init -y
git init
touch .gitignore .editorconfig .eslintrc.json index.js

Configuracion lograda!!! git local y git hub hechos!!!

Si, si me funciona. Ja ja ja.

**Configuraci贸n del Entorno de desarrollo
**

  • Seleccionar un espacio en tu disco y crear una carpeta
  • Aperturamos nuestro proyecto en el editor de codigo
  • Volvemos a nuestra consolo he inicializamos npm
npm init -y
// -y nos da una configuracion por defecto
  • Aprovechamos he inicializamos Git
git init
  • Creamos el archivo .gitignore en nuestro proyecto de forma manual

  • Creamor el archivo .editorconfig para la configuraci贸n de nuestro edito, asi todos los desarrolladores tendran la misma configuracion para el editor

    馃挕 Para que esto funcione correctamente debemos tener instalado en nuestro VS la extensi贸n EditorConfig for VS Code

  • Creamos el archivo .eslintrc.json para todas las reglas de buenas practicas

  • Creamos el archivo index.js para iniciar nuestr app

Hasta ahora solo hemos creado los archivos vacios, procedemos a llenarlos

# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.js]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false
  • eslintrc:
{
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "extends": [
    "eslint:recommended",
    "prettier"
  ],
  "env": {
    "es6": true,
    "node": true,
    "jest": true
  },
  "rules": {
    "no-console": "warn"
  }
}

Ahora agregamos algunas tareas a nuestro packaje.json

{
  "name": "my-store",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    **"dev": "nodemon index.js",
    "start": "node index.js",
    "lint": "eslint" //Con esto nos aseguramos de cumplir con las buenas practicas**
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Luego de esto, para que funcione necesitamos instalar nuestras dependencias de desarrollo, asi que vamos a nuestra terminal:

npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D

// la -D indican que son solo dependencias para entorno de Desarrollo

Una vez completada la instalaci贸n de las dependencias, procedemos a probar nuestros entornos de Desarrollo y producci贸n

npm run dev
npm run start

Si te da el error de
unexpected token '.'
Yo personalmente utilizo NVM, solo googlea NVM e instala, te permitir谩 tener varias versiones de Node.
Con la versi贸n 16.13.2 funciona sin ning煤n problema ya que es un bug de NPM version 8

Me salen estos errores y quede estancado si alguien puede aydarme a solucionar seria muy bueno

Nunca habia visto un .gitignore tan bloated :V! WTF!!!

La instalaci贸n de paquetes :

npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D

ESLint

ESlint es un analizador de c贸digo que permite organizar las concesiones de software en funci贸n de ciertas reglas.

.

Configuraci贸n

  • root Indica que esta configuraci贸n es para el proyecto, en general.
  • parserOptions Define la versi贸n de ECMAScript y el tipo de recursos, por ejemplo m贸dulos.
  • extends Permite agregar reglas a la configuraci贸n.
  • env Define el tipo de entornos que ejecuta la aplicaci贸n.
  • rules Define las propiedades que representan estados de producci贸n.

.

{
	"root": true,
  "parserOptions": {
      "ecmaVersion": 2020
  },
  "extends": ["eslint:recommended", "prettier"],
  "env": {
    "browser": true, // support frontend apps
    "node": true // support backend apps
  },
	"rules": {
	  "no-console": "error"
	}
}

VScode

Es un editor de texto/c贸digo que permite instalar extensiones seg煤n sea la necesidad

.

Tipos de archivos

VSCode posee diferentes archivos con los cuales podemos configurar nuestro workspace (conjunto de proyectos) o workdirectory (directorio de proyecto).
.

  • launch.json Permite lanzar procesos, por lo general adjudicados a nuestro debugger.
  • settings.json Permite extender la configuraci贸n general de nuestro VSCode con la particular del directorio o espacio en curso.

.

Configuraci贸n

{
  "configurations": [
    {
      "name": "Global debugger",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/index.js",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
      "envFile": "${workspaceFolder}/src/config/.env"
    },
  ]
}
  • name nombre del proceso
  • type entorno a operar
  • request el tipo del proceso a ejecutar
  • program archivo a ejecutar
  • runtimeExecutable definici贸n el engine o binario
  • envFile adjuntar las variables de entorno
{
	"editor.formatOnSave": true
}
  • editor.formatOnSave configurar el editor para formatear al guardad

Me sent铆 pro instalando las dependencias.

Ya quedo todo los requisitos,

Hola comunidad !
Si te encuentras con el siguiente error:
**npm : File cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at **
al tratar de correr un comando en powershell o en VSC
Lo solucion茅 de la siguiente forma:

  1. abre el poweshell como administrador
  2. navega a la carpeta del proyecto.
  3. corre el comando: Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
  4. Elije la opcion si

esto permitir谩 que tengas el permiso para correr el comando en tu proyecto.

Links y codes mencionados:

gitignore:
https://www.toptal.com/developers/gitignore

#################
#code .editorconfig

# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.js]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false

#################

//code eslintrc.json

{
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "extends": ["eslint:recommended", "prettier"],
  "env": {
    "es6": true,
    "node": true,
    "jest": true
  },
  "rules": {
    "no-console": "warn"
  }
}

/////////////////////////////

//code package.json

 "scripts": {
    "dev": "nodemon index.js",
    "start": "node index.js",
    "lint": "eslint"
  },

/////////////////////////

Dependencias de Desarrollo a instalar desde consola:

npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D

Este profesor explica muy bien 馃槂 este curso me parece muy interesante a por ello 馃槂

npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D

.editorconfig:

# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.js]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false

.eslintrc.json:

{
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "extends": [
    "eslint:recommended",
    "prettier"
  ],
  "env": {
    "es6": true,
    "node": true,
    "jest": true
  },
  "rules": {
    "no-console": "warn"
  }
}

package.json:

{
  "name": "my-store",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon index.js",
    "start": "node index.js",
    "lint": "eslint"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^8.5.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "nodemon": "^2.0.15",
    "prettier": "^2.5.1"
  }
}

npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D

entorno listo 馃槃

Si quieren usar yarn para la instalaion de paquetes en lugar de npm

yarn add nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier
--dev

npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier pritter -D

Si no les corre el script dev pueden reemplazarlo de esta manera.

"dev": "nodemon ./js/index.js localhost 3000"

En mi caso yo ten铆a una carpeta dentro llamada js

Que buena esa herramienta para que todos tengamos la misma configuraci贸n del entorno de desarrollo

Tareas en el package.json

Creaci贸n del gitignore

index.js

Estas dependencias permiten que nuestra pagina se refresque de manera aut贸noma

Configuraci贸n del entorno de desarrollo

Mucho contenido importante resumido en 7 minutos de clase me gustan estas clases asi continuando con el ultimo curso del JS Challenge

instalacion

npm install nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D

probar entornos de desarrollo y producci贸n:

npm run dev

Se corre nodemon y lo que hace es que escucha todos los archivos javaScript

Correr en modo producci贸n:

npm run start

Se corre como un servidor de node.

Para evitar error al ejecutar el comando dev si previamente esta corriendo node lo modifique as铆:

"scripts": {
  "dev": "killall node; nodemon index.js",
  "start": "node index.js",
  "lint": "eslint"
},

Tener en consideraci贸n que hace un kill a node en general lo que puede ser peligroso si tienes otros servicios corriendo con node, en mi caso lo mantengo controlado porque solo lo utilizo para pr谩cticas.

Instalaci{on de paquetes

npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D

Saludos Platzinautas
Todo queda ejecutandose OK
Gracias.

aprend铆 mucho en esta clase, espero que se vuelva cada vez mejor este curso