Next.js Auto 'use client' Directive

Next.js Auto 'use client' Directive is a Visual Studio Code extension that automatically adds the "use client" directive to the beginning of your JavaScript and TypeScript files when it detects the usage of certain client-side hooks.

Features

• Automatically adds the "use client" directive to JavaScript and TypeScript files.
• Prompts for directive addition when client-side hooks are detected.
• Supports Next.js project detection.
• Manual addition via keyboard shortcut: Quickly add the "use client" directive using a keyboard shortcut.

Requirements

• Visual Studio Code (version 1.88.0 or higher)

Installation

You can install Next.js Auto 'use client' Directive via the Visual Studio Code Marketplace or by downloading the VSIX file directly and installing it manually.

Usage

Once installed, Next.js Auto 'use client' Directive will automatically detect client-side hooks usage in your JavaScript and TypeScript files. When it detects such usage, it will prompt you to add the "use client" directive. You can also trigger this manually using the command palette or the keyboard shortcut.

Commands

• extension.addUseClientDirective: Manually add the "use client" directive to the current document.

Keyboard Shortcuts

You can use the following keyboard shortcuts for different functionalities:

• Windows/Linux:

  • Ctrl + S: Check for client hooks and prompt to add "use client" directive.
  • Ctrl + Alt + U: Directly add the "use client" directive without prompting.

• Mac:

  • Cmd + S: Check for client hooks and prompt to add "use client" directive.
  • Cmd + Alt + U: Directly add the "use client" directive without prompting.

Contributing

Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue or submit a pull request on the GitHub repository.

License

This extension is licensed under the MIT License.