Leidraad voor het gebruik van SublimeLinter voor ontwikkelaars

Linter is een onmisbare tool in moderne webontwikkeling. Het helpt ons om fouten te voorkomen en best practices toe te passen bij het schrijven van codes. Als u SublimeText gebruikt, raad ik u ten zeerste aan om SublimeLinters te installeren. In de loop der jaren is SublimeLinters geëvolueerd om een ​​krachtige tool-suite te zijn in SublimeText en heeft het officiële pakketten gebracht die verbinding maken met linters van verschillende programmeertalen.

In deze zelfstudie zien we hoe u SublimeLinter installeert en instelt. Laten we beginnen.

Ermee beginnen

De eenvoudigste manier om SublimeLinter 4 te installeren is via SublimeText Package Control. Sindsdien in SublimeLinter 3, elk linter moet afzonderlijk worden geïnstalleerd. Hierdoor kan SublimeLinter efficiënter werken door alleen de linters die we hebben geïnstalleerd.

Aangezien ik meestal HTML, CSS, JS en PHP in mijn projecten gebruik, wil ik linters voor deze talen installeren. In de Pakketcontrole, Ik installeer SublimeLinter samen met de volgende plug-ins:

• SublimeLinter-html-opgeruimd
• SublimeLinter-stylelint
• SublimeLinter-eslint
• SublimeLinter-php

Om vervolgens die plug-ins te laten werken, moeten we ook de linter voor de talen, die HTML Tidy, CSSLint, JSHint en PHP CLI zijn.

Voor degenen onder u die OSX gebruiken, zijn Tidy en PHP vooraf geïnstalleerd in het systeem. Voer de volgende twee opdrachten achtereenvolgens uit om te controleren.

 tidy --version php --version 

Deze commando's tonen je de Tidy en PHP versie die je hebt. Je kunt ze gebruiken in Sublime-tekst.

Als u Windows of Linux gebruikt of deze niet hebt geïnstalleerd, volgt u de onderstaande instructies.

HTML Tidy installeren

Om HTML Tidy te installeren:

• In OSX, voer deze opdracht uit in Terminal zet brouwsel op homebrew / dupes / tidy
• In Linux, gebruik deze opdracht sudo apt-get install tidy.
• In Windows, je kunt het EXE-installatieprogramma van TidyBatchFiles pakken.

Installeren van PHP CLI

• OSX-gebruikers kunnen PHP in het systeem installeren met curl -s http://php-osx.liip.ch/install.sh | bash -s 5.5 commando. Hiermee wordt op het moment van schrijven PHP 5.5 geïnstalleerd, de nieuwste versie.
• Linux gebruikers kunnen deze uitgebreide tutorial van DigitalOcean volgen.
• Voor Windows-gebruikers, u kunt het installatieprogramma hier downloaden.

Installeren van Styleint

Vervolgens zullen we de CSS-linter genaamd Stylelint installeren die ons in staat zal stellen de best practices in onze CSS-bestanden te controleren en af ​​te dwingen. De volgende instructie kan worden gevolgd op alle drie platforms: OSX, Windows en Linux. Ik neem aan dat je Node.js al hebt geïnstalleerd met de NPM.

Om Stylelint te installeren, voer:

 npm install -g stylelint 

Merk op dat je ook een Stylelint-configuratiebestand aan je projectdirectory moet toevoegen, daarnaast een vooraf gedefinieerde config zoals stylelint-config-standaard moet installeren. Nadat deze zijn geconfigureerd, vindt u de fouten zoals hieronder aangegeven.

ESLint installeren

We gaan ook ESLint installeren, een moderne en zeer configureerbare linter voor JavaScript. Dit zal ons helpen best practices af te dwingen en mogelijke fouten te vangen bij het schrijven van JavaScript. Het installeren van ESLint vereist ook Node.js met de NPM.

Om het te installeren, voer.

 npm install -g eslint 

Op dezelfde manier moet u de ESLint-configuratie toevoegen aan uw project of de vooraf gedefinieerde configuratie gebruiken, zoals eslint-config-aanbevolen.

We zijn er allemaal klaar voor. We kunnen starten pluizende HTML, CSS, JS en PHP in SublimeText met SublimeLinter 4.

Nieuwe functies in SublimeLinter 4

SublimeLinter 4 biedt verschillende nieuwe functies, en een die gemakkelijk op te merken is, is het paneel dat alle fouten van de geopende bestanden weergeeft. Als je Mac gebruikt, druk je op Command + Ctrl + A. In Windows en Linux kun je op Ctrl + K, Ctrl + A drukken.

De sneltoets toont een lijst met fouten, zoals weergegeven in de volgende schermafbeelding.

Gebruik de ↑ en ↓ om door de lijst te navigeren en de pagina gaat naar de exacte regel waar de fout is opgetreden.

Beter visueel

We kunnen nu in de editor over de rugmarge zweven of alleen op de regel waar de fout optreedt om het foutbericht te bekijken. Dit was niet mogelijk in de vorige versie.

Zeer configureerbaar

SublimeLinter 4 is nu meer configureerbaar dan ooit tevoren. We kunnen nu bijvoorbeeld op maat maken “stijlen” aan elk van de linterconfiguratie. Hiermee kunnen we pictogrammen, kleuren, lintmodus, pad en omgevingsvariabelen voor elke afzonderlijke linter instellen.

Verdere referentie

Ik hoop dat deze korte introductie kan helpen om met SublimeLinter aan de slag te gaan. U kunt ook verwijzen naar de referentie als u meer van geavanceerde dingen wilt.

• SublimeLinter Officiële Doc
• Lint in software en programmeren - WikiPedia
• SublimeLinter-opslagplaatsen