NextJS - App Router 'use client' Inserter at Line 1

This VSCode extension helps you easily insert the 'use client' directive at the top of your Next.js client components. The extension provides a command to insert 'use client' at line 1 or at the current cursor position based on your preference.

TLDR

Install from official marketplace here

Or work with the source:

Open VSCODE
Open options menu ctrl/cmd + p (or rebind to ctrl + ctrl like a real gigachad)
type > extension install from vsix or > vsix will do. > Enter -Search for nextjs-use-client-inserter-helper-1.0.0.vsix and install that and g2g.

Features

Inserts 'use client' at line 1 of your file.
Configurable to insert the directive at the current cursor position instead.
Avoids inserting duplicate directives if it's already present at the top.

Local Installation

Clone the repository:

git clone https://github.com/remcostoeten/vscode-extension-insert-use-client-for-nextjs-with-ease.git

Navigate to the project directory:

cd vscode-extension-insert-use-client-for-nextjs-with-ease

Install the dependencies:
```
npm install
```
Build the extension:
```
npm run build
```
For this step the vsce cli is needed. Google for this, easy install. Or just directly install the .vsix from the repo.
Open the project in VSCode:
```
   vsce package
   ``` 
```

Usage

Refer to TLDR section

Configuration

You can customize the behavior of this extension by adding the following settings to your settings.json in VSCode:

{
  "useClientInsertion.insertOnFirstLine": true,
  "useClientInsertion.wordToInsert": "\"use client\";"
}