Linting opzet

Voor front-end developement zijn er 3 meest gebruikte oplossingen voor linting en formatting. Eslint, Stylelint en Prettier. De conventie is om;

1. linting te gebruiken om fouten te voorkomen; en
2. formatting voor het bewaken van stijl afspraken.

ToDo

To get a perfect setup, the following things need to be resolved.

Look into formatting with Prettier, see known issue about stylistic rules.

• How to make it work together with linting
• Only make it work when a prettier file is present
• Tailwind class sorting

Linting afspraken

Stylesheets

1. Onze regels zijn gebasseerd op de Sass Guidelines
2. We gebruiken dubbele quotes
3. We ordenen onze … alphabetisch
4. We gebruiken BEM als naming conventie
5. We nesten maximaal 4 diep

Javascript

1. Onze regels zijn gebasseerd op de Airbnb regels
2. We gebruiken dubbele quotes

Editor Setup

VS Code

Benodigde plugins

1. Eslint
2. Stylelint
3. Tailwind Css Intellisense
4. Prettier

Settings

Om de settings.json te openen gebruik de toetsencombinatie cmd + shift + p. In het command panel zoek je vervolgens op “settings” en klik je op “Preferences: Open User Setting (JSON)“.

settings.json

{
  …
  // Disable the editor default validation
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "typescript.validate.enable": false,
  "javascript.validate.enable": false,

  // Add tailwind classess to emmet
  "tailwindCSS.emmetCompletions": true,

  // Stylint specific settings
  "stylelint.packageManager": "yarn",
  "stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss"
  ],
  "stylelint.snippet": [
    "css",
    "less",
    "postcss",
    "scss"
  ],

  // Css and Scss default formatter
  "[scss]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },

  // Editor save settings
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },

  // Disable indentation detection, but always use preferences
  "editor.detectIndentation": false,

  // Eslint specific settings
  "eslint.packageManager": "yarn",
  "eslint.format.enable": true,

  // Javascript and Typescript default formatter
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  …
}

Prettier specific settings

{
  …
  "prettier.requireConfig": true,
  "prettier.useEditorConfig": false,
  …
}

Developments stacks setup

Een voorbeeld van de opzet voor de development stack kan gevonden worden in de frontend boilerplate op Codepot.

Website: WordPress

Om linting werkend te krijgen in een Sage 10 project, heb je de volgende plugins nodig.

yarn add -D @roots/bud-eslint @roots/bud-stylelint eslint-config-airbnb-base stylelint-config-sass-guidelines

Een voorbeeld project is EPC.

Static: ParcelJS

Om linting werkend te krijgen in een ParcelJS, heb je de volgende plugins nodig.

yarn add -D @parcel/validator-eslint parcel-validator-stylelint eslint stylelint eslint-config-airbnb-base stylelint-config-sass-guidelines

Een voorbeeld project is Lowlands Community.

Shop: Shoppify

• Uitwerken

Application: Ruby on Rails

• Uitwerken

Tips & Tricks

Stylelint regels negeren

Soms komt het voor dat je een regel moet negeren, dit kan door stylelinting uit te schakelen of de specifieke stijlregel. Let op, dit zijn uitzonderingen! Moet je een bepaalde regel te vaak uitschakelen, stel dan een aanpassing voor.

.bg-gradient-transparent-to-purple-200 {
  --to-color: theme(colors.purple.200); /* stylelint-disable-line  */
}

.bg-gradient-transparent-to-purple-200 {
  --to-color: theme(
    colors.purple.200
  ); /* stylelint-disable-line number-leading-zero number-no-trailing-zeros */
}

Meer informatie

Eslint regels negeren

Soms komt het voor dat je een regel moet negeren, dit kan door eslinting uit te schakelen of de specifieke stijlregel. Let op, dit zijn uitzonderingen! Moet je een bepaalde regel te vaak uitschakelen, stel dan een aanpassing voor.

alert("foo"); /* eslint-disable-line */

alert("foo"); /* eslint-disable-line no-alert */

Meer informatie

Bekende issues

Stylelint

1. Stylint has frozen stylistic rules and recommends the use of Prettier alongside Stylelint.
2. Bug: number-leading-zero (won’t be fixed)
3. Bug: number-no-trailing-zeros (won’t be fixed)