Cómo habilitar la pelusa en el código de guardado en Visual Studio usando Eslint
Cómo instalar Eslint en el código Visual Studio
Nosotros podemos usar Eslint con muchos editores de texto e IDE, pero el código Visual Studio es el que los desarrolladores usan más. Para instalar Eslint en el código Visual Studio, tenemos que seguir los siguientes pasos:
Primero, tenemos que presionar el "Extensiones" Botón en la esquina izquierda y busque el eslint como lo hicimos en el fragmento de abajo dados:
Ahora presione el "instalar" Botón para instalar el código ESLint en Visual Studio:
Como terminamos con la instalación de Eslint dentro del código de Visual Studio. Ahora necesitamos tener un proyecto donde podamos probarlo. Primero inicializar un proyecto.
Cómo crear un proyecto de nodo?
Para crear un proyecto, use el comando:
Ahora usaremos el "cd" Comando para acceder a nuestro proyecto:
Ahora es el momento de inicializar nuestro proyecto, para este propósito ejecutamos el siguiente comando en nuestro terminal:
> npm init -y
Ahora vamos a instalar Eslint en nuestro proyecto y luego lo inicializaremos:
> NPM Instalar [email protected]
Para inicializar el "Eslint" En nuestro proyecto, escriba el comando:
> npx eslint --init
Cuando presionamos el botón "Enter", aparece una secuencia de preguntas una tras otra:
Seleccione la segunda opción y presione el botón "Enter":
A continuación, seleccione Importar/Exportar y Opción y presione el botón "Enter":
Aquí, seleccione las opciones "Ninguna de estas" para seleccionar el marco:
Seleccione la opción "No" para la pregunta anterior y presione el botón "Ingrese" para pasar a la siguiente pregunta:
Seleccione ambas opciones y presione ENTER, SIGUIENTE SELECCIÓN "JavaScript" para la pregunta final,
Cuando presionemos Entrar, recibiremos un mensaje "Creado con éxito". Ahora dentro de nuestro proyecto, tenemos los siguientes archivos:
Ahora consideraremos un ejemplo y romperemos algunas reglas básicas deliberadamente y observaremos cómo responderá a Eslint cuando rompamos algunas reglas.
var string = "Hola, ¿cómo estás";
dejar val = 20;
consola.log (val);
¿Qué hemos hecho en este ejemplo?? Creamos dos variables y no utilizamos una de ellas en nuestro proyecto:
Pero como habilitamos Eslint en nuestro código de Visual Studio, subraya las variables "cadena" como se muestra en el fragmento anterior y muestra el siguiente error en la sección "Problemas":
Y este problema desaparecerá cuando utilizemos esta variable en algún lugar de nuestro código:
var string = "Hola, ¿cómo estás";
dejar val = 20;
consola.log (val, cadena);
Ahora eche un vistazo a los siguientes Snedped:
Verá que esta vez no aparece tal problema en la sección del problema:
Para una mejor comprensión de Eslint, consideremos otro ejemplo en el que romperemos algunas reglas como los semicolones faltantes y los espacios adicionales, y observaremos cómo Eslint responde a él:
var string = "Hola, ¿cómo estás";
Sea val = 20
consola.log (val)
if (val == 20)
consola.log (cadena)
En este código, agregamos algunos espacios blancos adicionales y perdimos los semicolones intencionalmente:
Entonces, técnicamente nada de malo en ello, como se muestra en la sección del problema. Sin embargo, esta no es una buena práctica de codificación para colocar espacios adicionales o semicolones faltantes.
Eslint no muestra ningún problema porque estas reglas no se agregan en Eslint. Podemos especificarlos en el siguiente archivo:
Abriremos el ".eslinrc.JS " Archivo de la carpeta de nuestro proyecto y agregaremos algunas reglas:
Agregamos la primera regla para abordar con las semicolones y la segunda regla para abordar con espacios blancos y salvar los cambios. Ahora, si perdemos el punto y coma o colocamos espacios adicionales en nuestro código, entonces Eslint los resaltará en la sección del problema:
Cómo habilitar la pelusa en Save
Podemos habilitar la pelusa en cada guardado, esto significa que cada vez que guardemos nuestro archivo, estos problemas se solucionarán automáticamente. Para este propósito, First Press "Ctrl+" y seleccione el "Espacio de trabajo" ajustes:
En el cuadro de búsqueda, busque el "Acciones de código en guardar" y seleccione el "Editar en la configuración.json " opción:
Agregue el siguiente código en la configuración.Archivo JSON:
Esta configuración habilitará la pelusa en guardar.
Conclusión
Eslint es un paquete que hace que la pelusa en su proyecto sea realmente fácil, y aplica una guía de estilo a lo largo de nuestro proyecto para que podamos mantener un estilo consistente durante todo el proyecto. En este artículo, describimos cómo instalar la extensión de Eslint, luego creamos un proyecto y observamos cómo funciona las pelusas en Visual Studio Code. A continuación, determinamos cómo agregar reglas para la pelusa, y finalmente, aprendemos cómo habilitar Eslint en Save.