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

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:

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

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

• 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

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.

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

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