ESLint & Prettier

ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Voorbereiding

Installeer VScode extension voor Prettier
Installeer VScode extension voor ESLint

Installeer ESLint

Installeer ESLint en de packages met

npx eslint --init

Beantwoord de vragen die worden gesteld als volgt

Installeer Prettier

Installeer Prettier, samen met configuratie voor ESLint

npm install prettier

npm install eslint-plugin-prettier eslint-config-prettier

... samen met configuratie voor ESLint

Prettier config

Maak een .prettierrc bestand aan met als content

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

Aanpassen ESLint config

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb-base',
    'prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};

formatOnSave

Pas de settings.json van je VSCode aan
- Open via command pallet

"editor.codeActionsOnSave" : {
  "source.fixAll.eslint" : true
},
"editor.formatOnSave" : false,
"eslint.validate" : [
  "javascript",
  "typescript",
  "javascriptreact",
  "typescriptreact"
],
"eslint.alwaysShowStatus": true,

LF of CLRF

Lijnen code worden onderbroken (line endings) door een LF of CLRF karakter:
- LF voor Unix en MacOS
- CLRF voor Windows
Aanpassen op file niveau

LF of CLRF

Aanpassen in je hele VSCode doe je door een als allereerste lijn in settings.json toe te voegen
Voor LF

{
    "files.eol": "\n",
}

Voor CLRF

{
    "files.eol": "\r\n",
}

Aanpassen rules

Je kan nu regels toevoegen onder rules in de eslint config

rules: {
  'prettier/prettier': 'error',
  'import/prefer-default-export': 'off',
  'import/extensions': 'off',
},

Meer over regels kan je hier vinden.