adobe / brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.
http://brackets.io
MIT License
33.27k stars 7.63k forks source link

Feature request: OctoLinker-like navigation within project via links in JavaScript #13053

Open petetnt opened 7 years ago

petetnt commented 7 years ago

This issue is a feature request / extension idea for a OctoLinker like interface for quickly opening files from within JavaScript (or other files).

If you aren't familiar with OctoLinker it works something like this:

  1. Search for imports / requires / other links within the document, examples:
const foo = require("./foo"); // foo.js in the same folder
import foo from "./foo" // foo.js in the same folder
const bar from "../../bar/bar"; // relative link
const handlebars = require("handlebars"); // npm module called handlebars
import handlebars from "handlebars"; // npm module called handlebars
  1. Hover over the link part ("./foo", "handlebars" (optionally while holding a button) and it should appear as clickable link

  2. Click on the link and it

swmitra commented 7 years ago

Interesting feature @petetnt. I always wanted this feature to be available at least for HTML files. This can be extended to pretty much all language types to ease up the document navigation. I hope someone should pick it up or else we have to start working on it 😊

justinrusso commented 7 years ago

I might give this a try, seems like a great addition. I'd imagine this would be considered a default extension.. how does LinkParser sound?

I'm thinking not only for require/imports, but even the ability to click on a link in the code, like "github.com". Also, should it be bound to a keybind? I've used editors with a feature like this before, and they used (hold) Ctrl + click. I noticed in Brackets holding the Ctrl key gives you the option to edit multiple spots in the text at once.

petetnt commented 7 years ago

@justinrusso that sounds great 👍 Some links are already parsed (like images inline) so that might be good starting point on how to add this feature for code imports and such.

I think the best start would be handling ES6 imports and CommonJS imports in the filesystem and continuing with that.

justinrusso commented 7 years ago

That'll be useful! Do you know where the image parsing is located? Thanks!

justinrusso commented 7 years ago

Should npm modules go to npmjs.org or should they link to the src inside node_modules?