Cómo quitar pelusas a tus problemas en Sublime

Sublime es un editor de texto ligero y es bastante popular entre muchos desarrolladores web. Ahora sé que hay muchos IDE sofisticados en el mercado con intellisense, finalización de código y todo eso. ¡Pero esta publicación es para aquellos que se han mantenido fieles a sus editores de texto favoritos! Entonces, si usa Sublime para sus proyectos, entonces puede disfrutar de algunas de las ingeniosas características que ofrece. Linting es uno de ellos.

Comencemos por definir el término "Linting".

Linting es el proceso de verificar su código en busca de posibles errores. Puede ser la sintaxis o el estilo del código.

El proceso de desplumado se puede realizar durante tres etapas de desarrollo:

  1. A través de su editor (linting en vivo)
  2. A través del proceso de construcción
  3. Usando un gancho de confirmación previa en el control de versiones

En esta publicación, exploraremos la transmisión en vivo en el editor. Hay muchos linters populares para JavaScript como JSHint, JSCS y ESLint. Usaré ESLint, porque ESLint admite el código ES6, es altamente extensible y muy fácil de usar. Si está interesado, ¡puede ver las comparaciones entre los diferentes linters aquí!

Paso 1

Primero debe instalar el paquete ESLint npm. El comando es el siguiente:

npm install -g eslint

La opción '-g' es instalar el paquete en global. Instale 'npm' si aún no lo tiene instalado. Se abrirá un archivo en Sublime que le pedirá que descargue otros dos complementos. Necesita instalar estos complementos usando el Control de paquetes de Sublime.

Abra el control de paquete usando el comando / ctrl + shift + P y seleccione la opción 'Control de paquete: Instalar paquete'. Luego descargue los dos complementos.

  1. SublimeLinter-eslint
  2. SublimeLinter-contrib-eslint

SublimeLinter es el marco que proporciona linting. No viene con soporte para diferentes idiomas. El Linter específico del idioma debe instalarse por separado.

El complemento Sublime-contrib-eslint actúa como una interfaz entre ESLint y SublimeLinter. Puede consultar el procedimiento de instalación en su sitio web principal si se queda atascado en algún lugar.

Después de instalar correctamente los complementos, debe restablecer su editor para que los cambios surtan efecto. ¡Ahora veremos ESLint en acción!

Paso 2

¡Uf! Esas fueron muchas instalaciones. ¡Ahora, por fin, puedes comprobar la genialidad de Linting! Abra su archivo en Sublime y contemple el poder ... pero espere que no haya pasado nada. ¿Porqué es eso? No se preocupe. Ha instalado todo correctamente, pero ESLint por sí solo no hace nada. Debe proporcionar la configuración básica y es un proceso muy sencillo. Así es cómo:

  1. Inicie el programa de terminal en el directorio de inicio de su proyecto
  2. Escriba este comando
eslint --init

Aparece un mensaje que le hace algunas preguntas sobre sus preferencias de codificación y se genera un archivo '.eslintrc'. Este archivo contiene las reglas que acaba de seleccionar. Puede agregar configuraciones adicionales si así lo desea.

Como puede ver, ESLint se queja de la sangría y del hecho de que la variable foo no se usa en ninguna parte. Puede verificar cualquier error o advertencia colocando el cursor sobre la parte resaltada del código o verificando el mensaje en la barra de estado de Sublime en la parte inferior.

¡Así que eso fue todo! Espero que hayas podido seguirlo. Linting es una herramienta genial para detectar errores en su código. Garantiza que siga las pautas del código y escriba un código limpio en todo momento. Espero que todos hayan encontrado útil esta publicación y, como siempre, ¡feliz codificación!