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 prettiernpm 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.
ESLint & Prettier
By timdpaep
