ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Hyper​Click

by aziz ST3

Quickly and easily jump between your files. The missing part of Go to definition functionality in Sublime.

Details

Installs

  • Total 2K
  • Win 526
  • OS X 1K
  • Linux 286
Nov 22 Nov 21 Nov 20 Nov 19 Nov 18 Nov 17 Nov 16 Nov 15 Nov 14 Nov 13 Nov 12 Nov 11 Nov 10 Nov 9 Nov 8 Nov 7 Nov 6 Nov 5 Nov 4 Nov 3 Nov 2 Nov 1 Oct 31 Oct 30 Oct 29 Oct 28 Oct 27 Oct 26 Oct 25 Oct 24 Oct 23 Oct 22 Oct 21 Oct 20 Oct 19 Oct 18 Oct 17 Oct 16 Oct 15 Oct 14 Oct 13 Oct 12 Oct 11 Oct 10 Oct 9 Oct 8
Windows 0 3 1 1 0 1 2 0 0 3 0 2 1 1 2 3 2 2 0 0 0 1 2 0 3 0 0 1 2 0 4 0 1 0 3 0 2 2 0 1 0 0 2 1 0 2
OS X 0 3 6 4 0 0 0 3 1 3 2 1 2 3 2 3 6 2 0 0 3 4 1 2 3 2 3 5 2 1 5 0 3 2 5 3 2 2 2 3 2 2 1 4 4 4
Linux 2 0 0 0 0 0 2 1 2 0 1 1 1 0 0 2 3 1 1 0 1 0 3 1 0 0 1 1 1 1 0 0 1 1 0 0 1 0 2 1 2 0 1 0 3 0

Readme

Source
raw.​githubusercontent.​com

Sublime HyperClick

Quickly and easily jump between your files. The missing part of Go to definition functionality in Sublime.

sublime hyperclick

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 Javascript, Sass, Less, Stylus, PHP, HTML (imports) but can be easily extended to support 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

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.

sublimehyperclickcontext

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"
    ]
  },
  "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=['\"](.+)['\"]/?>.*?"
    ]
  },
  "valid_extensions": {
    "js": ["js", "jsx"],
    "sass": ["scss", "sass"],
    "less": ["less"],
    "php": ["php"],
    "stylus": ["styl", "stylus"],
    "html": ["html"]
  },
  "default_filenames": {
    "js": ["index"]
  },
  "vendor_dirs": {
    "js": ["node_modules"],
    "html": ["node_modules", "bower_components"]
  },
  "lookup_paths": {
    "js": []
  },
  "annotation_found_text": "➜",
  "annotation_not_found_text": "✘",
  "annotations_enabled": true
}

License

Copyright 2016-2017 Allen Bargi. Licensed under the MIT License