As a JavaScript developer, IDEs are still relatively immature and some very basic features available in other languages are hard to find for JavaScript. A killer feature in Eclipse for other languages like Java is its ability to open declarations. What this does is provide you the ability to look up symbols.
Before, I’d have to look through code to try to understand where a particular JavaScript object is, but there’s a better way to do it.
Exuberant Ctags provides a mechanism to index your source code and create a map of all of the symbols it finds in your code.
The CTags package for Sublime adds Ctags support to Sublime. Ctags generates an index (or tag) file of language objects so that they can be quickly and easily located by a text editor.
Exuberant Ctag’s support for modern JavaScript is not great, but you can help it along by giving it some hints via a file ~/.ctag. You should put the following from Tim’s gist:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
--langdef=js --langmap=js:.js --regex-js=/(,|(;|^)[ \t]*(var|let|([A-Za-z_$][A-Za-z0-9_$.]+\.)*))[ \t]*([A-Za-z0-9_$]+)[ \t]*=[ \t]*\{/\5/,object/ --regex-js=/(,|(;|^)[ \t]*(var|let|([A-Za-z_$][A-Za-z0-9_$.]+\.)*))[ \t]*([A-Za-z0-9_$]+)[ \t]*=[ \t]*function[ \t]*\(/\5/,function/ --regex-js=/(,|(;|^)[ \t]*(var|let|([A-Za-z_$][A-Za-z0-9_$.]+\.)*))[ \t]*([A-Za-z0-9_$]+)[ \t]*=[ \t]*\[/\5/,array/ --regex-js=/(,|(;|^)[ \t]*(var|let|([A-Za-z_$][A-Za-z0-9_$.]+\.)*))[ \t]*([A-Za-z0-9_$]+)[ \t]*=[ \t]*[^"]'[^']*/\5/,string/ --regex-js=/(,|(;|^)[ \t]*(var|let|([A-Za-z_$][A-Za-z0-9_$.]+\.)*))[ \t]*([A-Za-z0-9_$]+)[ \t]*=[ \t]*(true|false)/\5/,boolean/ --regex-js=/(,|(;|^)[ \t]*(var|let|([A-Za-z_$][A-Za-z0-9_$.]+\.)*))[ \t]*([A-Za-z0-9_$]+)[ \t]*=[ \t]*[0-9]+/\5/,number/ --regex-js=/(,|(;|^)[ \t]*(var|let|([A-Za-z_$][A-Za-z0-9_$.]+\.)*))[ \t]*([A-Za-z0-9_$]+)[ \t]*=[ \t]*.+([,;=]|$)/\5/,variable/ --regex-js=/(,|(;|^)[ \t]*(var|let|([A-Za-z_$][A-Za-z0-9_$.]+\.)*))[ \t]*([A-Za-z0-9_$]+)[ \t]*[ \t]*([,;]|$)/\5/,variable/ --regex-js=/function[ \t]+([A-Za-z0-9_$]+)[ \t]*\([^)]*\)/\1/,function/ --regex-js=/(,|^)[ \t]*([A-Za-z_$][A-Za-z0-9_$]+)[ \t]*:[ \t]*\{/\2/,object/ --regex-js=/(,|^)[ \t]*([A-Za-z_$][A-Za-z0-9_$]+)[ \t]*:[ \t]*function[ \t]*\(/\2/,function/ --regex-js=/(,|^)[ \t]*([A-Za-z_$][A-Za-z0-9_$]+)[ \t]*:[ \t]*\[/\2/,array/ --regex-js=/(,|^)[ \t]*([A-Za-z_$][A-Za-z0-9_$]+)[ \t]*:[ \t]*[^"]'[^']*/\2/,string/ --regex-js=/(,|^)[ \t]*([A-Za-z_$][A-Za-z0-9_$]+)[ \t]*:[ \t]*(true|false)/\2/,boolean/ --regex-js=/(,|^)[ \t]*([A-Za-z_$][A-Za-z0-9_$]+)[ \t]*:[ \t]*[0-9]+/\2/,number/ --regex-js=/(,|^)[ \t]*([A-Za-z_$][A-Za-z0-9_$]+)[ \t]*:[ \t]*[^=]+([,;]|$)/\2/,variable/ |
Mac OS X install directions:
-
Install Ctags. Mac OS X comes with a version of ctags already which is not the Exuberant Ctags version, so you’ll want to move it some other location if you use a package manager like homebrew to install it.
12sudo mv /usr/bin/ctags /usr/bin/ctags.osxbrew install ctags - In Sublime Text Editor, install the CTags package via the Package Control.
- Create the file ~/.ctags and put into it whatever is in this gist: ctags definition for JavaScript.
- Open your favorite project and build the ctags for the project via the “CTRL-T, CTRL-R” key sequence.
- Find a piece of your code where you want to open a declaration and “CTRL-T, CTRL-T” to see if ctags can bounce you over to the relevant piece of code. It’s not perfect and can’t always do it for you, but it’s pretty darn good.