eslint-plugin-grommet

0.2.0 verified Fri May 01 auth: no javascript

An ESLint plugin providing lint rules for enforcing Grommet component best practices and accessibility (a11y). Current stable version is 0.2.0, released September 2023. It includes rules like anchor-label, formfield-htmlfor-id, button-icon-a11ytitle, etc. The plugin follows a semver-like cadence with minor feature releases. Key differentiators: it complements Grommet's own a11y guidance and reduces manual review for common misuses. Peer dependency: eslint ^7.31.0.

Common errors

error ESLint couldn't find the plugin "eslint-plugin-grommet". ↓

cause Package not installed or symlinked incorrectly.

fix

Run npm install --save-dev eslint-plugin-grommet

error Configuration for rule "grommet/anchor-label" is invalid: Severity should be one of: 0, 1, 2 (off, warn, error). ↓

cause Using a string like 'error' instead of numeric severity in some old config format.

fix

Use 2 for error, 1 for warn, or 0 for off, or ensure your config format allows severity strings (ESLint supports strings).

error Rule 'grommet/formfield-htmlfor-id' is not defined in the config. ↓

cause Plugin not loaded or rule not available in the version.

fix

Ensure plugin is in plugins array and you're using v0.2.0 or later.

Warnings

gotcha Recommended config overrides may suppress important a11y checks. ↓

fix Use 'extends: ["plugin:grommet/recommended"]' and only disable rules sparingly after understanding consequences.

gotcha ESLint peer dependency must be ^7.31.0 or later; older versions may cause unexpected behavior. ↓

fix Upgrade ESLint to >=7.31.0 (as per peerDependencies).

gotcha Plugins array may be omitted if only using recommended config, but then custom rules won't work without it. ↓

fix If you need to override any rule, include "plugins": ["grommet"] in .eslintrc.

Install

npm install eslint-plugin-grommet

yarn add eslint-plugin-grommet

pnpm add eslint-plugin-grommet

Imports

plugin (recommended config)
wrong
```
// Missing plugins or extension prefix
{
  "extends": ["grommet/recommended"]
}
```
correct
```
// .eslintrc
{
  "extends": ["plugin:grommet/recommended"],
  "plugins": ["grommet"]
}
```
Use 'plugin:grommet/recommended' to activate recommended rules. Plugins section is optional if using config only, but required for custom rule overrides.

specific rule

wrong

{
  "rules": {
    "anchor-label": "error"
  }
}

correct

// .eslintrc
{
  "rules": {
    "grommet/anchor-label": "error"
  }
}

Rule names must be prefixed with 'grommet/'.

require in Node.js (CJS)

wrong

const plugin = require('@grommet/eslint-plugin-grommet');

correct

const plugin = require('eslint-plugin-grommet');

Package is 'eslint-plugin-grommet', not scoped.

Quickstart

Shows installation and configuration to enable recommended rules and customize specific rules like 'anchor-label' and 'formfield-htmlfor-id'.

// Install: npm install --save-dev eslint eslint-plugin-grommet
// .eslintrc.json
{
  "extends": ["plugin:grommet/recommended"],
  "plugins": ["grommet"],
  "rules": {
    "grommet/anchor-label": "error",
    "grommet/formfield-htmlfor-id": "warn"
  }
}