Linters

Linters worden gebruikt om source codes te analyseren om zo programmeer errors, bugs en constructies te verbeteren. Het is een tool die jouw code scant en zo issues vindt of inconsistente code. Je kan instellingen meegeven aan linters en hij zal deze instellingen toepassen over jouw code en zorgt zo voor consistente code. Hier een voorbeeld:

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"],
        "camelcase": ["error", { "properties": "always" }],
        "block-spacing": ["error", "always"],
        "comma-spacing": ["error", { "before": false, "after": true }],
        "no-mixed-spaces-and-tabs": ["error", "smart-tabs"]
    }
}

verschillende soorten Linters

JSLint

JSLint is een van de oudste linters beschikbaar, deze is in 2002 ontwikkeld.

Wat zijn de voordelen?

• JSLint komt geconfigureerd binnen en is gelijk te gebruiken.

Nadelen van JSLint

• heeft geen configuratiebestand. Je kan geen eigen settings toepassen
• Je kan geen custom rules toepassen
• Ongedocumenteerde features
• Lastig te zien welke rule, welke error veroorzaakt.

JSHINT

JSHint is een versie van JSLint die je meer kan configureren. Je kan elke rule configureren en plaatsen in een config file.

Wat zijn de voordelen?

• Meeste settings kan je instellen
• Ondersteund een configuratie bestand
• Heeft support van vele libraries zoals Jquery, NodeJS etc.
• Basic ES6 Support

Nadelen van JSHint

• • Lastig te zien welke rule, welke error veroorzaakt.
• • Geen custom rule ondersteuning

ESLint

ESLint is de meest recente van deze 3. Het is ontwikkeld om makkelijk te gebruiken en te configureren naar eigen wil.

Wat zijn de voordelen?

• Erg flexibel, elke rule kan worden aangezet en rules hebben extra settings die kunnen worden getweaked.
• Uitbreidbaar, veel plugins beschikbaar.
• Makkelijk te snappen.
• Bevat veel rules die andere Linters niet bevatten. Maakt het gemakkelijker om problemen te ontdekken.
• Best ES6 ondersteuning.

Nadelen van ESLint

• Enkele configuratie benodig.
• Iets slomer dan het gemiddelde.

Conclusie

ESLint is de beste huidige linter in mijn ogen. Het gemak, de configuratie en de ondersteuning maakt het voor mij de beste keuze.

Formatters

Veel code editors bieden formatters aan en hiermee zorg je ervoor dat je een consistente opbouw hebt van je code. Het let tevens ook op onnodige tekens en verwijderd deze. Zodoende wordt het een stuk strakker en is je code een stuk schoner & overzichtelijker. Ik gebruik Atom en hier heb je een package genaamd atom-beautify. Deze kan je installeren en dan activeren op welke pagina je wilt en haalt hiermee overbodige tekens weg.

Het zelfde als Linters kan je meegeven hoe jij wilt waar de beautifyer op let.

{
  "html": {
    "brace_style": "collapse",
    "indent_char": " ",
    "indent_scripts": "normal",
    "indent_size": 6,
    "max_preserve_newlines": 1,
    "preserve_newlines": true,
    "unformatted": ["a", "sub", "sup", "b", "i", "u"],
    "wrap_line_length": 0
  },
  "css": {
    "indent_char": " ",
    "indent_size": 4
  },
  "js": {
    "indent_size": 2,
    "indent_char": " ",
    "indent_level": 0,
    "indent_with_tabs": false,
    "preserve_newlines": true,
    "max_preserve_newlines": 2,
    "jslint_happy": true
  },
  "sql": {
    "indent_size": 4,
    "indent_char": " ",
    "indent_level": 0,
    "indent_with_tabs": false
  }
}