Code Monkey home page Code Monkey logo

sublimehyperclick's Introduction

Sublime HyperClick

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

sublime hyperclick

HyperClick detects references to other files and lets you go to them, by pressing a key or clicking on an icon next to the filename. Even package names and filenames without an extension can be detected.

Supported Languages

  • JavaScript, TypeScript
  • Vue, Svelte components
  • CSS, Sass, SCSS, LESS, Stylus
  • HTML
  • PHP
  • Twig, Smarty, Pug, Nunjucks, Jinja2
  • JSTL
  • Dart
  • 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 paths

In Sublime Text 3, you can "Go to 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 Goto File menu item on the context menu.

3. Shortcut key

HyperClick extends the use of the F12 (Go to definition) shortcut, jumping to files when Go to definition doesn't work.

Settings

You can customize HyperClick settings by going to Preferences > Package Settings > HyperClick > Settings, or calling Preferences: HyperClick Settings from the command palette.

Project settings

You can use project settings to configure HyperClick to look for files at specific dirs, through 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 selected.

Example

{
	"folders":
	[
		{
			"path": "development/project"
		}
	],
	"settings": {
		"HyperClick": {
			"scopes": {
				"source.sass": {
					"lookup_paths": [
						"assets/css/src/",
						"assets/css/lib/"
					]
				},
				"text.html.smarty": {
					"lookup_paths": [
						"views/templates/"
					]
				}
			}
		}
	}
}

Upgrading settings for 2.0

In 2.0 the language-specific settings no longer rely on syntax filename mapping. Each language is supported via an entry in the "scopes" object, by the language "scope" name.

To prevent conflicting settings (and for consistency), the settings file has been renamed to HyperClick.sublime-settings. If you have any old settings, they're in Packages/User/hyper_click.sublime-settings (where Packages can be found via Preferences > Browse Packages). Project settings have been moved from the hyper_click

To upgrade your settings, the first step is to rearrange the settings to this new structure. Then:

  • Remove now unused settings "supported_syntaxes", "default_filenames".
  • Rename "import_line_regex" to "regexes" and "valid_extensions" to "extensions".
  • Other settings are unchanged.

Example:

{
	"import_line_regex": {
	    "js": [
	        "^import\\s+['\"](.+)['\"];?$"
	    ]
	}
}

Becomes:

{
	"scopes": {
		"source.js": {
			"regexes": [
				"^import\\s+['\"](.+)['\"];?$"
			]
		}
	}
}

sublimehyperclick's People

Contributors

aziz avatar braver avatar cristianl avatar anru avatar niksy avatar jfcherng avatar eparisio avatar iahu avatar bramus avatar yndx-madfriend avatar franciscolourenco avatar hachesilva avatar sigorilla avatar jhen0409 avatar julianburr avatar codeclown avatar richayotte avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.