Cómo habilitar Linting al guardar con Visual Studio Code y ESLint

Introducción

Las guías de estilo nos permiten escribir código coherente, reutilizable y limpio. Estas reglas se pueden automatizar y aplicar con linters. Esto le ahorrará tener que comprobar manualmente la sangría o usar comillas simples o dobles.

Visual Studio Code puede admitir el control de errores en cada guardado. Su flujo de trabajo puede beneficiarse de realizar controles de errores frecuentes para solucionar problemas pequeños a lo largo del tiempo en lugar de solucionar muchos problemas importantes que pueden retrasar la implementación del código.

En este tutorial, instalará ESLint, construirá reglas y las habilitará codeActionsOnSaveen Visual Studio Code.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Descargue e instale la última versión de Visual Studio Code .
• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .

Este tutorial se verificó con Node v16.6.2, npmv7.21.0, eslintv7.32.0 y Visual Studio Code v1.59.1.

Paso 1 – Configuración del proyecto

Existen varios linters para distintos lenguajes y tipos de proyectos. Para las necesidades de este tutorial, necesitará tener ESLint instalado y configurado.

Primero, crea un nuevo directorio de proyecto:

mkdir eslint-save-example

Luego, navegue hasta el directorio del proyecto:

cd eslint-save-example

Inicializar un nuevo proyecto:

npm init -y

Y instalar eslint:

npm install eslint@7.32.0

Luego, inicializa eslint:

npx eslint --init

Responda la pregunta con las siguientes opciones:

? How would you like to use ESLint? To check syntax and find problems? What type of modules does your project use? JavaScript modules (import/export)? Which framework does your project use? None of these? Does your project use TypeScript? No? Where does your code run? Browser, Node? What format do you want your config file to be in? JavaScript

En este punto, tendrás un nuevo proyecto con package.jsony .eslintrc.jsarchivos.

Para utilizar ESLint en Visual Studio Code, debe instalar la extensión ESLint disponible en el mercado de Visual Studio Code .

Paso 2 – Creación de un ejemplo con errores

A continuación, cree un archivo JavaScript que rompa intencionalmente reglas comunes, como espaciado y sangría inconsistentes, comillas y punto y coma:

índice.js

const helloYou    = (name)= {  name = 'you' || name   ;  console.log("hello" + name + "!" )}

Abra el archivo en Visual Studio Code y observe las indicaciones de violaciones de las reglas de ESLint:

helloYouestá subrayado. Al pasar el cursor sobre esta línea en Visual Studio Code, se muestra el siguiente mensaje de información sobre herramientas: 'helloYou' is assigned a value but never used. Esto se debe a que la regla .eslint(no-unused-vars)está habilitada por eslint:recommended.

Podemos abordar este problema utilizando la variable:

índice.js

const helloYou    = (name)= {  name = 'you' || name   ;  console.log("hello" + name + "!" )}console.log(helloYou)

Para abordar las demás cuestiones, tendremos que añadir reglas.

Paso 3 – Agregar reglas

eslint --initcreó un archivo llamado eslintrc.js(o .ymlo .jsonsi esa es la opción que seleccionó):

.eslintrc.js

module.exports = {  'env': {    'browser': true,    'es2021': true,    'node': true  },  'extends': 'eslint:recommended',  'parserOptions': {    'ecmaVersion': 12,    'sourceType': 'module'  },  'rules': {  }};

Agreguemos reglas para mantener el espaciado y la sangría de forma uniforme, y hagamos que las comillas simples sean preferibles a las comillas dobles. Y también hagamos que el uso del punto y coma sea obligatorio al final de las líneas.

.eslintrc.js

module.exports = {  // ...  'rules': {    'quotes': ['error', 'single'],    // we want to force semicolons    'semi': ['error', 'always'],    // we use 2 spaces to indent our code    'indent': ['error', 2],    // we want to avoid extraneous spaces    'no-multi-spaces': ['error']  }};

Guarde los cambios en su archivo.

En el editor de código, abre el archivo JavaScript que creaste anteriormente. Se indicarán todas las reglas incumplidas.

Si tienes instalada la extensión ESLint, puedes usarla CTRL+SHIFT+Ppara abrir la paleta de comandos. Luego, busca ESLint: Fix all auto-fixable Problems y presiona ENTER(o RETURN).

Se corregirán los problemas que se puedan corregir automáticamente:

índice.js

const helloYou = (name)= {  name = 'you' || name ;  console.log('hello' + name + '!' );};console.log(helloYou());

¡Ya no es necesario contar sangrías ni comprobar comillas y punto y coma!

Paso 4 – Agregar acciones de código al guardar

Intentar ejecutar ESLint: Fix all auto-fixable Problems periódicamente de forma manual no es muy confiable. Sin embargo, hacer que las reglas de lint se ejecuten cada vez que guarde su trabajo puede ser más confiable. Puede configurar ESLint para que ejecute la corrección automática cada vez que presione CTRL+S(o COMMAND+S).

Para que ESLint funcione correctamente en el mismo archivo, debe cambiar las preferencias de Visual Studio Code. Vaya a Archivo Preferencias Configuración (o Código Preferencias Configuración ).

Para este tutorial, modificaremos la configuración del espacio de trabajo ; también es posible aplicar esta configuración a todos los proyectos. Haga clic en Espacio de trabajo y busque Acciones de código al guardar :

Editor: Code Actions On SaveCode action kinds to be run on save.Edit in settings.json

Luego haga clic en settings.json.

.vscode/configuraciones.json

{  "editor.codeActionsOnSave": null}

Pegue settings.jsonel siguiente código:

.vscode/configuraciones.json

{  "editor.codeActionsOnSave": {    "source.fixAll.eslint": true  },  "eslint.validate": ["javascript"] }

Ahora, deshaga las correcciones que realizó en el archivo JavaScript que creó anteriormente. Luego, guarde el archivo. Los problemas que se pueden corregir automáticamente se solucionarán automáticamente.

Conclusión

En este tutorial, instaló ESLint, construyó reglas y las habilitó codeActionsOnSaveen Visual Studio Code.