Guía de uso de SublimeLinter para desarrolladores

Linter Es una herramienta indispensable en el desarrollo web moderno. Nos ayuda a mantenernos al tanto de los errores y hacer cumplir las mejores prácticas al escribir códigos. Si está utilizando SublimeText, le recomiendo que instale SublimeLinters. A lo largo de los años, SublimeLinters se ha convertido en un conjunto de herramientas de poder en SublimeText y ha traído paquetes oficiales que se conectan a linters de varios lenguajes de programación..

En este tutorial, veremos cómo instalar y configurar SublimeLinter. Vamos a empezar.

Empezando

La forma más fácil de instalar SublimeLinter 4 es a través del control de paquetes SublimeText. Desde entonces en SublimeLinter 3, cada linter debe ser instalado por separado. Esto permite que SublimeLinter se ejecute de manera más eficiente solo ejecutando el linters que hemos instalado.

Como uso HTML, CSS, JS y PHP la mayor parte del tiempo en mis proyectos, me gustaría instalar linters para estos idiomas. En el Paquete de control, Instalo SublimeLinter junto con los siguientes complementos:

• SublimeLinter-html-tidy
• SublimeLinter-stylelint
• SublimeLinter-eslint
• SublimeLinter-php

Luego, para que esos complementos funcionen, también necesitamos instalar el linter para los idiomas, que son HTML Tidy, CSSLint, JSHint y PHP CLI.

Para aquellos de ustedes que usan OSX, Tidy y PHP están preinstalados en el sistema. Para verificar, ejecute los siguientes dos comandos consecutivamente.

 ordenado --version php --version 

Estos comandos te mostrarán la versión de Tidy y PHP que tienes. Puedes proceder a utilizarlos en Sublime Text..

Si está en Windows o Linux, o no los tiene instalados, puede seguir las instrucciones a continuación..

Instalar HTML Tidy

Para instalar HTML Tidy:

• En OSX, ejecuta este comando en la Terminal brew install homebrew / dupes / tidy
• En linux, usa este comando sudo apt-get install tidy.
• En windows, puede agarrar el instalador EXE de TidyBatchFiles.

Instalación de PHP CLI

• Los usuarios de OSX pueden instalar PHP en el sistema con curl -s http://php-osx.liip.ch/install.sh | bash -s 5.5 mando. Esto instalará PHP 5.5, que es la última versión, en el momento de la escritura.
• Linux los usuarios pueden seguir este tutorial completo de DigitalOcean.
• Para usuarios de Windows, puedes descargar el instalador aquí.

Instalación de Styleint

A continuación, instalaremos la interfaz de CSS llamada Stylelint que nos permitirá verificar y aplicar las mejores prácticas en nuestros archivos CSS. Las siguientes instrucciones se pueden seguir en las tres plataformas: OSX, Windows y Linux. Supongo que ya has instalado Node.js con el NPM.

Para instalar Stylelint, ejecute:

 npm install -g stylelint 

Tenga en cuenta que también necesitará agregar un archivo de configuración de Stylelint a su directorio de proyecto, además instale una configuración predefinida como stylelint-config-standard. Una vez que están configurados, debe encontrar los errores resaltados como se muestra a continuación.

Instalación de ESLint

También vamos a instalar ESLint, una impresora moderna y altamente configurable para JavaScript. Esto nos ayudará a aplicar las mejores prácticas, así como a detectar posibles errores al escribir JavaScript. La instalación de ESLint también requiere Node.js con el NPM.

Para instalarlo, ejecute.

 npm install -g eslint 

Del mismo modo, deberá agregar la configuración de ESLint a su proyecto o usar la configuración predefinida, como eslint-config-recommended.

Estamos todos listos. Podemos empezar forro HTML, CSS, JS y PHP en SublimeText usando SublimeLinter 4.

Nuevas características en SublimeLinter 4

SublimeLinter 4 trae varias características nuevas, y una que se nota fácilmente es el panel que muestra todos los errores de los archivos abiertos. Si está en Mac, presione Comando + Ctrl + A. En Windows y Linux, puede presionar Ctrl + K, Ctrl + A.

La tecla de acceso rápido mostrará una lista de errores, como se muestra en la siguiente captura de pantalla.

Utilizar el ↑ y ↓ para navegar por la lista, y la página se desplazará a la línea exacta donde ocurrió el error.

Mejor visual

Ahora podemos desplazarnos sobre el canal en el editor o solo en la línea donde ocurre el error para ver el mensaje de error. Esto no fue posible en la versión anterior..

Altamente configurable

SublimeLinter 4 ahora es más configurable que nunca. Por ejemplo, ahora podemos personalizar “estilos” A cada una de las configuraciones de linter. Esto nos permite configurar los iconos, el color, el modo de pelusa, la ruta y las variables de entorno para cada indicador por separado.

Referencia adicional

Espero que esta breve introducción pueda ayudar a comenzar a funcionar con SublimeLinter. También puede consultar la referencia si desea obtener más información avanzada..

• SublimeLinter Official Doc
• Pelusa en software y programación - WikiPedia
• Repositorios SublimeLinter