eslint-plugin-enforce-use-client

An ESLint plugin to ensure proper usage of the 'use client' directive in Next.js React components.

Description

In Next.js applications using the App Router, components that use client-side features (React hooks, browser APIs, event handlers) must include the 'use client' directive at the top of the file. This plugin helps enforce this requirement by:

1. Requiring the 'use client' directive in files with client-side features
2. Warning about unnecessary 'use client' directives in files without client-side features

Installation

npm install --save-dev @serviceup/eslint-plugin-enforce-use-client
# or
yarn add --dev @serviceup/eslint-plugin-enforce-use-client
# or
pnpm add --save-dev @serviceup/eslint-plugin-enforce-use-client

Usage

Add to your ESLint configuration:

// .eslintrc.js
module.exports = {
  plugins: ['@serviceup/enforce-use-client'],
  extends: [
    'plugin:@serviceup/enforce-use-client/recommended'
  ]
};

Rules

This plugin provides two rules:

enforce-use-client

Enforces that React component files using client-side features include the 'use client' directive at the top.

Features detected:

• React hooks (functions starting with "use")
• Browser APIs (window, document, navigator, localStorage, sessionStorage)
• JSX event handlers (onClick, onChange, etc.)
• JSX elements presence

This rule is auto-fixable and will add the directive when needed.

warn-unnecessary-use-client

Warns when the 'use client' directive is used unnecessarily in files without any client-side features.

This rule is auto-fixable and will remove the directive when it's not needed.

Configuration

Both rules automatically skip test files (files with names containing .test. or .spec.).

Requirements

• ESLint 8.0.0 or higher
• Next.js 13.4.0 or higher (with App Router)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Development

Running Tests

After cloning the repository and installing dependencies:

npm install
npm test

The tests verify that both rules correctly identify valid and invalid usage of the 'use client' directive.