Guide d'utilisation de SublimeLinter pour les développeurs

Linter est un outil indispensable dans le développement Web moderne. Cela nous aide à contrôler les erreurs et à appliquer les meilleures pratiques lors de la rédaction de codes. Si vous utilisez SublimeText, je vous recommande d'installer SublimeLinters. Au fil des ans, SublimeLinters est devenu une suite d'outils électroportatifs dans SublimeText et propose des packages officiels qui se connectent aux linters de divers langages de programmation..

Dans ce tutoriel, nous verrons comment installer et configurer SublimeLinter. Commençons juste.

Commencer

Le moyen le plus simple d'installer SublimeLinter 4 consiste à utiliser le contrôle de package SublimeText. Depuis en SublimeLinter 3, chaque linter doit être installé séparément. Cela permet à SublimeLinter de fonctionner plus efficacement en exécutant uniquement des linters que nous avons installé.

Puisque j'utilise HTML, CSS, JS et PHP la plupart du temps dans mes projets, j'aimerais installer des linters pour ces langages. dans le Contrôle des colis, J'installe SublimeLinter avec les plugins suivants:

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

Ensuite, pour que ces plugins fonctionnent, nous devons également installer le linter pour les langages, qui sont HTML Tidy, CSSLint, JSHint et PHP CLI.

Pour ceux qui utilisent OSX, Tidy et PHP sont pré-installés sur le système. Pour vérifier, exécutez les deux commandes suivantes consécutivement.

 bien rangé --version php --version 

Ces commandes vous montreront la version de Tidy et PHP que vous avez. Vous pouvez continuer à les utiliser dans Sublime Text.

Si vous utilisez Windows ou Linux, ou si vous ne les avez pas installés, vous pouvez suivre les instructions ci-dessous..

Installation de HTML Tidy

Pour installer HTML Tidy:

• Sous OSX, lancer cette commande dans Terminal brasser installer homebrew / dupes / ranger
• Sous Linux, utiliser cette commande sudo apt-get install nettoie.
• Sous Windows, vous pouvez récupérer le programme d'installation EXE de TidyBatchFiles.

Installer PHP CLI

• Les utilisateurs OSX peuvent installer PHP dans le système avec curl -s http://php-osx.liip.ch/install.sh | bash -s 5.5 commander. Cela installera PHP 5.5, qui est la dernière version, au moment de l'écriture..
• Linux les utilisateurs peuvent suivre ce didacticiel complet de DigitalOcean.
• Pour les utilisateurs Windows, vous pouvez télécharger l'installateur ici.

Installation de Styleint

Ensuite, nous installerons l’interface CSS appelée Stylelint qui nous permettra de vérifier et d’appliquer les meilleures pratiques dans nos fichiers CSS. Les instructions suivantes peuvent être suivies sur les trois plates-formes: OSX, Windows et Linux. Je suppose que vous avez déjà installé Node.js avec le NPM.

Pour installer Stylelint, exécutez:

 npm install -g stylelint 

Notez que vous devrez également ajouter un fichier de configuration Stylelint à votre répertoire de projet et installer une configuration prédéfinie telle que stylelint-config-standard. Une fois que ceux-ci sont configurés, vous devriez trouver les erreurs soulignées comme ci-dessous.

Installer ESLint

Nous allons également installer ESLint, un navigateur moderne et hautement configurable pour JavaScript. Cela nous aidera à appliquer les meilleures pratiques et à détecter les erreurs potentielles lors de l'écriture de JavaScript. L'installation d'ESLint nécessite également Node.js avec le NPM.

Pour l'installer, lancez.

 npm install -g eslint 

De même, vous devrez ajouter la configuration ESLint à votre projet ou utiliser la configuration prédéfinie telle que eslint-config-recommandée..

Nous sommes tous ensemble. On peut commencer peluches HTML, CSS, JS et PHP dans SublimeText avec SublimeLinter 4.

Nouvelles fonctionnalités de SublimeLinter 4

SublimeLinter 4 apporte plusieurs nouvelles fonctionnalités, dont le panneau qui affiche toutes les erreurs des fichiers ouverts est facilement perceptible. Si vous êtes sur Mac, appuyez sur Commande + Ctrl + A. Sous Windows et Linux, vous pouvez appuyer sur Ctrl + K, Ctrl + A.

La touche de raccourci affichera une liste d'erreurs, comme illustré dans la capture d'écran suivante..

Utilisez le ↑ et ↓ pour naviguer dans la liste, et la page défilera jusqu'à la ligne exacte où l'erreur s'est produite.

Meilleur visuel

Nous pouvons maintenant survoler la gouttière dans l'éditeur ou juste la ligne où l'erreur survient pour afficher le message d'erreur. Ce n'était pas possible dans la version précédente.

Hautement configurable

SublimeLinter 4 est maintenant plus configurable que jamais. Par exemple, nous pouvons maintenant personnaliser “modes” à chacun de la configuration de linter. Cela nous permet de définir séparément les icônes, la couleur, le mode anti-peluche, le chemin d'accès et les variables d'environnement pour chaque linter.

Référence supplémentaire

J'espère que cette courte introduction pourra vous aider à utiliser SublimeLinter. Vous pouvez également vous référer à la référence si vous souhaitez plus de choses avancées.

• SublimeLinter Doc officiel
• Lint dans le logiciel et la programmation - WikiPedia
• Dépôts SublimeLinter