Guida all'uso di SublimeLinter per sviluppatori

Linter è uno strumento indispensabile nel moderno sviluppo web. Ci aiuta a tenere sotto controllo gli errori e ad applicare le migliori pratiche durante la scrittura dei codici. Se stai usando SublimeText, consiglio vivamente di installare SublimeLinters. Nel corso degli anni, SublimeLinters ha deciso di diventare una potente suite di strumenti in SublimeText e ha portato pacchetti ufficiali che si connettono a linters di vari linguaggi di programmazione.

In questo tutorial vedremo come installare e configurare SublimeLinter. Iniziamo.

Iniziare

Il modo più semplice per installare SublimeLinter 4 è tramite il Controllo pacchetto SublimeText. Da allora in SublimeLinter 3, ogni linter deve essere installato separatamente. Ciò consente a SublimeLinter di funzionare in modo più efficiente eseguendo solo il linters che abbiamo installato.

Poiché utilizzo i miei progetti in HTML, CSS, JS e PHP la maggior parte del tempo, vorrei installare i linters per queste lingue. Nel Controllo del pacchetto, Installare SublimeLinter insieme ai seguenti plugin:

• SublimeLinter-html-ordine
• SublimeLinter-stylelint
• SublimeLinter-eslint
• SublimeLinter-php

Quindi, per far funzionare questi plugin, dobbiamo anche installare il linter per le lingue, che sono HTML Tidy, CSSLint, JSHint e PHP CLI.

Per quelli di voi che stanno usando OSX, Tidy e PHP sono preinstallati nel sistema. Per verificare, eseguire i due comandi seguenti consecutivamente.

 tidy --version php --version 

Questi comandi ti mostreranno la versione di Tidy e PHP che hai. Puoi continuare a usarli in Sublime Text.

Se sei su Windows o Linux, o non li hai installati, puoi seguire le istruzioni qui sotto.

Installazione di HTML Tidy

Per installare HTML Tidy:

• In OSX, esegui questo comando in Terminale brew install homebrew / dupes / tidy
• In Linux, usa questo comando sudo apt-get install tidy.
• In Windows, puoi prendere l'installer EXE da TidyBatchFiles.

Installazione di CLI PHP

• Gli utenti OSX possono installare PHP nel sistema con curl-s http://php-osx.liip.ch/install.sh | bash -s 5.5 comando. Questo installerà PHP 5.5, che è l'ultima versione, al momento della scrittura.
• Linux gli utenti possono seguire questo tutorial completo da DigitalOcean.
• Per utenti Windows, puoi scaricare l'installer qui.

Installare Styleint

Successivamente, installeremo il linter CSS chiamato Stylelint che ci permetterà di verificare e applicare le migliori pratiche nei nostri file CSS. Le seguenti istruzioni possono essere seguite su tutte e tre le piattaforme: OSX, Windows e Linux. Presumo che tu abbia già installato Node.js con NPM.

Per installare Stylelint, eseguire:

 npm install -g stylelint 

Nota che dovrai anche aggiungere un file di configurazione Stylelint alla directory del progetto, inoltre installare una configurazione predefinita come stylelint-config-standard. Una volta configurati, dovresti trovare gli errori evidenziati come di seguito.

Installazione di ESLint

Stiamo anche installando ESLint, un linter moderno e altamente configurabile per JavaScript. Questo ci aiuterà a far rispettare le migliori pratiche e ad individuare potenziali errori durante la scrittura di JavaScript. L'installazione di ESLint richiede anche Node.js con NPM.

Per installarlo, corri.

 npm install -g eslint 

Allo stesso modo, dovrai aggiungere la configurazione ESLint al tuo progetto, o usare la configurazione predefinita come eslint-config-recommended.

Siamo tutti pronti. Possiamo iniziare linting HTML, CSS, JS e PHP in SublimeText utilizzando SublimeLinter 4.

Nuove funzionalità in SublimeLinter 4

SublimeLinter 4 offre diverse nuove funzionalità e una che è facilmente evidente è il pannello che visualizza tutti gli errori dei file aperti. Se sei in Mac, premi Comando + Ctrl + A. In Windows e Linux, puoi premere Ctrl + K, Ctrl + A.

Il tasto di scelta rapida mostrerà un elenco di errori, come mostrato nello screenshot seguente.

Utilizzare il ↑ e ↓ per navigare nell'elenco e la pagina scorrerà fino alla riga esatta in cui si è verificato l'errore.

Migliore visuale

Ora possiamo passare con il mouse sopra il margine interno dell'editor o solo la riga in cui si è verificato l'errore per visualizzare il messaggio di errore. Questo non era possibile nella versione precedente.

Altamente configurabile

SublimeLinter 4 è ora più configurabile che mai. Ad esempio, ora possiamo personalizzare “stili” a ciascuna configurazione di linter. Questo ci consente di impostare separatamente icone, colori, modalità di lint, percorso e variabili di ambiente per ciascun linter.

Ulteriore riferimento

Spero che questa breve introduzione possa aiutarci ad andare avanti con SublimeLinter. Puoi anche fare riferimento alla referenza se desideri più materiale avanzato.

• SublimeLinter Official Doc
• Lint in software e programmazione - WikiPedia
• Repository SublimeLinter