@griffel/eslint-plugin

v1.4.0
ESLint plugin with lint rules for Griffel

ESLint plugin for Griffel

ESLint plugin to follow best practices and anticipate common mistakes when writing styles with Griffel

Install

yarn add --dev @griffel/eslint-plugin
# or
npm install --save-dev @griffel/eslint-plugin

Usage

Add @griffel to the plugins section and plugin:@griffel/recommended to the extends section of your .eslintrc configuration file:

{
  "plugins": ["@griffel"],
  "extends": ["plugin:@griffel/recommended"]
}

Shareable configurations

This plugin exports recommended configuration that enforce good practices, but you can use only uses that are required for your use case:

{
  "plugins": ["@griffel"],
  "rules": {
    "@griffel/hook-naming": "error",
    "@griffel/no-shorthands": "error",
    "@griffel/pseudo-element-naming": "error"
  }
}

You can find more info about enabled rules in the Supported Rules section below.

Supported Rules

Key: 🔧 = fixable

Name Description 🔧
@griffel/hook-naming Ensure that hooks returned by the makeStyles() function start with "use"
@griffel/no-shorthands Enforce usage of CSS longhands
@griffel/styles-file Ensures that all makeStyles() and makeResetStyles() calls are placed in a .styles.js or .styles.ts file
@griffel/pseudo-element-naming Ensures that all Pseudo Elements start with two colons
npm i @griffel/[email protected]

Metadata

  • MIT
  • Whatever
  • Unknown
  • released 9/15/2023

Downloads