Ga naar inhoud

Linting & Code Formatting

Table of Contents

Overview

At Lemone, we use three main tools for front-end linting and formatting: ESLint, Stylelint, and Prettier.

Philosophy

Linting vs Formatting: - Linting: Prevent errors and catch bugs (ESLint, Stylelint) - Formatting: Enforce style conventions and consistency (Prettier)

Tools

ESLint: JavaScript/TypeScript linting Stylelint: CSS/SCSS linting Prettier: Code formatting (optional, project-dependent)

Coding Standards

JavaScript

Rules based on: Airbnb JavaScript Style Guide

Key conventions: - Use double quotes (") - Follow Airbnb ES6+ best practices

Example: 

const greeting = "Hello, World!";

function getUserName(user) {
  return user?.name || "Anonymous";
}

CSS/SCSS

Rules based on: Sass Guidelines

Key conventions: 1. Use double quotes (") 2. Order properties alphabetically 3. Use BEM naming convention (.block__element--modifier) 4. Maximum nesting depth: 4 levels

Example: 

.card {
  background-color: white;
  border-radius: 8px;
  padding: 1rem;

  &__title {
    font-size: 1.5rem;
    font-weight: bold;

    &--highlighted {
      color: blue;
    }
  }
}

Editor Setup

VS Code

Required Extensions

Install these extensions:

  1. ESLint - JavaScript/TypeScript linting
  2. Stylelint - CSS/SCSS linting
  3. Tailwind CSS IntelliSense - Tailwind autocomplete
  4. Prettier - Code formatting (optional)

Configuration

Open settings.json: Press Cmd + Shift + P, search for "settings", and select "Preferences: Open User Settings (JSON)".

Basic Linting Setup

Add to your settings.json:

{
  // Disable built-in validators (let linters handle validation)
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "typescript.validate.enable": false,
  "javascript.validate.enable": false,

  // Tailwind CSS
  "tailwindCSS.emmetCompletions": true,

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

  // Set default formatter for SCSS
  "[scss]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },

  // Format on save
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },

  // Always use workspace indentation settings
  "editor.detectIndentation": false,

  // ESLint
  "eslint.packageManager": "yarn",
  "eslint.format.enable": true,

  // Set default formatter for JavaScript
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}
Prettier Configuration (Optional)

If using Prettier, add:

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

This ensures Prettier only runs when a .prettierrc file is present in the project.

Project Setup

WordPress (Sage 10)

Install required packages:

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

Example project: EPC Website

Configuration Files

File: .eslintrc.json

{
  "extends": "airbnb-base",
  "rules": {
    "quotes": ["error", "double"]
  }
}

File: .stylelintrc.json

{
  "extends": "stylelint-config-sass-guidelines",
  "rules": {
    "string-quotes": "double",
    "order/properties-alphabetical-order": true,
    "max-nesting-depth": 4
  }
}

Static Sites (ParcelJS)

Install required packages:

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

Example project: Lowlands Community

Shopify

Warning

Setup documentation for Shopify projects is pending.

Ruby on Rails

Warning

Setup documentation for Rails projects is pending.

See ERB/HTML Formatting for Rails template formatting.

ERB/HTML Formatting

For Ruby on Rails projects using ERB templates.

Setup

Step 1: Install the gem

gem install htmlbeautifier

Step 2: Install VS Code Extension

Install: ERB Formatter/Beautify

Extension ID: aliariff.vscode-erb-beautify

Step 3: Configure VS Code

Add to settings.json:

{
  "[erb]": {
    "editor.defaultFormatter": "aliariff.vscode-erb-beautify",
    "editor.formatOnSave": true
  },
  "files.associations": {
    "*.html.erb": "erb"
  }
}

Step 4: Test

Open any .html.erb file and save. The file should automatically format.

Resources

Tips & Tricks

Disabling Stylelint Rules

Sometimes you need to ignore specific rules. Use inline comments to disable linting:

Disable all rules for one line: 

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

Disable specific rules: 

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

Disable for entire block: 

/* stylelint-disable */
.my-class {
  /* Your non-compliant code */
}
/* stylelint-enable */

Warning

Use exceptions sparingly! If you find yourself disabling a rule frequently, propose changing the rule instead of disabling it everywhere.

Resources: Stylelint: Ignore Code

Disabling ESLint Rules

Disable all rules for one line: 

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

Disable specific rule: 

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

Disable for entire file: 

/* eslint-disable no-console */
console.log("Debug info");
console.log("More debug info");

Disable for next line: 

// eslint-disable-next-line no-console
console.log("This line won't trigger a warning");

Warning

Use exceptions sparingly! If you find yourself disabling a rule frequently, propose changing the rule instead.

Resources: ESLint: Disabling Rules

Known Issues

Stylelint Stylistic Rules

Issue: Stylelint has frozen stylistic rules and now recommends using Prettier alongside Stylelint for formatting.

Impact: - number-leading-zero - Bug won't be fixed - number-no-trailing-zeros - Bug won't be fixed

Future Plans: We're evaluating integrating Prettier for formatting. This requires: - Making Prettier work alongside ESLint/Stylelint - Only enabling Prettier when .prettierrc is present - Integrating Tailwind class sorting

Tailwind Class Sorting

Status: Pending implementation

We want to integrate automatic Tailwind class sorting with Prettier, but this needs to be configured properly to work with our existing linting setup.

Reference Projects

Examples of properly configured linting setups:

Frontend Boilerplate: codepot.nl/developers/frontend/boilerplate WordPress (Sage 10): EPC Website Static Site (ParcelJS): Lowlands Community

See Also