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 5K
  • Win 2K
  • Mac 2K
  • Linux 785
Feb 18 Feb 17 Feb 16 Feb 15 Feb 14 Feb 13 Feb 12 Feb 11 Feb 10 Feb 9 Feb 8 Feb 7 Feb 6 Feb 5 Feb 4 Feb 3 Feb 2 Feb 1 Jan 31 Jan 30 Jan 29 Jan 28 Jan 27 Jan 26 Jan 25 Jan 24 Jan 23 Jan 22 Jan 21 Jan 20 Jan 19 Jan 18 Jan 17 Jan 16 Jan 15 Jan 14 Jan 13 Jan 12 Jan 11 Jan 10 Jan 9 Jan 8 Jan 7 Jan 6 Jan 5 Jan 4
Windows 0 0 2 1 0 1 4 1 1 0 0 0 4 2 0 1 0 0 1 1 0 0 1 1 0 2 0 1 3 1 0 0 1 0 3 1 0 1 0 0 1 0 0 1 0 1
Mac 0 2 0 0 2 2 2 1 1 1 0 1 1 2 2 0 0 0 3 2 2 4 2 1 1 1 1 2 1 1 0 1 1 2 0 4 1 0 0 4 3 0 2 3 0 0
Linux 0 1 2 0 1 2 1 2 1 0 0 0 1 1 3 0 1 2 0 0 0 2 1 0 0 0 0 0 0 1 0 0 0 1 0 1 1 1 3 0 1 1 1 0 1 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

When you are navigating and reading a codebase, you need to jump between required/imported/included files.

HyperClick detects references to these files and lets you jump right to them, by pressing a key or clicking on an icon next to the filename.

Unlike Sublime Text's Goto Definition, HyperClick knows some specifics of the languages it supports, so even package names and filenames without an extension can be detected.

Supported Languages

  • JavaScript
  • TypeScript
  • Vue components
  • Svelte components
  • CSS
  • Sass and SCSS
  • LESS
  • Stylus
  • HTML
  • PHP
  • Twig
  • Pug
  • Nunjucks
  • JSTL
  • Jinja2
  • Dart
  • PostCSS
  • SugarML
  • SugarSS

If you'd like to request another language, open an issue with an example project in that language.

Installation

You can install HyperClick via Sublime Package Control.

Usage

HyperClick gives you three different ways to navigate:

1. Green arrows to the right of imports

In Sublime Text 3, you can jump to the file by clicking the arrow to the right of the filename.

This arrow shows up when you hover your mouse cursor or move to the line (with up/down keys, or Goto Line) that contains the filename.

2. 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

3. Shortcut key

By default, HyperClick uses 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 own Go to definition cannot 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 it 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.

Project settings

Some languages and build tools let developers reference files without writing out the full path to the file.

You can use project settings to configure HyperClick to look for files at specific dirs, though the settings "lookup_paths" and "aliases".

To open the project settings file, go to Project > Settings.

If the Settings option is grayed out, choose the option Save Project As... (right above it) to save it to disk. The Settings option can now be clicked.

Project settings example

{
    "folders":
    [
        {
            "path": "/computer/jane/projects/a-great-app"
        }
    ],
    "settings": {
        "hyper_click": {
            "aliases": {
                "js": {
                    "@": "src"
                }
            },
            "lookup_paths": {
                "twig": [
                    "templates"
                ]
            }
        }
    }
}

Lookup paths

When an imported file can't be found inside the same directory as the file, HyperClick will search inside the directories set in "lookup_paths".

Aliases

An alias is a character or word at the start of the filename that maps to a fixed directory location inside the project.

Here's an example: by default, vue-cli uses @ as an alias to the directory src inside the project. When you write “js import Toolbar from '@/components/Toolbar';

HyperClick will recognize it as the file `src/components/Toolbar.vue` in your project.

Tools that support aliases:

- [Webpack](https://webpack.js.org/configuration/resolve/#resolvealias)
- [vue-cli](https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules) comes with `@` aliased to `src` by default
- [Rollup](https://github.com/rollup/plugins/tree/master/packages/alias)
- [Parcel](https://parceljs.org/module_resolution.html#aliases)


## License
Copyright 2016-2017 [Allen Bargi](https://twitter.com/aziz).

Licensed under the MIT License