Forem: Mario Blas 🇮🇨

Integrando Prettier con ESLint

Mario Blas 🇮🇨 — Thu, 27 Feb 2020 18:24:02 +0000

Este post fue publicado originalmente en mayo de 2019.

En el siguiente artículo vamos a conocer Prettier y cómo podemos integrarlo con ESLint para mejorar nuestro flujo de trabajo.

Configurar estas herramientas será una inversión que haremos una vez y sus beneficios los notaremos durante todo el proyecto.

¿Qué es ESLint?

Si aun no lo conocéis, ESLint es un linter para JavaScript y JSX. Ayuda a identificar e informar sobre patrones que se encuentran en el código con el objetivo de evitar errores.

Principalmente, hay que tener en cuenta que las reglas de los linters se dividen en dos categorías:

Reglas de formato

Por ejemplo: longitud de línea máxima, tipo de indentación, tamaño de la indentación...

Reglas de calidad del código

Por ejemplo: no permitir variables que no se usen, no permitir declaraciones de variables globales...

Son las más importantes que ofrecen los linters ya que pueden detectar errores en el código.

¿Qué es Prettier?

Prettier es una herramienta para formatear el código, tiene soporte para HMTL, CSS, JavaScript, JSX, TypeScript, GraphQL... entre otros.

Se encarga de garantizar que el código se ajuste a un estilo consistente de manera automática. Para ello, analiza el código y lo re-escribe cada vez que se ejecuta.

Su objetivo es acabar con los debates sobre el estilo del código, de ahí que no trate de cubrir todos los casos de uso. Es una herramienta dogmática, por tanto, los debates sobre estilo simplemente pasarán a ser debates sobre qué opciones de Prettier usar.

Gracias a Prettier ahorraremos tiempo y energía en hacer que el estilo de nuestro código esté normalizado.

Configuración

Como hemos visto, cada herramienta tiene sus puntos fuertes e intentaremos aprovechar lo mejor de cada una. En definitiva, ESLint estará enfocado en lo relacionado a la calidad del código mientras que Prettier se encargará de su formato.

En la siguiente configuración nos centraremos en su uso con JavaScript.

Instalar Dependencias

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier: desactiva las reglas de ESLint que entren en conflicto con Prettier.
eslint-plugin-prettier: añade una regla que formatea el contenido usando Prettier.

Configurar ESLint

En nuestra configuración de ESLint añadiremos las siguientes líneas:

// .eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  rules: {
    'prettier/prettier': 'warn',
  },
}

De esta manera será ESLint el que se encargará de ejecutar Prettier.

He añadido eslint:recommended a modo de ejemplo, se puede usar la configuración que deseemos. Por otro lado, también he configurado que los elementos que no cumplan con las reglas de Prettier se muestren en forma de aviso, si queremos que muestren en forma de error simplemente hay que sustituir 'warn' por 'error'.

Configurar Prettier

En la configuración de Prettier vamos a añadir algunas reglas, por ejemplo:

// .prettierrc.js

module.exports = {
  printWidth: 100,
  singleQuote: true,
  trailingComma: 'all',
};

Script de npm

Añadiremos la siguiente línea en los scripts de nuestro package.json

"scripts": {
  "lint:fix": "eslint --fix ./src"
}

ESLint corregirá los problemas que sea capaz de resolver automáticamente y aplicará el estilo al código con Prettier, tal y como hemos configurado anteriormente.

Resultado

Si con la configuración anterior ejecutamos el script con npm run lint:fix obtendremos para el siguiente fichero de ejemplo un resultado como este:

Antes de ejecutar el script

Después de ejecutar el script

Ahora podremos cambiar entre proyectos con distintas configuraciones de manera cómoda, no deberemos preocuparnos si usar 2 espacios o 4, comillas simples o dobles… simplemente nos centraremos en la solución que estamos implementando.

Integración con VSCode

Vamos a configurar VSCode para que ejecute ESLint y dé formato al código cuando guardemos un fichero, para ello:

Instalaremos la extensión ESLint en caso de no tenerla.
Abriremos preferencias de VSCode y haremos click en el primer icono situado en la esquina superior derecha para editar el fichero settings.json y añadimos lo siguiente:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Conflictos con la opción editor.formatOnSave

En caso de tener configurado que VSCode formatee nuestro código al guardar un fichero (con la opción editor.formatOnSave), deberemos desactivarla para JavaScript y JSX, ya que de este proceso se encargará ESLint.

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Pre-commit hook

