jQuery code completion with npm, @type, $ and IJ 2021.1

I am wondering what the recommended way is to use jQuery, so that IntelliJ shows proper code completion.

I have created a new node project using the IntelliJ (2021.1) wizard , added a dependency to jquery 3.5.1 and run npm install.

Then I added the following code to index.js.

import $ from 'jquery'; // Recommended way to import it when using Babel, according to the readme.md of the dependency

$.fn.pluginFunc = function() {} // jquery-plugin that adds some functions

/** @type {$} */
let $div = $('<div>'); // Explicitly defining the type of $div

$div.addClass(); // <- Unresolved function or method addClass() 
$div.pluginFunc(); // <- Resolves correctly

The problem I face is that the jQuery functions are not recognized (e.g. addClass). If I remove the @type {$} it works, but I would like to define the type. If I change it to @type {jQuery} it works, too, but my custom functions are not recognized anymore. To make them work I would have to use jQuery.fn instead of $.fn and also had to change the import to import jQuery from 'jquery'.

// Using jQuery instead of $ would work
import jQuery from 'jquery';
jQuery.fn.pluginFunc = function() {}

/** @type {jQuery} */
let $div = $('<div>');

$div.addClass()
$div.pluginFunc()

I prefer working with $ instead of jQuery. Since it is just a synonym I expected it to behave the same. But IntelliJ obviously treats it differently.

What is your recommendation? Adding it as a global JavaScript library does not change anything, but since it is included as node dependency I don't think this should be the way anyway.

Btw: With release 2020.1 I got it working by adding the following snippet. This does not work anymore with 2021.1. My intention was to tell IntelliJ: Look, $ and jQuery are the same. Any idea, why this does not work anymore?

/** @typedef {jQuery} $ */

 

4 comments
Comment actions Permalink

>If I remove the @type {$} it works, but I would like to define the type. 

Do you have any special reason for that? Without your JSDoc annotation, the $div type is properly inferred as JQuery<HTMLElement> (with JQuery typings installed) and all methods are resolved. But your type annotation breaks code recognition

0
Comment actions Permalink

Thank you for the fast reply.

The reason is that I am developing an API and I like to provide type information for the users.

JsDoc is a great possibility to do so without the need to use TypeScript. See the following example:

myFunc(3, 3); // Correctly marks the second parameter and writes "Argument type number is not assignable to parameter type $"

/**
* @param {number} a
* @param {$} $b
*/
function myFunc(a, $b) {
$b.addClass() // Unresolved function or method addClass()
}

 

with JQuery typings installed

I assume you mean installing it via npm ("@types/jquery": "3.5.1")? Or do you mean installing it using Settings > Languages & Frameworks > JavaScript > Libraries? Installing @types/jquery gives good code completion and documentation, however it feels a little strange to add a TypeScript dependency just for the IDE. My project does not use TS. But still, as you already noticed, it does not help anyway when using @type {$}.

0
Comment actions Permalink

>I assume you mean installing it via npm ("@types/jquery": "3.5.1")? Or do you mean installing it using Settings > Languages & Frameworks > JavaScript > Libraries?

 

Both ways should work equally. You can also use the Install TypeScript definitions for better type information intention (available on Alt+Enter) to install typings - see https://www.jetbrains.com/help/webstorm/configuring-javascript-libraries.html#ws_jsconfigure_libraries_ts_definition_files

> But still, as you already noticed, it does not help anyway when using @type {$}.

Please follow https://youtrack.jetbrains.com/issue/WEB-45948 for updates

0
Comment actions Permalink

Thank you, I added a comment to the bug.

0

Please sign in to leave a comment.