NOTE: this package isn't actively maintained anymore. I have since switched to VSCode. I'll still review and merge Pull Requests if there are any, and I'm also open to adding contributors to the repo if there's interest.
Contributions and Pull Requests are welcome.
apm install jump-to-importNOTE: please do the following before submitting an Issue
- enable debug logging in package settings (check box next to
Enable Debug) - in Atom's devtools (CMD+ALT+I), you'll see a log named
[jump-to-import] Debug Report: Object - click the
down arrownext toObjectto expand it, then copy and paste the log into a GitHub Issue
Privacy Note: please be aware that this will submit the following information to me:
- what string you attempted to jump to
- your path aliases
- user options for this package
- file paths that couldn't be found
- whether the file was a Javascript or HTMLBars file
Quickly jump to an ES6 module file from its import path or variable. Also supports jumping to Ember.Service definitions (with alias support), as well as Ember.Component template files from an HTMLBars file.
Support for project-specific settings/aliases via .jump-to-import, additional aliases via .babelrc and/or webpack.config.js
package.jsonrequired at root of project- used to figure out the project name to use when converting magic paths to the real file path
- Commands:
jump-to-import:go-to-module(default keybind: CTRL+ALT+E)jump-to-import:create-project-configjump-to-import:debug-log
- Jump to:
- imported file from path, variable name, or method name
- supports
importandrequiresyntax - supports path aliasing
- supports NPM and Bower modules (including
npm:foosyntax forBrowserify) - multi-line, destructured
importstatements
- supports
Ember.Servicefiles, with or without pod structure- supports
Ember.Servicename aliasing
- supports
Ember.Componenttemplate files, with or without pod structure- from an
.hbsfile, component names can jump to their template file
- from an
- imported file from path, variable name, or method name
hyperclicksupport:- you can now click on variable names, import paths or methods
- installing
hyperclickis a requirement if you plan to use this functionality - you may need to configure
hyperclickto use an appropriate hotkey
babel-plugin-module-resolversupport:- loads path overrides from project's
.babelrc
- loads path overrides from project's
- NEW: very basic Webpack Module Alias support
- this only supports the
resolve.aliassection of thewebpack.config.js - NOTE: any modification to
webpack.config.jsrequires reloading Atom for now
- this only supports the
- Multiple project root folders
- Configurable settings:
- Project-specific settings via
.jump-to-importfile - Custom path aliases
Ember.Servicename aliasing- Ability to disable custom path overrides,
.babelrcoverrides,hyperclicksupport - Prioritized list of file extensions to check (defaults to
jsandjsx)
- Project-specific settings via
Press CTRL+ALT+E with the cursor either on:
- an ES6
import/requirepath - the imported namespace/variable
- a method on the imported namespace
- an
Ember.Servicedependency injection (i.efoo: Ember.inject.service())
to open that file and jump to the relevant method, if applicable.
Hold your hyperclick toggle key and click on any applicable string to jump to that module.
The package looks for configuration options and path aliases in two places:
- package settings
.jump-to-importfiles (project settings).babelrcfiles (babel aliases)
These are simply accessed in Atom's Settings > Packages > Jump To Import. These are basically global settings that will apply to any project.
You can define your own path aliases in Settings.
Default aliases are:
$PROJECT:app$PROJECT/config:config
With the above default settings (for Ember projects) we would get the following behavior:
PROJECT_NAME/components/foo->app/components/foo.jsPROJECT_NAME/config/environment->config/environment.js
PROJECT_NAME in the path needs to match the project name defined in your package.json file in the root directory.
The package will look for a package.json file in every root directory of the project to determine project names.
You can also define a list of file extensions to look for.
You can define Ember.Service name aliases, in case the injected variable name and registered service name differ.
Optionally, you can add a .jump-to-import file in any root folder of your project which will take precedence over the package settings. These allow for project-specific settings and aliases.
You can trigger the jump-to-import:create-project-config through the Command Palette to generate a default config.
NOTE: Project settings only apply to the root directory they belong to.
Here's a sample config, using default settings:
{
"usePendingPane": true,
"openInSeparatePane": true,
"panePosition": "right",
"useEmberPods": true,
"fileExtensions": [
"js",
"jsx"
],
"pathOverrides": [
"$PROJECT:app",
"$PROJECT/config:config",
"$PROJECT/tests:tests"
],
"serviceOverrides": [
"fastboot:boot"
],
"disablePathOverrides": false,
"disableBabelRc": false,
"disableHyperclickSupport": false
}Optionally, you can use path aliases defined in .babelrc. A sample file looks like:
{
"plugins": [
["module-resolver", {
"root": ["./src"],
"alias": {
"utils": "./utils"
}
}]
]
}With the above .babelrc file, a path of utils/test will resolve to ./src/utils/test.js
Project settings and aliases defined in .jump-to-import will always take priority. Next, .babelrc aliases take precedence over aliases defined in Package Settings.
Remember, .jump-to-import > .babelrc > Package Settings
With the following import line:
// assuming the project's name is defined as `my-project` in `package.json`
// with cursor on, or selecting, `FooMixin` or the path, will open project-root/app/mixins/foo.js
import FooMixin from 'my-project/mixins/foo'
// with cursor on, or selecting, bar, will open project-root/app/mixins/foo.js and jump to the bar() method
FooMixin.bar();