handHOME

Cómo configurar Prettier y ESLint en VSCode

Son 2 cosas, los formatters, y los linters

El primero nos formatea el código siguiendo unos estándares que convierten JavaScript en un lenguaje ordenado, y el segundo nos vigilan nuestro código señalando errores, esto es, antes de ejecutar el programa

Cuando te acostumbras a esto, irte a lenguajes que no tienen estas ventajas es simplemente un atraso

El formatter más famoso es prettier, y el linter más famoso es eslint (aunque también es un formatter)

Para su instalación, lo más rápido es incluir en nuestro package.json los paquetes de eslint y prettier y hacerlo bajo devDependencies, ya que son paquetes que utilizaremos para controlar nuestro código pero no los necesitaremos para que nuestro código se ejecute

Y aparte de los paquetes evidentes, también incluimos el babel-eslint que nos sirve para incluir características más nuevas o experimentales que ESLint no soporta, eslint-plugin-react para añadir normas específicas para React, y eslint-config-prettier, que nos servirá para desactivar toda la parte de eslint que pueda interferir con prettier

  "devDependencies": {
    "eslint": "*",
    "prettier": "*",
    "babel-eslint": "*",
    "eslint-config-prettier": "*",
    "eslint-plugin-react": "*"
  },

O hacerlo con yarn

yarn add --dev eslint prettier babel-eslint eslint-config-prettier eslint-plugin-react

Para configurarlo lo primero es decirles a eslint y prettier que se entiendan, y para eso creas el archivo .eslintrc.json que en mi caso es el siguiente

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": ["prettier"],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "strict": 0,
    "indent": ["error", 2],
    "semi": ["error", "never"]
  }
}

O la que utilizo ahora para astro sin preocuparme de babel ni react

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": ["plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "strict": 0
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  }
}

Aquí tienes la documentación

Y para prettier tienes el archivo .prettierrc, donde yo modifico un par de cosas que a mi me molestan

{
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid",
  "printWidth": 120
}

Aquí tienes la documentación

Luego para vscode vamos con las extensiones

El texto está en blanco!
Enviado!