WebStorm JSON files unresolved variable properties (syntax)
<p>Practical example is this best here, so here goes. I have a JSON file named <code>file.json</code> as such:</p>

<pre><code>{
    "key": "hello"
}
</code></pre>

<p>And a JS file in the same directory as such (NodeJS):</p>

<pre><code>'use strict';

// Dependencies
const jsonFile = require('./file.json');

// Globals
const anotherFile = {
    key: 'world'
}

const fn = () =&gt; {
    console.log(jsonFile.key); // this 'key' is not recognized
    console.log(anotherFile.key); // this 'key' is recognized
};
</code></pre>

<p>Now, that <code>fn</code> function should, and does, print <code>hello</code> and <code>world</code> to the console. My problem is that while WebStorm recognizes the second file (<code>anotherFile</code>) as a JavaScript object, it doesn't do so with the one imported from the JSON. </p>

<p>That means that <code>anotherFile.key</code> has "<code>key</code>" in purple (in my template) color, while the other one is plain white with the underline that you get when it's "Unresolved variable key".
Also means that I can write <code>anotherFile</code> and it will show me all available options (functions, properties, etc) and <code>key</code> will be there, while in the first file, <code>jsonFile</code>, it wont.</p>

<p>Is there any way to force WebStorm to recognize JSON's as JavaScript objects? 
Thanks!</p>

<p>Edit: Using WebStorm 11.0.1</p>