20

NOTE: This is a WebStorm issue, not an angular.js issue.

Screencast of the problem: http://f.cl.ly/items/302s0d1k1i3i1B2p0W09/ws703-angular-not-defined.mp4

Description:

I have the following in my index.html file:

<script src="vendor/js/angular.min.js"></script>
<script src="app/js/scratch.js"></script>

In scratch.js when I reference "angular" I keep getting this "angular is not defined" message from JSHint. How do I make it so angular is seen as defined in this file so JSHint stops complaining about it? Is this a configuration issue? Please advise.

WebStorm v7.0.3 / Mac OSX v10.9.1

RBR
  • 999
  • 3
  • 13
  • 24
  • 1
    For people who googled around this: I'm using webstorm10. I solved this not by adding libraries, but setting the project root to include my angular.min.js (I'm using angular-seed. At first I set my root at "path/to/project_name/app", but now I set it to "path/to/project_name". My angular file is in "path/to/project_name/bower_components") – addlistener Aug 13 '15 at 11:57

5 Answers5

39

In 

Webstorm settings > JavaScript > Code Quality Tools > JSHint

there is "Predefined" line. Click on "Set" next to it. Here you can add all your predefined variables.

Robert
  • 5,278
  • 43
  • 65
  • 115
coolicz
  • 391
  • 3
  • 2
  • 2
    Since this question concern Webstorm + JSHint + Angular, I think this answer IS the correct one ;) Thank you, was searching for it. Works in PhpStorm too. – Byscripts Jun 30 '14 at 07:54
  • 1
    Also go to Settings / JavaScript / Libraries and insure that Angular is listed with Enabled checked. – TrueWill Jul 21 '14 at 02:04
  • This remark by @TrueWill helped with node's "require" whereas adding "require" to the .jshintrc didn't work. – Erez Cohen May 06 '15 at 08:59
  • Agree with ByScripts. This should be the accepted answer. – tanou Aug 20 '15 at 09:17
23

The very first example in the documentation page of JSHint is the following:

Configuration file is a simple JSON file that specifies which JSHint options to turn on or off. For example, the following file will enable warnings about undefined and unused variables and tell JSHint about a global variable named MY_GLOBAL.

{
  "undef": true,
  "unused": true,
  "globals": { "MY_GLOBAL": false }
}

Replace MY_GLOBAL with angular, and you won't have this JSHint warning anymore.

JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • 1
    Thanks for your response, JB. I'm not sure that this fixes the problem though. I'm not just trying to keep JSHint from complaining about the problem. What I'd like to be able to do is have "angular" be visible in scratch.js so there's nothing for JSHinst to complain about. I was hoping that adding angular.js to the set of JavaScript libraries WebStorm knows about globally would fix it, but it didn't. – RBR Feb 09 '14 at 23:30
  • angular is visible to scratch.js since angular is a global variable. Global variables are visible from everywhere, that's their point. – JB Nizet Feb 10 '14 at 06:49
  • 1
    And that's the problem. Why, if angular is visible globally, i.e. is within the scope of scratch.js, is JSHint still saying "angular is not defined"? – RBR Feb 10 '14 at 18:09
  • Because JSHint, when it analyzes scratch.js, doesn't know that your web page also uses angular.js, which defines this global variable. That's why yo need to tell it. – JB Nizet Feb 10 '14 at 18:11
  • 2
    I've been watching tutorials where different authors are using WebStorm and they don't have this problem- i.e. they don't have a red marker indicating an "angular not defined" problem on their WebStorm editor. So I'm thinking there must be a way to make this error go away, I mean fix it, not mask it. – RBR Feb 10 '14 at 18:15
  • I'd like to find a way to make "angular" actually BE defined, so WebStorm can also do things like code completion with it, not just keep JSHint quiet about it. Someone below suggested installing a plugin, which I'm gonna try now and hope that's the solution. Thanks again for trying to help me. Appreciate it. – RBR Feb 10 '14 at 18:32
  • Btw, JB. I did do what you suggested. It did make JSHint not complain about "angular". Not sure if that means it sees it as being "defined" or if it's just keeping quiet about it. Either way, I'm not getting the error message anymore. – RBR Feb 10 '14 at 19:05
  • 1
    Normally WebStorm DOES 'see' angular if angular.js file exists in the project, and things like completion are available. It's just JSHint that complains, as it always works in a file scope and knows nothing about global variables defined in other .js files – lena Feb 11 '14 at 15:38
  • 1
    Same question with response here : http://stackoverflow.com/a/20996817/2489639 Add "angular" to predef key in .jshintrc – yesnault Nov 08 '14 at 08:56
  • Does anybody know why predef in jshintrc not working once intelliJ has been upgrade to 2018? (The jshint version selected as 2.5.11) – huan feng Nov 21 '18 at 02:51
3

In case it helps:

I used yeoman (yo angular) to scaffold a basic project and got the same 'angular is not defined' problem in WebStorm 8 (where I have the AngularJS plugin by default). However, I've seen others do this and not have the same issue.

The solution selected above is correct in the JSHint needs to be told about the global variable called "angular". However, if you use yeoman, the required configuration settings will already be defined in .jshintrc (a file in your scaffolded directory).

So all you need to do is have JSHint use these as the default settings for the project. To do this, I found the following SO thread useful to explicitly set the location of that config file. JSHint behave differently in Webstorm and Grunt

In WebStorm 8, you will see an option called "Use config files" -- checking that will automatically look for a .jshintrc file in your project hierarchy. Selecting this will make the 'angular is not defined' issue go away for good.

Community
  • 1
  • 1
nitya
  • 161
  • 6
2

Go to Settings > Plugins and download the AngularJS plugin for WebStorm. That's the first thing I did before using AngularJS with WebStorm, and I never saw that issue.

Version 8 of WebStorm will have AngularJS fully baked in, but for now, that plugin should help.

Edit: Ok, I think I may have found another possible solution. As you said, it's a WebStorm issue. There is no actual error in the code, it's just a code inspection. You can turn off this inspection like this:

Go to settings > inspections > JavaScript > General and uncheck "unresolved JavaScript variable" and "unresolved JavaScript function".

This should make the error go away. I found this while going through an AngularJS tutorial on Pluralsight.

NorthCat
  • 9,643
  • 16
  • 47
  • 50
adimauro
  • 233
  • 1
  • 12
  • Installed AngularJS plugin, but that didn't seem to fix the problem. Still seeing that "angular" not defined message. But, I'm getting some other nice features. So thanks for the recommendation. – RBR Feb 10 '14 at 18:59
1

To make WebStorm (2016+) properly recognize angularjs and even enable code completion, simply go to:

File > Settings

Then on the left, select:

Languages & Frameworks > JavaScript > Libraries

Mark the checkbox next to 'angular' and click Apply. If angular does not appear in the list, you will need to click 'Add' and browse to wherever you have the library downloaded.

FoxMulder900
  • 1,272
  • 13
  • 27