How to fine-tune JavaScript code completion and navigation


For months now I am trying to find a way to come up with a smarter setup for my ExtJs project. I have been using IDEA for years and WebStorm for the past year.

My requirements/scenario:

I am working on a JavaScript single-page frontend project in WebStorm with ExtJs as the main framework.

The project includes: (simplified)

  • the project source files (mostly ExtJs class files)
  • the concatenated and minified source for production
  • a static HTML document 'index.html' that loads the application for development
  • several deployed versions of ExtJs


  src    // directory hierarchy with project source files

  min   // minified production files built from source files




     src     // directory hierarchy that include the ExtJs source files

     ext-all.js // just one of several minified framework bundles


What I want:

  • JavaScript completion and navigation (CTRL-click a method) based on files in 'src' and the source files of the latest extJs version, here 'extjs-4.1.2'. That implies
  • excluding files from 'min' and
  • excluding files from previous extJs framework versions, as well as
  • excluding minifed ExtJs sources (e.g. ext-all.js, etc)
  • File navigation (CTRL-SHIFT-N) in all files in the project, including 'min' and directories of previous ExtJs versions

What I came up with so far:

  • add a custom file type assocication and add minified files based on patterns or full file names to avoid indexing for JavaScript completion
    this works actually rather nicely to avoid clutter from minified files
  • add ExtJs-4.1.2 as project library
    this adds even more clutter to code completion because now I have each ExtJs source file show up twice - on time from the library definition, one time from the directory lookup
  • Defined a scope that includes only 'min' and 'extjs-4.1.2'
    no idea what this is for other than search and the project navigation side panel
  • Exclude directories from the project
    this of course helps narrow down the JavaScript code completion options, but completely removes the ability to access those directories/files from within IDEA.

What I really want:
An easy way to include and exclude directories, individual files and directory/file patterns for JavaScript code completion and navigation without removing them from the project.

Any hints / advice is VERY appreciated.


Comment actions Permalink

As for excluding individual files, you can mark any file as plain text. It will still be shown in a project tree but will not participate in code completion. We have a similar request to exclude directories (i.e. still leave them visible but with a content handled as a collection of plain text files) but not yet implemented.
If you have ExtJS files under your project root, you can create libraries out of them. This will give you a better control where they should be used, at least in terms of code completion. You may use project-level libraries which can be defined in Settings|JavaScript|Libraries, visibility = "Current project". Then for each source JS file you can specify which library it is linked to (context menu - "Use javascript library"). Note that library files are excluded from code completion unless you explicitely tell the IDE where you want to use them.
I hope it helps.

Comment actions Permalink

Thanks for the reply, Rustam!

I am already using file associations to exclude individual files from being indexed. Thx for the link to the YouTrack ticket  - I left my mark there just now.

I also followed your advice and created JS libraries for each ExtJs library version. I tried this before but it works a bit better now with Project-level libraries. It takes care of removing some entries from code inspection when I omit them via scope configuration.

However, I remember now why I didn't pay more attention to it after toying around with them before.

It is actually *not* code completion that I use most often when coding JavaScript - the reason probably being that it just doesn't work that well, either due to the nature of JS or because the ExtJs4 class system is not well supported.

My most used features are navigating to symbols and files - not sure what is the correct IDEA term for it. For example:

  • CTRL-Clicking (=CTRL-B ?) on the 'class name' in a line like Ext.create('')
  • Doing the same on other symbols, e.g. functions (in the example above that would be 'create')
  • Displaying inline documentation (CTRL-Q) of symbols
  • CTRL-SHIFT-N to a ExtJs 'class name' (e.g. 'Controller.js')

If I observed correctly in all those situations JavaScript libraries don't help to reduce clutter. The only way is to 'exclude' files/directories from the project.

Is there any way to limit the features above to a 'scope'? I noticed CTRL-SHIFT-N allows filtering by file type but that doesn't help in my situation.

Or any other way (other than 'exclude from project') ?

Thx a lot!

Comment actions Permalink

Matthew, please feel free to submit other requests/improvement ideas (if you have any) in YouTrack. Thank you!


Please sign in to leave a comment.