Remix Forge

Remix Forge - A VS Code extension for Remix.run applications that super charges your development with a ever-growing set of functionalities.

Whats new?

Added MonoRepo support
Added ability to inject code snippets into your active editor via right-click
Added ability to initialize a project for shadcn/ui components in Remix
Added ability to generate all supported components by the shadcn/ui CLI
Added ability to initialize eslint and prettier in your Remix project
Added ability to generate test files for your routes (or anything else)
Added ability to initialize Prisma in your Remix app
Added ability to generate progressively enhanced form routes with a single click
Added ability to generate the whole authentication scaffolding for Remix applications with a single click
Added a notification on startup that lets you know there is a new version of Remix.run available

Features

Insert Remix code snippets in your current editor

Right click the line where you want to insert a snippet and click the corresponding command you want to run. This will insert the snippet in your current editor at the line you right clicked. (eg. insert loader => inserts loader into the file)

Get your Remix project shadcn/ui ready

Right click your package.json and initialize all the setup required for shadcn/ui tailored to Remix instead of Next.js. This will add the following to your project:

tailwind config and turn on the tailwind Remix compiler if not done already
Adds the css file and imports it into root if possible
Sets up the utils folder in the specified directory
Adds the @/ alias to your tsconfig.json

After that right click your app folder and add the shadcn/ui components to your application, just specify where you want to store them and you're good to go. The extension will generate the components for you and add them to your app/components/ui folder by default, or the location specified by you and remember it.

Initialize eslint and prettier in your Remix project

Right click your package.json file and add eslint and prettier to your project configured with remix eslint

Generate test files for your routes (or anything else)

Right click your .ts or .tsx file and click Generate tests and it will generate a test file for you with all the exports imported and ready to be tested. This is useful for when you want to test your routes or any other file that you want to test.
If you do not colocate your test files the extension will try to find it in your workspace depending on your search settings. See the Extension Settings section on how you can customize your search.
If you already have an existing file it will add all the exports that you didn't import into the file for you (eg. if you already tested your loader and component and you add an action it will only add the action import and the action test for you)

This works for any .ts and .tsx file and is not specific to remix routes. You can use this for any file that you want to test.

Initialize Prisma in your Remix app

You can now initialize Prisma in your Remix app with a single click. You can do this by right-clicking your app folder and selecting Initialize Prisma and it will be initialized for you. You choose your database and it will be configured for you. Also adds package.json commands for running migrations, seeding the database, generating the client and running prisma studio.

Update Remix to a newer version

You can now update your Remix to a newer version with a single click. You can do this by right-clicking your package.json file and selecting Update Remix and it will be updated for you. You can update to the latest version or specify a version you want to update to. Defaults to the latest one. This uses npx upgrade-remix built and maintained by the Remix team. Github repo here

Generate Progressively Enhanced Form Routes with zod validation

You can now generate progressively enhanced form routes with a single click. You can either generate progressive forms with:

remix-hook-form - React-hook-form wrapper for Remix.run applications
Conform - Progressively enhanced form generation library

Click on the routes folder or anywhere inside of it and select Generate Remix Form Route and it will be generated for you.

Generating authentication flows

You can now generate the whole authentication scaffolding for Remix applications with a single click. This includes:

auth0
facebook
github
google
microsoft
discord
twitter
oauth2
form (email/password)

Right click the app folder and select Generate Authentication Workflow and select the authentication method(s) you want to use. After that fill the required secrets inside of the .env file and you are good to go.

Generating authentication for loaders and actions

You can now add authentication to your loaders and actions with a click. Click the Add authentication above a loader or action and it will auto generate the authentication using remix-auth.

This is configurable and you can change the import statement to reflect your authenticator location. See the Extension Settings section on how you can customize your output

Opening routes in the browser

You can now open up your routes in the browser from the route file itself. This is useful for when you want to test out your routes without having to go to the browser and type in the url or navigate to it.

Each route file with the default export will have a button(s) above the default export that will open up the route in the browser by clicking it.

This is configurable and you can change the url generator function and the paths that you want to generate urls for. See the Extension Settings section on how you can customize your output

Route File Generation

Generates every possible export from a route file for Remix.run applications. You can do this by right-clicking your routes folder and selecting convert to v2 convention. Including:

dependencies
loader function
links function
ErrorBoundary component
default Component
shouldRevalidate function
meta function
action function
headers function
handle function

Tip: This is highly configurable per workspace. See the Extension Settings section on how you can customize your output

Routing Convention Conversion

Converts the v1 routing convention to the v2 routing convention. This command will try to convert your routes from v1 to v2 and if anything goes wrong it will restore your routes to initial state. Just in case PLEASE make sure you have a backup in case something unexpected happens or you find a bug. In case of a bug feel free to submit an issue on our Github repository.

Barrelize

Barrelize your folders with a click. This will generate a barrel file for the selected folder and will export all the files inside of it. This will be done recursively for all the subfolders as well.

This is useful for when you want to import a lot of imports from a directory and you don't want to import each file individually.

Tip: See the Extension Settings section on how you can customize your output