Linting & Formatting Setup

This guide documents how I set up and configure linting and formatting tools—ESLint, Prettier, and Stylelint—in JavaScript/React projects.

These tools help enforce consistent code quality and style across the codebase, reduce bugs, and remove friction during collaboration or solo development.

Installation

ESLint

npm init @eslint/config@latest

Follow the prompts to configure your project.

Prettier

npm install --save-dev --save-exact prettier

Then create a .prettierrc file in the root of your project.

Stylelint

npm install --save-dev stylelint stylelint-config-standard-scss

Create a stylelint.config.js file:

/** @type {import('stylelint').Config} */
export default {
  extends: ["stylelint-config-standard-scss"]
};

Then, if you’re using VS Code (or Cursor), install the Stylelint extension and add the following to your settings.json (open with Cmd+Shift+P → Preferences: Open Settings (JSON)):

{
  "stylelint.validate": ["scss", "css"],
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
}

Current Configs

Prettier (`.prettierrc`)

{
  "printWidth": 100
}

ESLint (`eslint.config.js`)

import js from "@eslint/js";
import globals from "globals";
import pluginReact from "eslint-plugin-react";
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    files: ["**/*.{js,mjs,cjs,jsx}"],
    plugins: { js },
    extends: ["js/recommended"],
    languageOptions: { globals: globals.browser },
  },
  pluginReact.configs.flat.recommended,
]);

Stylelint (`stylelint.config.js`)

/** @type {import('stylelint').Config} */
export default {
  extends: ["stylelint-config-standard-scss"],
  rules: {
    // Don't require empty lines before @include, @extend, etc.
    "declaration-empty-line-before": "never",

    // Enforce kebab-case or BEM-style class names
    "selector-class-pattern": [
      "^[a-z][a-z0-9]*(?:-[a-z0-9]+)*(?:__(?:[a-z0-9]+(?:-[a-z0-9]+)*))?$",
      {
        message: "Expected class selector to be kebab-case or BEM-style (block__element--modifier)",
      },
    ],
  },
};