ESLint plugin with lint rules for Griffel
npm install @griffel/eslint-pluginESLint plugin to follow best practices and anticipate common mistakes when writing styles with Griffel
``bash`
yarn add --dev @griffel/eslint-pluginor
npm install --save-dev @griffel/eslint-plugin
Add @griffel to the plugins section and plugin:@griffel/recommended to the extends section of your .eslintrc configuration file:
`json`
{
"plugins": ["@griffel"],
"extends": ["plugin:@griffel/recommended"]
}
This plugin exports recommended configuration that enforce good practices, but you can choose to use only the ones that are necessary for your use case:
`json`
{
"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.
Key: 🔧 = fixable
| Name | Description | 🔧 |
| ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | --- |
| @griffel/hook-naming | Ensure that hooks returned by the makeStyles() function start with "use" | ❌ |@griffel/no-invalid-shorthand-arguments
| | All shorthands must not use space separators, and instead pass in multiple arguments | ✅ |@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 | ❌ | limitations) | ❌ |@griffel/pseudo-element-naming
| | Ensures that all Pseudo Elements start with two colons | ✅ |@griffel/top-level-styles
| | Ensures that all makeStyles(), makeResetStyles() and makeStaticStyles() calls are written in the top level of a file to discourage developer misuse. | ❌ |@griffel/no-deprecated-shorthands` | Ensure that deprecated shorthand functions are not used | ❌
|