Configuraci贸n del entorno de desarrollo para este curso

2/27
Recursos

Aportes 66

Preguntas 17

Ordenar por:

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

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
Uno de mis problemas con muchos cursos de platzi, y que me di cuenta cuando empec茅 a tomar cursos externos, es que no se centran en el tema y confunden a la gente m谩s novata con configuraciones extra que no quedan claras para que son. Hay buenas pr谩cticas que son buena idea ponerlas en pr谩ctica pero si lo mezclan con cursos sin hacer una aclaraci贸n de que necesitan saber antes es muy problematico

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

  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

La web de gitignore.io

Hola a todos, como dato curioso desde la version 18 de NodeJS ya no es necesario que se use nodemon, ya que se puede usar el comando node --watch 鈥渁rchivo a ejecutar en tiempo real鈥 para realizar exactamente la misma funcionalidad. Les comparto la forma en la que lo estoy trabajando.

{
  "name": "my-store",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "node --watch index.js",
    "start": "node index.js",
    "lint": "eslint"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

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"
  },

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

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

Configuraci贸n con Typescript

Esta es mi configuraci贸n para tomar este curso usando Typescript. La hice lo m谩s similar a la del profesor.

Instalar los paquetes

yarn add @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint nodemon prettier ts-node typescript -D

Inicializar Typescript config

tsc --init

Tambi茅n puedes copiar el package.json y correr uno de los sig. comandos

// npm
npm install
// yarn
yarn install

package.json

{
  "name": "playground",
  "version": "1.0.0",
  "main": "index.ts",
  "description": "API for a store",
  "license": "MIT",
  "scripts": {
    "dev": "nodemon index.ts",
    "start": "node ./dist/index.js",
    "lint": "eslint . --ext .ts"
  },
  "author": "Enrique Ruvalcaba",
  "devDependencies": {
    "@types/node": "^18.11.9",
    "@typescript-eslint/eslint-plugin": "^5.42.0",
    "@typescript-eslint/parser": "^5.42.0",
    "eslint": "^8.27.0",
    "nodemon": "^2.0.20",
    "prettier": "^2.7.1",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4"
  }
}

.editorconfig

# Esta configuraci贸n es para que todos los desarrolladores tengan una misma configuraci贸n

# 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

.eslintignore

node_modules
dist
build

.eslintrc.json

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint",
    "prettier"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": 1,
    "no-console": 1
  },
  "env": {
    "es6": true,
    "node": true,
    "jest": true
  }
}

.prettierignore

