Configurar EsLint y Prettier junto con VScode
Tags: webdev, vscode, javascript, prettier
Published: 2021-05-04 00:19:06

## ¿Que es EsLint?

ESLint es una herramienta de código abierto enfocada en el proceso de "lintig" para javascript (o más correctamente para ECMAScript)
ESLint es la herramienta predominante para la tarea de "limpiar" código javascript tanto en el servidor (node.js) como en el navegador

Bueno, ESLint es una herramienta de "linting", por lo que te puede ayudar a:

- Mostrarte errores de sintaxis.
- Mostrarte errores cuando no se siguen buenas prácticas.
- Proveer sugerencias para mejorar tu código.
- Mantener un estilo consistente en tu código o reforzar reglas internas de tu propio equipo.

## ¿Que es Prettier?

Es una herramienta para formatear el código, tiene soporte para HMTL, CSS, JavaScript, JSX, TypeScript, GraphQL, etc.

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.

## ¿Que es VScode?

Es un editor de código multiplataforma, totalmente gratis desarrollado por Microsoft

Incluye soporte para la depuración, control integrado de Git, resaltado de sintaxis, finalización inteligente de código, fragmentos y refactorización de código. 

También es personalizable, por lo que los usuarios pueden cambiar el tema del editor, los atajos de teclado y las preferencias.

# Configuración:

Ahora configuraremos las dependencias que necesitaremos, lo primero es crear nuestro proyecto utilizando 

```bash
# Inicializa un proyecto utilizando npm para instalar paquetes
npm init --yes
# ó
npm init -y
```

Después de eso instalaremos las dependencias necesarias para empezar a configurar Eslint y Prettier

```bash
# --sabe-dev Guarda las dependencia en forma de desarrollo
npm install --save-dev eslint prettier eslint-config-prettier 
eslint-plugin-prettier
```

### EsLint

La forma de configurar esLint es creando un archivo de configuración el cual podemos crear o podemos utilizar un comando para crear este archivo según nuestras necesidades:

