Enable Intellisense for my custom ES6 JavaScript modules in VS Code

Question

Enable Intellisense for my custom ES6 JavaScript modules in VS Code

Using VS Code Intellisense can greatly enhance productivity when working with internal project files, providing helpful autocompletion features and utilizing written JSDoc comments.

However, my current projects involve custom JavaScript libraries stored in Bitbucket Cloud repositories as ES6 modules, which are accessed via NPM or Yarn dependencies.

Despite knowing that JSDoc is available in these libraries, I have been unable to make use of Intellisense for them.

I attempted to explicitly include the library files in the jsconfig.json file, but to no avail:

{
  "compilerOptions": {
    "target": "es2017",
    "moduleResolution": "node",
    "checkJs": true,
    "allowSyntheticDefaultImports": true,
    "noEmit": true,
    "noImplicitAny": false,
    "strictNullChecks": false,
    "alwaysStrict": true,
    "sourceMap": false
  },
  "include": ["src/**/*", "node_modules/my-lib/**/*"]
}

Is there a straightforward method to instruct VS Code to recognize my library files? While one solution could involve creating and publishing TypeScript definition files for each library, I believe there must be a simpler way for VS Code to handle my library JavaScript files just like it handles internal project files.

javascript typescript visual-studio-code es6-modules

Answer 1

Answer №1

This particular question may be considered outdated, but I recently encountered a similar issue and devised a solution.

One approach is to generate a types declaration file, which can be conveniently done using the tsd-jsdoc package in conjunction with your jsdoc comments.

To create the types file, I included the following script in my package.json file...

jsdoc -r src -t node_modules/tsd-jsdoc/dist -d lib

Executing this script will produce a lib/types.d.ts file.

Next, add a types entry in your package.json that points to this generated file.

Ensure that this script is integrated into your prepublishOnly script to guarantee the file is current before running npm publish.

Typically, my src/index.js file comprises multiple

export { default as thing } from './thing';

lines. To create a declaration file readable by vscode, I formatted the file as follows...

/** @module my-module */

export { default as thing1 } from './thing1';
export { default as thing2 } from './thing2';

For the thing1 and thing2 jsdoc comments within the export, remember to include @memberof module:my-module, like so...

/**
 * Thing 1
 * @param {string} thing
 * @memberof module:my-module
*/
function thing1(thing) {
}

export default thing1;

Answer 2

This particular question may be considered outdated, but I recently encountered a similar issue and devised a solution.

One approach is to generate a types declaration file, which can be conveniently done using the tsd-jsdoc package in conjunction with your jsdoc comments.

To create the types file, I included the following script in my package.json file...

jsdoc -r src -t node_modules/tsd-jsdoc/dist -d lib

Executing this script will produce a lib/types.d.ts file.

Next, add a types entry in your package.json that points to this generated file.

Ensure that this script is integrated into your prepublishOnly script to guarantee the file is current before running npm publish.

Typically, my src/index.js file comprises multiple

export { default as thing } from './thing';

lines. To create a declaration file readable by vscode, I formatted the file as follows...

/** @module my-module */

export { default as thing1 } from './thing1';
export { default as thing2 } from './thing2';

For the thing1 and thing2 jsdoc comments within the export, remember to include @memberof module:my-module, like so...

/**
 * Thing 1
 * @param {string} thing
 * @memberof module:my-module
*/
function thing1(thing) {
}

export default thing1;

Enable Intellisense for my custom ES6 JavaScript modules in VS Code

Answer №1

Similar questions

Obtaining the chosen options from a dropdown menu

What are the effects of calling callback(false) and callback(true)?

Filtering out undefined elements from an array created by mapping over a nested array using map() and filter()

Tips for creating various instances of a single type within mock data

Sending information to a subpage through props using a query in the URL triggers a 431 Request Header Fields Too Large error

When making jQuery Ajax calls, the $_POST variable may be empty and a warning about headers already being sent may also

Send information to modal using Javascript

Using the useRef validation can lead to errors when trying to reference the current value against an input

Adding design to distinct element after clicking a button

Transforming date and timezone offset into an isoDate format using moment.js

Guide on converting JSON encoded data into a JavaScript array

Utilizing dynamic class and color binding features in VueJs?

Dynamically size and position elements to fit perfectly within the container

What are the built-in modules in node.js that handle System calls?

VueJs Ellipsis Filter: Enhance Your Texts with

A dynamic JavaScript object that functions similarly to a multidimensional associative array in PHP

Tips for creating a personalized callback within a user function using JavaScript

Why does my dialog box only open the first time and not the second time?

Need at least one of two methods, or both, in an abstract class

Problems encountered with React Image Magnifiers while attempting to zoom in with Next.js