node_modules/*
package.json
package-lock.json
yarn.lock

Todos los archivos van directo en la carpeta ra铆z

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

**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

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

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

Esta es la segunda vez que har茅 este curso, de verdad me gust贸 bastante. Let鈥檚 go!

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

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.

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

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

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

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

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

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.

.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"
  }
}

tener instalado EditorConfig for VS Code, en visual

npm init -y
touch .gitignore .editorconfig .eslintrc.json index.js
curl 鈥https://www.toptal.com/developers/gitignore/api/node,windows,visualstudiocode,linux,macos鈥 >.gitignore

echo '# 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鈥 > .editorconfig

echo 鈥榹
鈥減arserOptions鈥: {
鈥渆cmaVersion鈥: 2018
},
鈥渆xtends鈥: [
鈥渆slint:recommended鈥,
鈥減rettier鈥
],
鈥渆nv鈥: {
鈥渆s6鈥: true,
鈥渘ode鈥: true,
鈥渏est鈥: true
},
鈥渞ules鈥: {
鈥渘o-console鈥: 鈥渨arn鈥
}
}鈥 > .eslintrc.json

------> en package.json , en scripts
"dev": 鈥渘odemon index.js鈥,
鈥渟tart鈥: 鈥渘ode index.js鈥,
鈥渓int鈥: 鈥渆slint鈥

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

-----> npm run dev --> modo desarrollo
-----> npm run start --> modo producci贸n

Si est谩s usando la versi贸n 18.11.0 o superior de Node, ya no es necesario usar nodemon. solo con usar el comando:

node --watch index.js

Se realiza lo mismo sin dependencias extras.

Aunque en el archivo est谩, dejo por ac谩 el link de editorConfig para quien quiera leer un poquito de esto y 鈥渘o pasar entero鈥 馃枛

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

Saludos Platzinautas
Todo queda ejecutandose OK
Gracias.

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.

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

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!!!

A partir de la versi贸n de 18.11.0 de node, existe un comando que permite imitar la funcionalidad de nodemon:

node --watch index.js

OJO: al d铆a de hoy (02/03/2023) este feature se encuentra en una etapa experimental y puede cambiar en cualquier momento.

Lo interesante de esta lecci贸n es que apenas conozco la configuraci贸n de los archivos del entorno de configuraci贸n y de las buenas pr谩cticas, ademas del uso de nodemon que nos permite ahorrar la parte engorrosa de ejecutar en node js de que siempre se guarda y luego ejecute el comando para correr el servidor, la verdad me gust贸 esta clase.

Si estan utilizando WSL en windows 11 con Ubuntu**, puede que nodemon no les funcione correctamente (no actualiza), asi que para esto puede ejecutarlo en mode legacy:

nodemon -L index.js

Generamos un directorio donde se va a desarrollar nuestro Proyecto. (mkdir (Make directory))

Configuraciones de Buenas pr谩cticas por TERMINAL.

En la terminal:
npm init -y (Iniciar un proyecto node con config default)
git init (Para inicializar el repositorio en git)

Configuraciones de Buenas pr谩cticas para ARCHIVOS de configuraci贸n.

Archivo-> .gitignore: 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.

	Esta configuraci贸n la tomas por defecto de la p谩gina gitignore.io

Pulsamos Create

Copiamos todo lo que nos muestra esta p谩gina y lo pegamos en el archivo .gitignore

Archivo-> .editorconfig:(Descargar Extensi贸n)

Pegar este contenido:

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

Editor Config:
Todos los desarrolladores tendr谩n la misma configuraci贸n del proyecto.

Archivo-> .eslintrc:

Pegar este contenido:

{ 鈥減arserOptions鈥: { 鈥渆cmaVersion鈥: 2018 }, 鈥渆xtends鈥: [ 鈥渆slint:recommended鈥, 鈥減rettier鈥 ], 鈥渆nv鈥: { 鈥渆s6鈥: true, 鈥渘ode鈥: true, 鈥渏est鈥: true }, 鈥渞ules鈥: { 鈥渘o-console鈥: 鈥渨arn鈥 } }

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鈥

Creamos un archivo index.js

Modificamos el Archivo package.json:

{ 鈥渘ame鈥: 鈥渕y-store鈥, 鈥渧ersion鈥: 鈥1.0.0鈥, 鈥渄escription鈥: 鈥溾, 鈥渕ain鈥: 鈥渋ndex.js鈥, 鈥渟cripts鈥: { 鈥渄ev鈥: 鈥渘odemon index.js鈥, 鈥渟tart鈥: 鈥渘ode index.js鈥, 鈥渓int鈥: 鈥渆slint鈥 }, 鈥渒eywords鈥: [], 鈥渁uthor鈥: 鈥溾, 鈥渓icense鈥: 鈥淚SC鈥, 鈥渄evDependencies鈥: { 鈥渆slint鈥: 鈥淾7.32.0鈥, 鈥渆slint-config-prettier鈥: 鈥淾8.3.0鈥, 鈥渆slint-plugin-prettier鈥: 鈥淾3.4.1鈥, 鈥渘odemon鈥: 鈥淾2.0.12鈥, 鈥減rettier鈥: 鈥淾2.3.2鈥 } }

Instalamos Nodemon:

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

Es una herramienta que ayuda a desarrollar aplicaciones en Node.js al reiniciar la aplicaci贸n autom谩ticamente cuando hay cambios en el archivo.Contiene la configuraci贸n del entorno que especifiques

Ahora vamos a la Terminal y ejecutamos:
npm run dev (Corriendo de desarrollo)
Cancelamos el proceso
npm run start (Corriendo de Producci贸n)

Con esta configuraci贸n lista podemos avanzar a preparar el servidor Web

iniciamos un proyecto con npm

npm init -y 

inicializamos git

git init 

instalamos dependencias

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

modificamos los scripts de nuestro package
package.json:

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

creamos un archivo para ignorar otros
.gitignore:

# Created by https://www.toptal.com/developers/gitignore/api/node,windows,linux,macos
# Edit at https://www.toptal.com/developers/gitignore?templates=node,windows,linux,macos

### Linux ###
*~

# temporary files which can be created if a process still has a handle open of a deleted file
.fuse_hidden*

# KDE directory preferences
.directory

# Linux trash folder which might appear on any partition or disk
.Trash-*

# .nfs files are created when an open file is removed but is still being accessed
.nfs*

### macOS ###
# General
.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon


# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

### macOS Patch ###
# iCloud generated files
*.icloud

### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional stylelint cache
.stylelintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# vuepress v2.x temp and cache directory
.temp

# Docusaurus cache and generated files
.docusaurus

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

### Node Patch ###
# Serverless Webpack directories
.webpack/

# Optional stylelint cache

# SvelteKit build / generate output
.svelte-kit

### Windows ###
# Windows thumbnail cache files
Thumbs.db
Thumbs.db:encryptable
ehthumbs.db
ehthumbs_vista.db

# Dump file
*.stackdump

# Folder config file
[Dd]esktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msix
*.msm
*.msp

# Windows shortcuts
*.lnk

# End of https://www.toptal.com/developers/gitignore/api/node,windows,linux,macos

creamos un archivo de configuraci贸n de editor y instalamos la extensi贸n editorConfig for VS 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 

creamos un archivo para definir reglas de buenas practicas
.eslintrc.json

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

creamos un archivo ra铆z
index.js:

console.log("express app")

una vez todo configurado podemos correr nuestro proyecto ejecutando en la terminal el comando

npm run dev 

Excelente ayuda!

El profesor sapeeee!

Si, si me funciona. Ja ja ja.

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

Me sent铆 pro instalando las dependencias.

Ya quedo todo los requisitos,

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

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

entorno listo 馃槃

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

Instalaci{on de paquetes

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