[Feature]: Allow launch code editor for source doc of current page when serving locally

[hamishwillee]

Is your feature request related to a problem? Please describe.

When I am fixing a bug locally it is sometimes hard to find the source document I need to edit. Especially when I have hundreds of pages in my docs.

Describe the solution you'd like

Copy the Mozilla Developer Network solution (yari).

For a locally served page, the top of every page gets a link "Open in code editor". In the source tree you can specify a file .EDITOR, which in my case contains the text code.

When I select the link for a page, VS Code is launched with the source of that page.

This is very much faster than navigating source when I am editing documents and navigating between them.

Describe alternatives you've considered

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[chgeo]

I have implemented a similar feature that opens the file in VS Code. It uses the vscode:// URL scheme which nicely abstracts local executables.

[hamishwillee]

@chgeo Very cool. That would be sufficient for my needs, but perhaps not for people who have an editor preference.

[brc-dd]

Install https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en and use it's open in editor option. I'm not sure if it works with the firefox version of devtools.

You can alternatively use the vite plugin too:

// .vitepress/config.ts
import { defineConfig } from 'vitepress'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  vite: {
    plugins: [vueDevTools()]
  }
})

Docs - https://devtools.vuejs.org/
To configure your editor - https://devtools.vuejs.org/getting-started/open-in-editor (you can also configure it using LAUNCH_EDITOR env variable)

[hamishwillee]

@brc-dd Docs authors are not vue developers. They are never going to discover this, and they shouldn't have to.

Contrast the multi step operation to get this to work with what MDN does, which is instantly available to anyone.

So while I am appreciative of this personally I don't think pointing to the tools actually solves the need.

[brc-dd]

I don't think it will require vue knowledge to use the devtools's inspection button (when using vite plugin, you don't need any extra extension either):

Screen.Recording.2024-11-28.at.8.35.24.AM.mov

(This will work fine from next vitepress version.)

Alternatively, you can do something like this in your vitepress config:

import openEditor from 'open-editor'
import { defineConfig } from 'vitepress'

export default defineConfig({
  vite: {
    plugins: [
      {
        name: 'open-in-editor',
        configureServer(server) {
          server.middlewares.use('/__open-in-editor', (req, res, next) => {
            if (!req.url) return next()
            const q = new URL(req.url, 'http://a.com').searchParams
            const file = q.get('file')
            if (!file) return next()
            const line = Number.parseInt(q.get('line')) || 1
            const column = Number.parseInt(q.get('column')) || 1
            openEditor([{ file, line, column }])
            res.statusCode = 204
            res.end()
          })
        }
      }
    ]
  },
  themeConfig: {
    editLink: {
      text: process.env.CI ? 'Edit on GitHub' : 'Open in your editor',
      pattern: process.env.CI
        ? 'https://github.com/vuejs/vitepress/edit/main/docs/:path'
        : (c) => `${window.location.origin}/__open-in-editor?file=${encodeURIComponent(c.filePath)}`
    }
  }
})

[hamishwillee]

That second option looks great. Thank you.

[hamishwillee]

My preference is the suggestion for the plugin. I used it almost verbatim - just added some checking for the EDITOR being set since otherwise it crashes

            if (typeof process.env.EDITOR !== "undefined") {
              openEditor([{ file, line, column }]);
            } else {
              console.warn(
                "EDITOR environment variable is not set. Skipping opening file."
              );
            }

This does address the original requirement, so you could close this issue if you wanted.

Thank you very much for all the help.