ESLint Plugin Primer React Development

Expert development workflow for eslint-plugin-primer-react, an ESLint plugin providing rules for validating and auto-fixing Primer React component usage.

Overview

This skill provides comprehensive instructions for developing, testing, and maintaining ESLint rules within the primer/eslint-plugin-primer-react repository. This is a JavaScript-based ESLint plugin with no build step required.

Step-by-Step Instructions

1. Bootstrap and Setup

Before starting any development work:

```bash

Verify Node.js version (v20+ required, v20 is current standard)

node --version && npm --version

Install dependencies (takes ~60 seconds)

npm ci

```

**Important**: No build step is required. Main entry point is `src/index.js`.

2. Understanding Repository Structure

Familiarize yourself with key directories:

3. Development Commands

All validation commands are very fast:

```bash

Run tests (5 seconds)

npm test

Run JavaScript linting (1.5 seconds)

npm run lint

Run Markdown linting (<1 second)

npm run lint:md

Check formatting (0.5 seconds)

npm run format:check

Fix formatting

npm run format

```

4. Adding a New Rule

Follow this sequence:

1. **Create rule implementation**: `src/rules/new-rule-name.js`

2. **Create test file**: `src/rules/__tests__/new-rule-name.test.js`

3. **Export rule**: Add to `src/index.js` rules object

4. **Document rule**: Create `docs/rules/new-rule-name.md`

5. **Optional**: Add to `src/configs/recommended.js` for recommended preset

6. **Validate**:

```bash

npm test

npm run lint

```

5. Modifying Existing Rules

When updating a rule:

1. **Edit rule**: Modify `src/rules/rule-name.js`

2. **Update tests**: Modify `src/rules/__tests__/rule-name.test.js`

3. **Update docs**: Modify `docs/rules/rule-name.md` if behavior changed

4. **Validate changes**:

```bash

npm test

npm run lint

```

6. Manual Rule Testing

Test individual rules interactively:

```bash

node -e "

const rule = require('./src/rules/RULE_NAME');

const {RuleTester} = require('eslint');

const ruleTester = new RuleTester({

parserOptions: {

ecmaVersion: 'latest',

sourceType: 'module',

ecmaFeatures: { jsx: true }

}

});

ruleTester.run('test', rule, {

valid: [{ code: 'VALID_CODE_HERE' }],

invalid: [{ code: 'INVALID_CODE_HERE', errors: [{ messageId: 'MESSAGE_ID' }] }]

});

"

```

7. Testing Strategy

**After making rule changes**:

```bash

Run specific rule test

npm test -- --testNamePattern="rule-name"

Run all tests

npm test

Manual testing using Node.js snippet (see step 6)

```

**Before committing**:

```bash

Run all validations (total ~8 seconds)

npm run lint # 1.5 seconds

npm run lint:md # <1 second

npm run format:check # 0.5 seconds

npm test # 5 seconds

```

8. Changesets (for releases)

When making changes that should be published:

```bash

Create a changeset

npx changeset

Check changeset status

npx changeset status

```

9. Troubleshooting

**Common issues and solutions**:

Key Principles

1. **Always reference these instructions first** before searching or running exploratory commands

2. **Always run tests** after making changes - tests are fast (5 seconds)

3. **No build step required** - this is a direct JavaScript project

4. **All validation commands are fast** - no need for extended timeouts

5. **Follow the rule development pattern** - implementation, tests, docs, export

Rule Development Pattern

Every rule follows this consistent structure:

1. Implementation: `src/rules/rule-name.js`

2. Tests: `src/rules/__tests__/rule-name.test.js` (using ESLint RuleTester)

3. Documentation: `docs/rules/rule-name.md`

4. Export: Add to `src/index.js`

5. Config: Optionally add to `src/configs/recommended.js`

Command Reference

Quick reference with execution times:

| Command | Purpose | Time |

|---------|---------|------|

| `npm ci` | Install dependencies | 60s |

| `npm test` | Run all tests | 5s |

| `npm run lint` | Lint JavaScript | 1.5s |

| `npm run lint:md` | Lint Markdown | <1s |

| `npm run format:check` | Check formatting | 0.5s |

| `npm run format` | Fix formatting | ~0.5s |

Constraints