45

I am using Visual Studio Code (VSC) 0.10.11 on Windows and Mac. For the purpose of this question I have this small JavaScript snippet:

'use strict';

const os = require('os');
console.log(os.homedir());

I followed John Papa on Visual Studio Code (Blog entry and Pluralsight Visual Studio Code JavaScript Intellisense - for those who have an account) and therefore I would expect that VSC provides Intellisense and Quick fix options when typings are available.

In the snippet above VSC recognizes console and log() (I use hoover, but it is the same with Intellisense):

console log

but not os and homedir():

os homedir

But all 4 typings are available in typings/main/ambient/node/index.d.ts. I know that the difference is the require in the case of os, but in John Papa's video course VSC also provided IntelliSense for required modules. A difference is that John Papa used tsd while I am using typings.

So my questions are

  • how can I enable Intellisense for all known typings?
  • what do I have to do that VSC offers me Quick fix (green line under moduls with missing typings)?
Improve this question

6 Answers 6

Reset to default
44

The above links are outdated. In older versions of VS Code you needed to reference your typings like /// <reference path> for somelibrary.d.ts.

With new version you need to initialize your project by creating jsconfig.json at the root of your project and add the following inside:

{
    "compilerOptions": {
        "target": "ES6",
        "module": "CommonJS"
    },
    "exclude": [
      "node_modules"
    ]
}

Next install typing you need. You can use either tsd or typings. In your case you need to install tsd install node or typings install node --ambient. Make sure you have typings/tsd installed. Restart project.

Please refer to docs:

  1. Setup JS project - https://code.visualstudio.com/docs/languages/javascript
  2. Node.js - https://code.visualstudio.com/docs/runtimes/nodejs
  3. https://code.visualstudio.com/docs/nodejs/working-with-javascript#_writing-jsconfigjson
  4. Debugging - https://code.visualstudio.com/docs/editor/debugging

Update:

Since version 1.7 there is no need to manually install typings, they should be downloaded automatically. Better JavaScript IntelliSense

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

With a proper jsconfig.json IntelliSense is working. However, when you read the documentation at your first link it should be the default behavior, even when no `jsconfig.json´ is available: Note: If you do not have a jsconfig.json in your workspace, VS Code will by default exclude the node_modules folder and the folder defined by the out attribute. + IntelliSense is automatically provided for CommonJS and AMD modules inside your project folders. So I think it is just a bug that it isn't working without the config file. Anyway, now it works. Thanks for your answer!
code.visualstudio.com/updates They've changed this behavior for jsconfig.json. > If you do not have a jsconfig.json in your workspace then the following defaults are used: the exclude list includes the node_modules folder and the folder defined by the out attribute. Be aware that if you have no jsconfig.json defined to mark the root of your project, then each JavaScript file is considered an island by Salsa. Without a jsconfig.json file, cross-file and Typings file IntelliSense will not work.
I think this is downside of using beta software, things change rapidly.
Did you solve your problem? Could you share more info.
17

There is a built-in extension called TypeScript and JavaScript Language Features (vscode.typescript-language-features) that is disabled.

In order to enable it, open Extensions panel, search for "@built-in JavaScript", and enable the required extension.

Now you should be able to use the autocomplete feature.

Improve this answer

3 Comments

This is now "@builtin Javascript". There's instruction in Flow extension to disable builtin language features and you might forgot turn it back on after uninstalling it.
it's pretty hard to disable it accidentally. I'm surprised that so many people find this answer useful.
Thank you good Sir! It's 2024. I received a brand new laptop (with an RTX3080) in 2022. For 2.75 years I never never could figure out why I could not get JS DocBloc to work on the new laptop. All the while my 2014 laptop had this working flawlessly
3

I experienced this on global "process" object. Vscode enabled intellisense for process object, only if I add any "require" statements to the file.

So if there is not any other require statements, you can add

const process = require('process');

in the beginning of your script to get intellisense.

Improve this answer

Comments

2

Extensions can break Intellisense (Try to disable all your extension)

error in displaying autocompletion and snippets of nodejs code and method

this is how it should work, if Intellisense is not working you won't see that

if it is dead then move on

this mf took me while to notice it

Dont install this Extension as its nightly version where it broke the Intellisense

if it is dead then move on

hope this help any one and a note to my self

Improve this answer

1 Comment

This was it for me, I shouldn't have installed the extension.... I don't even use typescript
0

Well, after 4 hr's googling finally, I decided to uninstall nodejs, npm, and typescript then install all of them again. The previous time I installed them using nvm but this time I decided not to use nvm just install them from node source since I am using Ubuntu I executed bellow commands, for windows or mac just install them without any package or version manager.

curl https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo apt-key add -
sudo apt-add-repository "deb https://deb.nodesource.com/node_7.x $(lsb_release -sc) main"
sudo apt-get update
sudo apt-get install nodejs

above command installed both nodejs and npm, after then to install typescript I ran bellow command

sudo npm install --global typescript

I updated my VSCode to the newest version.

enter image description here

Then in the bottom right of my VSCode I clicked on javascript to change the language mode, I wrote 'type' on the search bar and select typescript as my new selected language mode...........BINGO

enter image description here

Improve this answer

Comments

0

Title: Verifying Dependencies in Node.js: Ensuring Proper require Statements

It might be your solution if others won't work for you!

In Node.js, it's crucial to ensure that all dependencies from required files are correctly imported using the require statement. This verification is especially important when working with language servers like VSCode IntelliSense, as any import/export mistakes can hinder their functionality.

For instance, let's consider a scenario where VSCode IntelliSense fails to work as expected due to incorrect usage of the import statement:

// Your module

const { ImageAnnotatorClient } = require("@google-cloud/vision");
import { postData } from ("./http.service");

module.exports = {
  // ... anything
};

// Your logic

const module = require('./your-module)
// module. => intellisense wont work

In this example, the import statement is incorrectly used alongside require, which can lead to issues in code execution and tooling support. To ensure smooth operation and proper tooling functionality, always use require for Node.js modules:

const { ImageAnnotatorClient } = require("@google-cloud/vision");
const { postData } = require("./http.service");

module.exports = {
  // ... anything
};

By adhering to the correct usage of require statements, you can avoid compatibility issues and ensure that your Node.js application works seamlessly with various development tools and language servers like VSCode IntelliSense.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.