Sublime HyperClick
Quickly and easily jump between your files.
The missing part of Go to definition
functionality in Sublime.
Most of the time when you are navigating and reading a code-base, you need to
jump between required/imported (whatever jargon your programming language uses)
files. Go to Definition
functionality of Sublime, trying to be a generic solution,
falls short for most languages since jumping between these required files needs
some knowledge about how the language or package manager of the language is working.
HyperClick tries to solve this issue. Currently, it knows how to jump between files in the following languages, but it can easily be extended to add more languages:
Supported Languages and Syntaxes
Language | Syntax |
---|---|
Javascript | ecmascript.sublime-syntax JavaScript.sublime-syntax JavaScript (Babel).sublime-syntax JavaScriptNext.tmLanguage |
Sass | SCSS.tmLanguage Sass.tmLanguage |
Less | LESS.tmLanguage |
Stylus | Stylus.tmLanguage |
PHP | PHP.sublime-syntax PHP Source.sublime-syntax |
HTML | HTML.sublime-syntax |
JSTL | JSTL.sublime-syntax |
CSS/PostCSS | CSS.sublime-syntax PostCSS.tmLanguage |
Pug | Pug.tmLanguage |
SugarSS | Sss.tmLanguage SugarSS.tmLanguage |
SugarML | SugarML.tmLanguage |
Nunjucks | Nunjucks.tmLanguage |
Jinja2 | Jinja2.tmLanguage |
Twig | HTML (Twig).tmLanguage Craft-Twig.tmLanguage |
You can contribute and add more languages by adding a path resolver like SassPathResolver
Installation
You can install HyperClick via Sublime Package Control
Or clone this repo into your SublimeText Packages directory and rename it to HyperClick
Usage
HyperClick gives you four different ways to navigate, that you can choose based on your preference.
1. Phantoms on hover (Sublime >= 3118)
If you are using the most recent build of sublime, you can just hover over the required line and an arrow button will appear at the end of line that you can click and navigate to the destination file. See gif animation file above.
2. Phantoms on cursor line (Sublime >= 3118)
Having your cursor on a required/imported line will also show the navigation button just like hovering over the line.
3. Context Menu
If you right click on a required/imported line you'll get a
Jump To Source File ➜
menu item on the context menu.
4. Shortcut key
By default, HyperClick is using F12
(sublime's default Go to definition
) shortcut.
This does not override the default functionality since it's only using it in contexts
that Sublime's self Go to definition
can not help you navigate.
You can still customize the shortcut by adding this code to your own key-binding
settings.
{
"keys": ["f12"],
"command": "hyper_click_jump",
"context": [{ "key": "hyper_click_jump_line", "operand": true }]
}
Settings
You can customize HyperClick settings by going to
Preferences > Package Settings > HyperClick > Settings
Disable Annotations (phantom arrow button)
If you don't like the arrow button, you can disable them by setting
annotations_enabled
to false
Change Annotations contents
HyperClick uses a greenish button with ➜
when it finds the destination
file and a reddish button with ✘
. These symbols can be customized too.
{
"annotation_found_text": "➜",
"annotation_not_found_text": "✘"
}
Default Settings
see hyper_click.sublime-settings for up to date settings
{
"supported_syntaxes": {
"js": [
"ecmascript.sublime-syntax",
"JavaScript.sublime-syntax",
"JavaScript (Babel).sublime-syntax",
"JavaScriptNext.tmLanguage"
],
"sass": [
"SCSS.tmLanguage",
"Sass.tmLanguage"
],
"less": [
"LESS.tmLanguage"
],
"php": [
"PHP.sublime-syntax",
"PHP Source.sublime-syntax"
],
"stylus": [
"Stylus.tmLanguage"
],
"html": [
"HTML.sublime-syntax"
],
"jstl": [
"jstl.tmLanguage"
]
},
"import_line_regex": {
"js": [
"^import\\s+['\"](.+)['\"];?$",
".*from\\s+['\"](.+)['\"];?$",
".*require\\(['\"](.+?)['\"]\\).*"
],
"sass": [
"^@import\\s+['\"](.+)['\"];?$"
],
"less": [
"^@import\\s+\\(?.*\\)?\\s*['\"](.+)['\"];?$"
],
"php": [
"^import\\(['\"](.+)['\"]\\);?$",
"^import_once\\(['\"](.+)['\"]\\);?$",
"^require\\(['\"](.+)['\"]\\);?$",
"^require_once\\(['\"](.+)['\"]\\);?$"
],
"stylus": [
"^@import\\s+['\"](.+)['\"];?$"
],
"html": [
".*?<link\\s+rel=\"import\"\\s+href=['\"](.+)['\"]/?>.*?"
],
"jstl": [
"(<([\\w-]*)\\:([\\w-]*))",
]
},
"valid_extensions": {
"js": ["js", "jsx"],
"sass": ["scss", "sass"],
"less": ["less"],
"php": ["php"],
"stylus": ["styl", "stylus"],
"html": ["html"],
"jstl": ["jsp", "tag"]
},
"default_filenames": {
"js": ["index"]
},
"vendor_dirs": {
"js": ["node_modules"],
"html": ["node_modules", "bower_components"],
"jstl": ["WEB-INF"]
},
"lookup_paths": {
"js": [],
"jstl": [
"taglib *prefix ?= ?[\"'](.*)[\"'] *tagdir ?= ?[\"'](.*)[\"']",
"xmlns:(\\w*)=[\"']urn:jsptagdir:(.*?)[\"']"
]
},
"annotation_found_text": "➜",
"annotation_not_found_text": "✘",
"annotations_enabled": true
}
License
Copyright 2016-2017 Allen Bargi. Licensed under the MIT License