Linters & Formatters - TristanVarewijck/Block-Tech GitHub Wiki

  • Linters; help you catch syntax errors (f.e. ESLint, Stylelint, Markdownlint)
  • Formatters; helps you format you code (f.e. Prettier, Editorconfig)

Linters

What is linting?

Linting is the automated checking of your source code for programmatic and stylistic errors. This is done by using a lint tool (otherwise known as linter). A lint tool is a basic static code analyzer. (Richard Bellairs, 2019)

Met een linter kan je dus bugs, onnodige code en slordigheid voorkomen in je javascript code. Na mijn onderzoek ben ik erachter gekomen dat ESlint by far de meest gebruikte linter is. Ik heb deze dan ook toegepast in mijn project en ook echt al gebruikt om mijn code op te schonen.

Onderzochte linter:

  • ESlint

Experience

Voordat ik eslint had gebruikt dacht ik al dat mijn code niet veel zal veranderen omdat ik het er prima uit vond zien maar het bleek dus dat me code veel slordigheid had en die is er nu volledig uit en dat is super fijn.

Example: Na het gebruik van eslint was ik best verbaast dat er nog zoveel "errors" waren en slordigheden maar na het gebruik van eslint zag het er goed uit!

Commands:

Install ESlint:

npm install eslint --save-dev

Configuration file:

npx eslint --init

Run ESlint:

npx eslint yourfile.js

Fix yourfile:

npx eslint yourfile.js --fix

Formatters

What are formatters?

Met code formatter maak je, je code beter leesbaar, kleiner en verzorgd. Het kan bijvoorbeeld zijn dat je een hele lange CSS sheet heb gemaakt die voor buitenstaanders erg gewikkeld eruit kan zien met een formatter kan je ervoor zorgen dat dit CSS file er verzorgd maar ook "meer" leesbaar uitziet.

Onderzochte formatter:

  • Prettier.io

Experience

Na het toepassen van Prettier ben ik eigenlijk merendeels tevreden me CSS ziet er erg verzorgd uit en ook me HTML is prima verwerkt. Waar ik niet veel verschil in zie is me Javascript maar dat komt denk ik omdat ik de eslint daar al op losgelaten had.

Example: Na dat ik prettier had gebruikt zag me code er als volgt uit. Super netjes dus!

Commands

Prettier werkt voor meerdere front-end talen (HTML, CSS & JavaScript) maar ook een aantal back-end talen.

Install prettier:

`npm install --save-dev --save-exact prettier`

Create a prettier json file:

.**prettierrc.json**

Create a prettier ignore file:

**.prettierignore**

Make everything prettier!:

npx prettier --write

Conclusie

Ik ben zeker dat ik ESlint ga gebruiken dat is namelijk echt super handig! prettier weet ik nog niet zeker omdat ik bang ben dat ik me eigen code straks niet terug kan lezen...

Resource: