Scripps Linter Configs

ESLint and Stylelint configurations for use in Scripps projects.

Installation

Install the package as a dev dependency:

npm install --save-dev @scrippsproduct/linter-configs

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install --save-dev eslint stylelint typescript browserslist @stylistic/stylelint-plugin stylelint-browser-compat stylelint-config-clean-order stylelint-config-recommended-scss stylelint-config-standard stylelint-scss

ESLint Setup

Create an eslint.config.js file in the root of your project:

import scrippsLinters from '@scrippsproduct/linter-configs';

export default [
    ...scrippsLinters['scripps-eslint-config'],
];

Stylelint Setup

1. Create Configuration File

Create a stylelint.config.js file in the root of your project:

import scrippsLinters from '@scrippsproduct/linter-configs';

export default {
    ...scrippsLinters['scripps-stylelint-config'],
};

2. Copy Custom Rules

Important: You need to copy the stylelint directory from this package to your project's root directory. This directory contains custom Stylelint rules required by the configuration.

# From your project root, copy the stylelint directory
cp -r node_modules/@scrippsproduct/linter-configs/stylelint ./stylelint

The custom rules in this directory include:

• bem-block-filename.js - Enforces BEM block naming conventions for filenames
• custom-rules-plugin.js - Plugin that loads the custom rules

Usage

Running ESLint

Add a script to your package.json:

{
  "scripts": {
    "lint:js": "eslint .",
    "lint:js:fix": "eslint . --fix"
  }
}

Then run:

npm run lint:js
npm run lint:js:fix  # To automatically fix issues

Running Stylelint

Add a script to your package.json:

{
  "scripts": {
    "lint:css": "stylelint '**/*.{css,scss,sass}'",
    "lint:css:fix": "stylelint '**/*.{css,scss,sass}' --fix"
  }
}

Then run:

npm run lint:css
npm run lint:css:fix  # To automatically fix issues

What's Included

ESLint Configuration

• JavaScript and TypeScript support
• React and React Hooks rules
• Stylistic formatting rules
• Custom rules including:
  • jsx-no-prop-comments - Prevents comments in JSX props

Stylelint Configuration

• Standard CSS/SCSS/Sass linting
• BEM naming conventions
• Browser compatibility checking
• Property ordering
• Stylistic formatting rules
• Custom rules including:
  • bem-block-filename - Enforces BEM block naming for filenames

Browser Compatibility

The Stylelint configuration includes browser compatibility checking targeting:

• > 0.3% in US
• not dead
• not Safari < 16
• not iOS Safari < 15

License

ISC

Author

EW Scripps