Linter & formatter

Video linting

Linting with ESLint (https://www.youtube.com/watch?v=clzTwZgMlqE) Voordat ik met linters aan de slag ging, heb ik eerst dit video bekeken en geprobeerd om de stappen te volgen. Helaas was dit geen succes bij mij, omdat de instructies niet overeenkwamen waardoor ik andere stappen heb ondernomen. Hierdoor kreeg ik de standaard configuratie en werkte de linter niet naar behoren. De tool gaf bijvoorbeeld geen foutmeldingen, terwijl ik expres een stukje foute code heb neergezet. Vervolgens heb ik alles verwijderd en ESLint via NPM gedownload en die stappen gevolgd.

ESLint

ESLint is een handige tool voor het detecteren van fouten in javascript code. Wanneer er tijdens het coderen problemen zijn ontdekt geeft het programma vervolgens mogelijke oplossingen ervoor. Bijvoorbeeld als je ; (puntkomma) vergeet of een functie die niet goed is afgesloten, geeft het programma dit aan. ESLint biedt ook mogelijkheid waarbij je zelf de configuratie kan aanpassen, waarin je zelf kan aangeven welke regels je wilt gebruiken in je project.

• veel informatie over te vinden.
• aangeraden door VSCode website

Stylelint

Is een moderne linter die helpt met het vermijden van fouten in je css, html etc. Ook met stylelint kan je de configuratie helemaal zelf bepalen. Deze linter heb ik vooral gebruikt voor mijn css bestanden goed te ordenen.

command line

// naar mijn css bestand folder
npx stylelint static/css/style.css

Hieronder een voorbeeld van mijn output bij het toepassen van stylelint. Eventuele fouten worden weergegeven per regels in de terminal. Stylelint configuratie Hieronder de configuratie file van de stylelint die ik heb toegepast. Ik heb bijvoorbeeld bij regel 13 aangegeven dat ik maximaal maar 2 witregels mag hebben in mijn CSS-document.

JSHint

JSHint is een flexibele tool waarbij er gemakkelijke aanpassen gedaan kan worden in elke omgeving waar jij je code wilt uitvoeren. Het is een tool die fouten of mogelijke problemen in javascript code vindt. Dit kan typ fouten zijn of taalproblemen zijn. Veel bedrijven maken gebruik van deze linter zoals, Mozilla, wikipedia, facebook, twitter etc. Voor het gebruiken van deze linter moet je altijd combineren met unit en functionele tests en met code review.

• Je kan op drie verschillende manieren je configuratie doen.
• Bekende bedrijven maken gebruik van deze linter

JSLint

JSLint zoekt naar problemen in javascript code, door het scannen van javscript bron. Het kan voorkomen dat er ook niet noodzakelijke problemen getoond worden, dit kan soms vervelend overkomen. JSLint kijkt naar stijlconventies en naar structurele problemen

• De meeste legale programma's worden afgewezen (Het is een hogere standaard)
• JSLint weigert programma’s die browsers accepteren
• JSLint gaat vooral over kwaliteit van code

Prettier

Prettier is een formatter voor js, html, css etc. Deze tool zorgt ervoor dat je code consistent blijven en verwijderd de style die niet van toepassing zijn. Ook voor deze tool is het mogelijk om je eigen configuratie te bepalen.

• tool wijzigt het hele project op consistenties voor opmaak

Conclusie

Het toepassen van een linter is helemaal nieuw voor mij en ik had ook geen idee welke linters er allemaal zijn. In week drie bij project tech wordt de Linter: ESLint benoemt en een video linkje over ESLint gedeeld. Na het bekijken van de video over de linter: ESLint kreeg ik een beter beeld wat deze tool precies inhoudt en wat je er allemaal mee kan. Daarna heb ik wat meer onderzoek gedaan online en kwam ik op de website van VScode terecht, waarbij de linter: ESLint het meest aangeraden worden. Ook kon ik veel informatie vinden hoe je deze linter kan gebruiken en de configuratie aanpassen. Gelijk na het onderzoek heb ik de tool ESLint geïnstalleerd en een configuratie file aangemaakt met daarin een aantal regels, die ervoor zorgt dat mijn code consistent blijven.

De linter: JSHint heeft een ingewikkelde configuratie waardoor ik deze niet heb uitgeprobeerd.Na het lezen wat JSLint inhoudt, heeft deze tool een zeer strenge voorwaarden. Dit kan vervelend overkomen tijdens het coderen.

Formatter prettier Voor het laten inspringen van mijn code heb ik de tool prettier geïnstalleerd, alleen werkt het bij nog niet. Hiervoor heb ik de alternatieve shortcut shift+option+F die standaard in VSCode bij alle files kan gebruiken, dit werkt prima voor mij.

Bronnen

Linters:

ESLint (2021). Geraadpleegd van, https://www.npmjs.com/package/eslint The Coding Train (2018, 13 maart). Linting with ESLint. Geraadpleegd van, https://www.youtube.com/watch?v=clzTwZgMlqE Stylelint (2021). Geraadpleegd van, https://stylelint.io Stylelint (2021). Confguration. Geraadpleegd van, https://stylelint.io/user-guide/configure VSCode (2021). JavaScript extensions for VS code. Geraadpleegd van, https://code.visualstudio.com/docs/nodejs/extensions JSHint (2021). Geraadpleegd van, https://github.com/jshint/jshint JSLint (2021). Geraadpleegd van, http://www.jslint.com/help.html

Formatter:

Prettier (2021). Geraadpleegd van, https://prettier.io/docs/en/install.html