Si queremos asegurarnos de que el código que se sube al repositorio cumple con las reglas establecidas, podemos configurar un hook de git para automatizar el proceso.

Una de las ventajas es que es agnóstico al editor que utilicemos, además de ser muy útil si trabajamos en equipo.

Instalar dependencias

npm install --save-dev husky lint-staged

husky: es una herramienta que facilita la configuración de hooks de git.
lint-staged: es una herramienta para ejecutar linters sobre los ficheros que se encuentren preparados para el commit.

Configurar Husky

En la configuración de Husky añadiremos lo siguiente:

// .huskyrc.js

module.exports = {
  hooks: {
    'pre-commit': 'lint-staged'
  }
};

Ahora cada vez que vayamos a hacer un commit antes se disparará el hook pre-commit y este ejecutará lint-staged.

Configurar Lint-staged

En la configuración de Lint-staged añadimos lo siguiente:

// .lintstagedrc.js

module.exports = {
  '*.js': ['eslint --fix', 'git add']
};

Para todos los ficheros con extensión .js ejecutará ESLint para corregir los problemas automáticamente y dará formato a los ficheros preparados, una vez modificados vuelve a prepararlos para el commit.

Recuerda que ESLint ejecutará Prettier tal y como vimos antes.

Repositorio de ejemplo

En el siguiente enlace he preparado un ejemplo con el mítico create-react-app usando la configuración de ESLint que ofrece por defecto (la cual no incluye reglas de estilo) e integrando lo que hemos visto en el artículo.

capua / cra-prettier-eslint-example

Ejemplo para el artículo: Integrando Prettier con ESLint

¡Nos vemos en la próxima publicación!

Desplegando apps en Meteor con Heroku y mLab

Mario Blas 🇮🇨 — Wed, 12 Feb 2020 20:05:23 +0000

Este post fue publicado originalmente en noviembre de 2016.

A continuación veremos como desplegar nuestra aplicación Meteor en 6 sencillos pasos. Los servicios que usaremos para ello son:

Heroku, una plataforma como servicio (PaaS) que permite crear, ejecutar y escalar aplicaciones web, su medio principal para el despliegue es git.

mLab, una plataforma de base de datos como servicio (DBaaS) para alojar y gestionar bases de datos MongoDB, actualmente ofrece alojamiento en AWS, Azure y Google.

0. Requisitos para empezar

Registrarnos en mLab.
Registrarnos en Heroku.
Instalar Heroku CLI.

1. Crear la Base de datos

Creamos una base de datos Mongo con el proveedor y plan que más se adapte a nuestras necesidades.

En el apartado Single-node el plan Sandbox es gratuito y ofrece 0.5Gb aunque no se aconseja para producción.

Asignamos un nombre a la base de datos, pulsamos en Create new MongoDB deployment y una vez creada entramos en ella.

Para terminar hacemos click en la pestaña Users, creamos un nuevo usuario y listo.

En la parte superior podemos ver nuestra MongoDB URI, que será la que usaremos más adelante y que tiene un aspecto parecido a lo siguiente:

mongodb://<dbuser>:<dbpassword>@ds<012345>.mlab.com:<12345>/<dbname>

2. Autenticarse con Heroku CLI

Desde la terminal nos identificamos con nuestras credenciales usando el siguiente comando:

$ heroku login

3. Crear la app en Heroku

Nos situamos en nuestro proyecto git y creamos la aplicación en Heroku indicando el nombre que deseamos.

Además podemos definir el nombre con el que vamos a referirnos a nuestro repositorio remoto y la región donde queremos alojar nuestra aplicación (por defecto son heroku y us respectivamente).

$ cd <my-git-project>
$ heroku apps:create <app-name> --remote <remote-name> --region <us|eu>

4. Aplicar un buildpack

El buildpack preparará nuestra aplicación Meteor para ser ejecutada por Heroku.

En este ejemplo vamos a utilizar el genial meteor-buildpack-horse.

$ heroku buildpacks:set https://github.com/AdmitHub/meteor-buildpack-horse.git

5. Configurar las variables de nuestra aplicación

# Variable para la URL
$ heroku config:set ROOT_URL="https://<app-name>.herokuapp.com"

# Variable para enlazar a nuestra Base de datos (MongoDB URI)
$ heroku config:set MONGO_URL="<mlab-uri>"

