Configuración del entorno de desarrollo para este curso

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

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

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.

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

Para los que les interese, en la ultima version de Node.js trae un flag llamado --watch, eso nos evita tener que instalar nodemon. Solo se necesita agregar en el package.json lo siguiente:

	"dev": "node --watch index.js"

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

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:

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

• .editorconfig:
  Debemos instalar el plugin de VSC y escribir el siguiente 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

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

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 “archivo 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"
}

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

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

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

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

• gitinore: accedemos a la página https://www.toptal.com/developers/gitignore y seteamos las especificaciones para que nos genere automaticamente la configuración recomendada

• 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:

{
  "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

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 “pú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

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

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

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 

Aunque en el archivo está, dejo por acá el link de editorConfig para quien quiera leer un poquito de esto y “no pasar entero” 🖖

Esta es la segunda vez que haré este curso, de verdad me gustó bastante. Let’s 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

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

El script del lint está incompleto. Por sí mismo si ejecutamos npm run lint, aunque tengamos errores de formato, no nos los mostrará en consola ya que el script está incompleto 📝.
·
En el archivo package.json hay que modificar el script del lint de la siguiente forma:

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

En la clase el script que se escribe es simplemente "lint": "eslint", sin embargo así no funciona ya que es necesario indicar la ubicación del lugar donde se va a ejecutar el eslint, de ahí que se le agregue el punto del final en esta corrección ✨.

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 ‘{
“parserOptions”: {
“ecmaVersion”: 2018
},
“extends”: [
“eslint:recommended”,
“prettier”
],
“env”: {
“es6”: true,
“node”: true,
“jest”: true
},
“rules”: {
“no-console”: “warn”
}
}’ > .eslintrc.json

------> en package.json , en scripts
"dev": “nodemon index.js”,
“start”: “node index.js”,
“lint”: “eslint”

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.

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 mi me daba fallo el comando:

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

Me salia por la terminal que probara añadiendo al final --force, pero seguía fallando. Entonces me salia en la terminal que pusiera:

sudo chown -R 501:20 "/Users/mariano/.npm

Ya después de eso me funcionó el comando:

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

Espero que ayude a alguien más 😃

Ya habia visto este curso anteriormente, lo estoy revisitando para volver a repasar lo que se vio en este curso.

Visto desde el punto de vista acutal con un poco mas de entendimiento y conocimientos, creo que al crear el entorno de desarrollo instalando linters o cualquier otra cosa, creo que es importante dar a entender un poco mas para que se usa, cuando usarlo, que otras opciones hay etc.

P.D. El curso se bueno, el profesor es bueno, aprendi mucho en este curso, simplemente digo que no se deberia nunca codear algo en un curso y no explicar todo lo que comente, esto aplica para cualquier libreria o configuracion

Si quieren saber un poquito más sobre el “EditorConfig” les recomiendo este videíto de youtube del canal Makigas que lo explica bastante bien ✨.
·
https://www.youtube.com/watch?v=ORUFii_Qsyg
·

La instalación de paquetes :

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

Para que lo hagan más rápido y fácil, sólo copien la configuración del package.json del profesor:

{
  "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": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.1",
    "nodemon": "^2.0.12",
    "prettier": "^2.3.2"
  }
}

Luego ejecuten el comando npm install en la carpeta del proyecto. Esto hará que npm instale automáticamente, a partir de la configuración del package.json, todas las dependencias y herramientas que instaló el profe exactamente, con la misma versión y todo para evitar errores de compatibilidad.

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:

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

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:

{ “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”: “^7.32.0”, “eslint-config-prettier”: “^8.3.0”, “eslint-plugin-prettier”: “^3.4.1”, “nodemon”: “^2.0.12”, “prettier”: “^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

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

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

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

Instalaci{on de paquetes

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