Configuración Inicial

Configuración del Editor

A menudo un proyecto, dependiendo de su complejidad, es programado por más de un desarrollador, es entonces muy normal encontrarse con la situación en la que una “programadora Ana” tendrá que modificar el archivo “X” que creó un “programador Paul”. Por buenas prácticas, antes de que la“programadora Ana” empiece el cambio en el archivo “X”, debe considerar los estándares que el “programador Paul” definió, esto ayudará a poder evitar futuros conflictos en la forma de trabajo de los archivos y como consecuencia, ayudar a que el proyecto sea más mantenible.

Parte de los estándares de programación son los estilos de código, que no son nada más que la estandarización de los formatos de los archivos. Por ejemplo:

¿Usamos espacios o tabs? ¿Cuál será el ancho de cada tab? ¿Permitimos los espacios en blanco al final de cada línea?

Para eso existe EditorConfig, para ayudarnos a automatizar y centralizar los estilos de código, usarlo es tan sencillo como instalar el plugin respectivo a nuestro IDE y agregar a nuestro proyecto un archivo .editorconfig con todos los estilos de códigos que necesitemos.

Utilizando EditorConfig

1. Lo primero que debemos hacer como lo mencioné antes, es instalar el plugin de Editorconfig en nuestro IDE .

2. Creamos en la raíz de nuestro proyecto el archivo .editorconfig

3. Definimos los estilos de código.

.editorconfig

# http://editorconfig.org
root = true

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

[*.md]
trim_trailing_whitespace = false

Linter

Utilizar un linter puede mejorar dramáticamente tu código JavaScript, puede ayudarte a escribir código más limpio, más fácil de entender y de mantener.

Qué hace un linter?

Un linter revisa tu código buscando errores y problemas de sintáxis, se asegura también que el código que escribes siga un estilo, esto ayuda a que todo el código escrito en un proyecto se vea como si hubiera sido escrito por la misma persona, y eso lo hace mas legible y mantenible.

Configurar un linter para tu proyecto de NodeJS

Utilizaremos ESLint. Lo que necesitas para configurar ESLint para un proyecto de Node.JS es:

• Un plugin de ESLint para el editor que utilizas

• Dependencias de ESLint en tu proyecto de Node

• Archivo de configuración de ESLint

• El set de reglas de ESLint que quieres aplicar a tu código (En éste caso las de Airbnb)

Instalar ESLint

En el directorio de tu aplicación de Node (backend-js-shopping), necesitarás instalar ESLint como dependencia de desarrollo

• Si prefieres utilizar npm

• npm i -D eslint

Instalar eslint-config-airbnb (set de reglas de ESLint de airbnb)

• Utilizando npm como manejador de paquetes

• npm info "eslint-config-airbnb@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "eslint-config-airbnb@latest"

  Qué es esto? las últimas versiones de las dependencias de eslint-config-airbnb en el momento que escribo éste post están rotas, lo que hace éste comando es extraer la informacion en formato JSON de las dependencias de eslint-config y pasarlas como parámetro al comando npm install para instalar las versiones estables.

Crear el archivo .eslint.js

En la raíz de tu proyecto crea el archivo .eslintrc.js con el contenido:

.eslintrc.js

module.exports = {
  "env": {
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "extends": "airbnb",
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "no-unused-expressions": 0,
    "no-underscore-dangle": 0,
  }
};

Instalar ESLint

En Visual Code el paquete a instalar se llama eslint.

Usando ESLint

Una vez instalado en el editor si todos los pasos se hicieron correctamente, el plugin va a empezar a iluminar secciones del código que no cumplan con las reglas del linter de airbnb y necesiten ser cambiadas

Commit

Ahora es el momento de hacer nuestro commit, para ello ejecutamos los siguientes comandos:

# Agregar todos los archivos al commit
git add .

# Realizar el commit con un mensaje
git commit -am "Initial configuration"

Repositorio: Initial configuration