# Settings de Meteor (suponiendo que están en settings.json)
$ heroku config:set METEOR_SETTINGS="$(cat settings.json)"

6. Desplegar

Una vez tenemos todo configurado lo último que tenemos que hacer es un git push a la rama master de nuestro repositorio remoto en Heroku.

$ git push <remote-name> master

Bonus

Para terminar os dejo algunas anotaciones que os pueden ser de utilidad…

*Trabajar en equipo

Para que el resto del equipo de desarrollo pueda desplegar sus cambios tan solo tienen que añadir el repositorio remoto a su proyecto git usando:

$ heroku git:remote -a <app-name> -r <remote-name>

*Mostrar el log

Si queremos ver el log de nuestra aplicación tan solo tenemos que ejecutar:

$ heroku logs

*Integrar add-ons

Podemos agregar herramientas y servicios desde la terminal con el siguiente comando:

$ heroku addons:create <proveedor:plan>

*Desplegar una rama distinta de master

Lo haremos de la misma manera que haríamos con git:

$ git push <remote-name> <local-branch>:master

*Trabajar con varias instancias de Heroku

Si tenemos varios repositorios remotos de Heroku en un mismo proyecto para ejecutar algunos comandos tendremos que especificar la aplicación, por ejemplo:

# Development
$ heroku config:add METEOR_SETTINGS="$(cat settings-development.json)" --app <dev-app-name>

# Production
$ heroku config:add METEOR_SETTINGS="$(cat settings-production.json)" --app <prod-app-name>

Intro a Sublime Text

Mario Blas 🇮🇨 — Wed, 05 Feb 2020 20:44:24 +0000

Este post fue publicado originalmente en abril de 2015.

Como buenos gladiadores además de estar bien preparados es importante familiarizarnos con nuestras armas. Cuanto más cómodos y adaptados estemos en nuestro entorno de batalla mayor será nuestro rendimiento. Una de las herramientas más importantes para un programador es su editor.

Personalmente somos de los que prefieren editor de texto en vez de IDE por su simplicidad y ligereza, para nuestros menesteres no nos hace falta más.

Sublime Text en su versión 3, a pesar de estar en beta es bastante estable y funciona realmente bien. Al abrirlo por primera vez sientes que viene casi “pelado” y es una de sus ventajas, ya que se puede personalizar prácticamente todo.

Sublime Text recién abierto.

Algunos de sus puntos fuertes son:

Ligereza.
Capacidad de personalización.
Selecciones y cursores múltiples.
Paleta de comandos.
Movernos entre ficheros, buscar en los mismos, ir a una función o linea determinada…
Cambiar de proyecto instantáneamente, recordando el estado del área de trabajo.
Acceso a una infinidad de paquetes creados por la comunidad.

¡A las armas!

A continuación os voy a mostrar algunas de mis preferencias.
Una de las primeras cosas que debemos hacer después de instalar Sublime es instalar Package Control siguiendo los pasos que indican en su web.
Para instalar un paquete tenemos que abrir la paleta de comandos (⌘+⇧+P) o (⌃+⇧+P), escribir install package y buscar por el nombre del paquete que deseamos.
En la web de Package Control podemos ver los paquetes de moda, nuevos y populares, además de mucha información extra.

Packages

Emmet

Para mejorar el workflow cuando trabajamos con HTML y CSS.

Echad un vistazo al ejemplo de su web y dedicadle un rato a ver su cheat sheet, no tiene desperdicio.

Sublime Linter

El uso de un linter se hace esencial para escribir código mejor, más limpio y con menos bugs, empleando buenas prácticas de programación.

Los linters no están incluidos en el paquete así que además tendremos que instalar los que deseemos. En concreto los que más suelo usar son JSHint, CSSLint y SCSSLint.

Para obtener información acerca de un error en concreto tan solo hemos de situar el cursor en la linea del error y podremos ver una ver una breve descripción en la barra de estado (situada en la parte inferior de la ventana), zona donde también podemos ver el número total de errores en cualquier momento.

SublimeLinter-csslint

SideBarEnhancements

Ofrece una mejora a las operaciones que tiene por defecto el sidebar de Sublime. Por ejemplo: abrir con, copiar, cortar, mover, copiar rutas…

DocBlockr

Ayuda a comentar bien nuestro código completando todo lo posible a partir del elemento que comentemos. Soporta lenguajes como JavaScript, TypeScript y Objective C entre otros.

