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 👍

Linter

ESlint is een tool om consistente code te verkrijgen en om bugs en errors eruit te vissen zodat je een mooie en goed werkende code hebt. Je kan het gebruiken voor je Javascript.

---

Bronnen

Beautify
Prettier ESLint