Configurando ESLint y Prettier en Visual Studio Code para desarrollo con React

Adrian Galicia • June 22, 2020

Introducción

Antes de que comencemos con la guía me gustaría compartir con ustedes lo siguiente

The ratio of time spent reading (code) versus writing is well over 10 to 1 … (therefore) making it easy to read makes it easier to write. -Bob Martin, Clean Code

Cuando escribimos código regularmente nos encontramos con tareas repetitivas que pueden consumir mucho tiempo y me refiero a formatear y apegarnos a una guía de estilo afortunadamente contamos con ESLint y Prettier que nos ayudan con las tareas antes mencionadas.

Configurando ESLint

Las dependencias que utilizaremos para este propósito son:

Para instalarlas ejecutamos el siguiente comando:

yarn add --dev --peer \
eslint-plugin-import \
eslint-plugin-react \
eslint-plugin-react-native \
eslint-plugin-react-hooks \
eslint-plugin-jsx-a11y \
eslint-config-airbnb \
babel-eslint \
eslint

Ahora modificamos el archivo o creamos .eslintrc.js de nuestro proyecto y debe quedar así

module.exports = {
  parser: 'babel-eslint',
  extends: 'airbnb',
  plugins: ['react', 'react-native', 'jsx-a11y', 'import'],
  rules: {
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
  },
  extends: ['plugin:prettier/recommended'],
};

Configurando Prettier

Las dependencias que utilizaremos para este propósito son:

Para instalarlas ejecutamos el siguiente comando:

yarn add --dev eslint-config-prettier eslint-plugin-prettier
yarn add  --dev --exact prettier

Agregamos a nuestro proyecto el archivo .prettierrc y escribimos el siguiente código

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

Configurando VSCode

Para finalizar con el proceso y tener información en tiempo real de eslint y prettier vamos a instalar los siguientes plugins

Agregamos a nuestro archivo de configuración settings.json de VSCode las siguientes opciones para

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true
  }
}

Espero que esta guía les sirva para sus proyectos, sí es así corran la voz, hasta pronto 🤙