GitGutter

Como su nombre indica nos muestra en el gutter el estado de cada linea, ya sea insertada, modificada o eliminada, comparando las diferencias con un commit/rama/tag específico.

BracketHighlighter

Resalta la apertura y cierre de etiquetas, comillas, paréntesis, llaves, corchetes… Muy útil sobre todo cuando tenemos que tocar algo de spaguetti code.

Podemos mostrar los indicadores en el gutter, en el código, o en ambos a la vez, así como aplicarles distintos estilos.

BracketHighlighter con la configuración por defecto.

Project Manager

Muy cómodo para ordenar y manejar proyectos olvidándonos de donde están los ficheros. Es una mejora a la funcionalidad que trae Sublime por defecto.

Otros paquetes que uso:

jQuery, Underscorejs snippets, Handlebars, SCSS, Meteor Snippets, Color Highlighter, ColorPicker, EditorConfig...

¿Cuáles son vuestros preferidos?

Configuración

La configuración de Sublime Text se basa en ficheros JSON, podéis verla en Preferences → Settings — Default y los atajos de teclado en Preferences → Keybindings — Default.

Para añadir o sobrescribir los valores hemos de editar los ficheros que terminan por * — User, veamos algunos ejemplos:

Settings — User:

{
  // Resalta la linea actual
  "highlight_line": true,

  // Añade una linea en blanco al final del documento
  "ensure_newline_at_eof_on_save": true,

  // Elimina los espacios al final de las lineas al guardar
  "trim_trailing_white_space_on_save": true,

  // Modifica los separadores de palabras eliminando '-' para CSS
  "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",

  // Permite hacer scroll aunque se haya terminado el documento
  "scroll_past_end": true
}

Keybindings — User:

[
  // Indenta todo el documento
  { 
    "keys": ["super+shift+r"], 
    "command": "reindent", "args": { "single_line": false } 
  },

  // Intercambia los keybindings de "pegar" y "pegar e indentar"
  { "keys": ["super+v"], "command": "paste_and_indent" },
  { "keys": ["super+shift+v"], "command": "paste" },

  // Resalta el fichero actual en el sidebar
  { "keys": ["alt+shift+r"], "command": "reveal_in_side_bar" }
]

Sincronización

Si sois usuarios de Dropbox u otro servicio similar podéis sincronizar todas vuestras preferencias y ahorraros mucho trabajo para estar cómodos cada vez que cambiéis de equipo o sistema operativo.

Si vuestro Dropbox no está en la ubicación por defecto, debéis sustituir ~/Dropbox por vuestra ubicación.

Las siguientes instrucciones son para OS X, para otro sistema operativo las tenéis aquí.

En vuestro primer equipo:

$ cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/
$ mkdir ~/Dropbox/Sublime
$ mv User ~/Dropbox/Sublime/
$ ln -s ~/Dropbox/Sublime/User

En vuestros otros equipos:

$ cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/
$ rm -r User
$ ln -s ~/Dropbox/Sublime/User

Forem: Mario Blas 🇮🇨

Integrando Prettier con ESLint

¿Qué es ESLint?

Reglas de formato

Reglas de calidad del código

¿Qué es Prettier?

Configuración

Instalar Dependencias

Configurar ESLint

Configurar Prettier

Script de npm

Resultado

Integración con VSCode

Conflictos con la opción editor.formatOnSave

Pre-commit hook

Instalar dependencias

Configurar Husky

Configurar Lint-staged

Repositorio de ejemplo

capua / cra-prettier-eslint-example

Ejemplo para el artículo: Integrando Prettier con ESLint

Desplegando apps en Meteor con Heroku y mLab

0. Requisitos para empezar

1. Crear la Base de datos

2. Autenticarse con Heroku CLI

3. Crear la app en Heroku

4. Aplicar un buildpack

5. Configurar las variables de nuestra aplicación

6. Desplegar

Bonus

*Trabajar en equipo

*Mostrar el log

*Integrar add-ons

*Desplegar una rama distinta de master

*Trabajar con varias instancias de Heroku

Intro a Sublime Text

¡A las armas!

Packages

Emmet

Sublime Linter

Side​Bar​Enhancements

DocBlockr

GitGutter

BracketHighlighter

Project Manager

Otros paquetes que uso:

Configuración

Sincronización

SideBarEnhancements