Search code examples
angularjsautocompletephpstormintellisensewebstorm

Angular autocomplete (i.e. intelli-sense) not working in PhpStorm

I have done the following:

  1. Installed both the AngularJS and NodeJS Plugins in Phpstorm
  2. Downloaded the latest stable release of Angular (1.4.8)
  3. Added angular.js to the project
  4. Added angular.js to the list of libraries in Phpstorm

Directives in my HTML will autocomplete fine (e.g. ng-modal), but trying to do something like Module.fact does not autocomplete to factory. Here is my code:

var appModule = angular.module("appModule", ['ngRoute']);


appModule.fac   //This is me typing factory, but auto complete doesn't help

I am running PhpStorm 10.0.2. I have tried using different versions of PhpStorm and I have also tried using Angular 1.5 (the beta version) with the same result. Also, I am new to angular, but my code is working. Thank you!

*I have already reviewed these links and SO posts:

  1. https://www.jetbrains.com/webstorm/help/using-angularjs.html
  2. https://www.jetbrains.com/webstorm/help/configuring-javascript-libraries.html
  3. Why do AngularJS directives (attributes, etc.) show up as "invalid" in WebStorm 8?
  4. Getting angularJS autcomplete in Webstorm/PHPStorm

PhpStorm Settings

Solution

  • The angular variable is a global one and when you have to many declarations of the same global variable PhpStorm/WebStorm can not handle auto-completion.

    It's important to verify that only 1 declaration for angular is being discovered by PhpStorm. This doesn't have anything to do with your actually JavaScript project, but where PhpStorm looks for declarations.

    If you hold down ctrl and mouse over the world angular. It should show it highlighted to be clickable, and a tooltip showing where it is declared.

    If the tooltip says there are multiple definitions of the identifier, then it can not do autocomplete correctly. This is true for most JS variables in Php/WebStorm not just this angular variable.

    You have a couple of ways to fix this:

    1) Force type declaration with JsDoc to TypeScript

    /**
 * @var {angular.IAngularStatic} myAngular
 */
var myAngular = angular;

    This will declare the variable myAngular using the TypeScript definition. There is less likely to be conflict with any already scanned JS source files that also declare angular. It's an easy fix, but adds unnecessary source code to your project.

    2) Disable JavaScript source files by excluding them

    If you are using node_modules or bower_components then you need to include some of the JS files from those folders, but not unnecessary duplicates. You won't need any Angular JS files since you've already installed the TypeScript definitions (which work better for auto-completion). In the Project Files panel in PhpStorm find the Angular packages, right click on those folders and "Exclude" those folders. You can also do this via project settings in "Files / Settings / Directories"

    3) Ignore bundled output files for JavaScript

    This is the most common issue I find with PhpStorm/WebStorm. PhpStorm will also scan minified JavaScript files you've packaged into your webroot/js folder. For example; If you use grunt to uglify your JavaScript code into app.min.js and inside that file is Angular and your project code. PhpStorm will scan this and create duplicate declarations of everything it finds.

    Find all those duplicate *.js files in your project, right mouse click on the files and select "Mark as Plain Text" from the menu. This will tell the editor to completely ignore the file from all intellisense scanning.

    So to summarize. If you control click on a declaration to go to source, and PhpStorm does not go immediately, but instead prompts you select from multiple declarations, then you have duplicates in your project and you need to narrow the scope. Once that is done everything else should work as expected.