React Router Devtools Editor Configuration

Everyone uses their own editors, so it's important to be able to configure the editor that React Router Devtools will open your files in.

type EditorConfig = {
  name: string;
  open(path: string, lineNumber: string | undefined): void;
}

​

name

The name of the editor that will be displayed on the Open in Editor button.

​

open

This function will be called when the user clicks the Open in Editor button. It will receive the path to the file and the line number to open the file at. This function will both handle the case where you shift + right click an element on the page AND the open in X button in the UI, they return different values so be sure to cover both of them.

import { exec } from "node:child_process";
import { normalizePath } from "vite";

function open(path: string, lineNumber: string | undefined) {
  exec(`code -g "${normalizePath(path)}${lineNumber ? `:${lineNumber}` : ""}"`);
}

​

Editors

Below are some examples of configurations for popular editors.

​

VS Code

To use VS Code as your editor, you don't need to do anything, it's the default editor.

​

WebStorm

To use WebStorm as your editor, you can use the following configuration:

import { exec } from "node:child_process";
import { cwd } from "node:process";

const editor = {
  name: "WebStorm",
  open(path, lineNumber) {
    exec(
      `webstorm "${process.cwd()}/${path}" --line ${lineNumber ? `--line ${lineNumber}` : ""}`.replace(
        /\$/g,
        "\\$",
      ),
    );
  },
};

​

GoLand

To use WebStorm as your editor, you can use the following configuration:

import { exec } from "node:child_process";
import { cwd } from "node:process";

const editor = {
  name: "WebStorm",
  open(path, lineNumber) {
    if (!path) return;
    exec(
      `goland "${process.cwd()}/${path}" ${lineNumber ? `--line ${lineNumber}` : ""}`
    );
  },
};