```bash
# .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.

O podemos utilizar el siguiente comando que nos mostrara unos pasos para tener pre configurado nuestro archivo de EsLint

```bash
# Crea el archivo eslint
npx eslint --init
```

Nos mostrara una pequeña serie de pasos para crear nuestro archivo de EsLint:

Primero seleccionaremos como queremos usar EsLint, si solo para revisar la sintaxis, encontrar problemas o forzar un estilo del codigo

![Forzar estilo de codigo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtelav1z4a6napajyd9t.png)

Ahora seleccionaremos el tipo de módulos queremos usar, si utilizar `import` o `require`

![Modulos en eslint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fevafw8pd690184vjl0.png)

Ahora podemos seleccionar el Framework que utilizaremos en nuestro proyecto, si **React**, **VueJs** o **Vanilla Javascript**

![FrameWork para eslint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0njafakbtkpetfqx0jbf.png)

También podemos seleccionar si queremos o estamos utilizando TypeScript

![Typescript con Eslint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jaafdmxbiqu8awa5pp8d.png)

Y ahora podemos seleccionar el tipo de **Enviroment** o **Entorno** para la ejecución de nuestro proyecto si en el Navegador o entorno de NodeJs

![Entorno de web o nodejs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8gatyjvzp2ipcbxk4yj.png)

Y ahora una parte un tanto importante.

Podemos utilizar una guía de estilo ya definida, inspeccionar nuestros archivos JavaScript, etc

En este caso utilizaremos una style guide ya definida

![Styled Guide de eslint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jupehqqlhwsmu30x0ghf.png)

Ahora puedes seleccionar que guía de estilo quieres utilizar en tu proyecto, siendo estas las mas populares, están muy bien construidas y con buenas configuraciones

Note:

Si estas utilizando React, una recomendación es utilizar la guía de Airbnb

![Airbnb guide](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/murvm23j84jpkj3n3aay.png)

Seleccionaremos el formato que queremos utilizar para nuestro archivo de configuración.

Esto es basado en gustos o preferencias de cada proyecto, en este caso utilizaremos **JSON** pero cualquier otro formato funciona de la misma manera

![formato JSON](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/henxdusoi5f6cuf00n70.png)

Después de estas opciones comprobara las dependencias necesarias, y si no están te mostrara que puedes instalar las dependencias necesarias dependiendo de la configuración antes hecha, y las colocara como dependencia de desarrollo.

![Devdependencies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0sdcuu99zqtw864ik6f.png)

Con esto tendremos nuestro archivo **.eslintrc.json**

### Prettier

Ahora configuremos Prettier, en la misma documentacion se ha recomendado usar un diferentes formatos como JSON, YAML, TOML y JS
En este ejemplo usaremos JSON que es lo mas sencillo para empezar a configurar

Entonces crearemos un archivo **.prettierrc** y dentro del archivo colocaremos las opciones que necesitamos en nuestro proyecto

```bash
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}
```

Si tenemos un archivo especifico que queremos o no formatear, por ejemplo los archivos de **Test**
Podemos colocar en expresiones regulares, que se ignore todos los archivos con cierta extensión

Inclusive dentro de cada cierto archivo puedes colocar ciertas opciones especificas

```bash
{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true,"tabWidth": 2
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}
```

Ahora dentro de nuestro archivo de configuración podemos crear diferentes reglas las cuales ayudaran a dar un mejor estilo a nuestro código o para seguir buenas practicas

![Buenas practicas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/usd48w5jr5k522adl16t.png)

### Scripts

Con todo listo podemos crear **scripts** lo cual nos ayudara a automatizar el "linteo" o formatear nuestros archivos simplemente con un comando

Dentro de nuestro package.json vamos a la sección de scripts, tendremos uno llamado "test" que no utilizaremos por el momento, o si ya tienes mas scripts en tu proyecto, simplemente agrega una coma y puedes colocar estas 3 opciones que explicaremos cada una de sus funciones

![Scripts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sugeajc1g8pk0fkp3vjt.png)

- **Lint**
    Ejecuta eslint para "lintear" y revisar la sintaxis de **todos** nuestros archivos en nuestro proyecto

- **Lint-fix**

    Ejecuta eslint con el flag **—fix** que hace que si encuentra un estilo que no se sigue una regla la cual causa un conflicto con eslint, la corrige

- **Format**

    Ejecuta Prettier para formatear todos nuestros archivos

Ahora solo ejecuta **npm nombreDelComando**

```bash
npm run lint
npm run lint-fix
npm run format
```

### VScode

Si estas utilizando el editor de código Visual Studio Code o VScode

Puedes integrar **EsLint y Prettier** dentro del mismo editor utilizando las extensiones con el mismo nombre:

![Eslint extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3el8c9mnf7nba9i4hhw.png)

![Prettier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7per4r0yfui73qofigz.png)

Probablemente te aparezca con la palabra **Install** le darás click ahí para instalarlas

Después de que estén instaladas, nos iremos a la configuración de Visual Studio Code

Puedes presionar el shortcut **ctrl + ,** o en la esquina inferior donde hay un símbolo de una tuerca, darás click y darás en settings

![Ajustes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/727pyp0v6v2j8iywpnnh.png)

Te saldrá una ventana nueva, y arriba a la derecha estará un símbolo o icono el cual debes presionar para abrir la configuración en formato JSON ya que así es como se configura VScode

![Ajustes de VsCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eu62n0jm1g2rjbcc08qn.png)

Y agregaremos estas configuraciones **básicas** para tener funcionando las extensiones de Eslint y Prettier en nuestro editor sin necesidad de crear los archivos, lo cual es mas recomendable utilizar en proyectos con mas personas ya que cada desarrollador y desarrolladora tiene su propia configuración

```bash
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
 },
```

También podemos definir estilos en nuestra configuración para un lenguaje especifico:

```bash
"[javascript]": {
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.formatOnSave": true,
	"editor.tabSize": 2
},
"[python]": {
	"editor.tabSize": 4
},
```

Y con esto tendremos listo nuestra integración de eslint y prettier en vscode :D