Formatters & Linters

Formatters & Liners

Linters; help you catch syntax errors (f.e. ESLint, Stylelint, Markdownlint)

Formatters; helps you format you code (f.e. Prettier, Editorconfig)

---

Formatter

Beautify

Beautify is een formatter die code netter uitlijnt. Hierdoor worden je code beter leesbaar omdat het uitgelijnd is en een goede structuur heeft. Je kan het ook gebruiken in HTML, CSS en Javascript. Zelf gebruikte ik het in Brackets text editor, dit vond ik altijd heel handig en makkelijk in gebruik. Een rechter muisklik en je kon het zo vinden in een dropdown menu.

Beautify is door mij goedgekeurd 👍

Prettier

Prettier is een formatter die code automatisch consistent maakt en ervoor zorgt dat de code makkelijker te lezen wordt. Prettier kun je als plugin downloaden in je text editor. Terwijl je bezig bent schrijven neemt prettier kleine zorgen van je af.
Laten we naar een voorbeeld kijken uit mijn eigen script.js file:

Before const menuknop = document.querySelector('button');
const menuknopimg = document.querySelector('img');

After
const menuknop = document.querySelector("button");
const menuknopimg = document.querySelector("img");

Verder heb ik ook voorbeelden waarin een functie met meerder variablen verandert in een functie waarin er van spaties zijn voorzien.
Tijdbesparend! 🕒

Ik vind het een hele handige tool, ik maakte mij als eerst een beetje zorgen dat prettier echt code zou veranderingen en dat ik daardoor errors of dergelijke zou krijgen. Maar na wat onderzoek en het zelf uitgeprobeerd te hebben vind het heel fijn. Toen ik een paar dagen geleden aan het coderen was had ik prettier eigenlijk echt nodig, want ik voerde eigenlijk uit wat prettier doet en nu hoef ik daar ook helemaal geen tijd aan uit te geven.

Prettier is door mij goedgekeurd 👍

Linters

ESLint

ESlint is een tool om code te verkrijgen die bugs en errors eruit vist,z odat je een mooie en goed werkende code hebt.
Hierdoor blijft de kwaliteit van je code sterk. Je kan het gebruiken voor Javascript bestanden.

Ik schrok wel een beetje toen ik zag dat bijna alles in mijn index.js bestand rood gekleurd werd. Hiervoor is het heel handig dat je met een settings.json bestand aan inschakelen dat ESLint zoveel mogelijk bugs 'repareert'. Het duurde wel even om ESLint te downloaden, met Prettier was het heel makkelijk een extension downloaden via de visual studio code text editor en je kon gelijk beginnen. Dit vond ik wat minder, maar het is het zeker waard voor het helpen en voorkomen van errors. Ondanks dat vind wel dat ESLint heel veel rode lijnen zet ook na dat een groot aantal weg is, het lijkt me dat met deze code helemaal niks mis is, maar nu krijg ik wel het gevoel alsof dat wel zo is... Dus dat is een beetje verwarrend 🤔

ESLint krijgt van mij een 🤷 maybebaby en ook een 👍, want ik zie de handigheid er wel in

---

Bronnen

Beautify
Prettier
ESLint