Visual Studio Code Users - Help

1

So I just started using Node a lot and I’m finding two things:

  1. My js functions have no syntax highlighting… The ifs, fors, whiles, and other language constructs do but not the functions.

  2. There seems to be no intellisense for the built-in node functions. I would like to be able to create node objects and then type objectWhatever. and have my options pop up.

Is this possible in Visual Studio code and if so, how?

I already know its possible in other editors and I in fact have other programs, but I want to know about VSC. Thank you.

2

Syntax highlighting works fine for me, without any plugins iirc.

Are you saving the file as a .js first so VSC knows which syntax to look for?

3

Syntax coloring:

  1. Make sure you are using “Dark+”/“Light+” theme (they are the defaults, but you never know…) instead of just “Dark”/“Light” ones. If you are using some other themes, then it’s dependent on them, but I think most should be fine.
  2. Make sure you are on the latest version (that’s 1.6.1 at the time of writing).
  3. Install either of those two extensions:
    Latest TypeScript and Javascript Grammar
    JavaScript Atom Grammar
    (never tried both at once, but I guess they could conflict. Experiment :wink: )

That should give you the best of what’s possible regarding syntax coloring in VSC. It still probably won’t be perfect, but should be much better.

Now, intellisense:

  1. If you don’t already have jsconfig.json in your project root, create it. A lightbulb should pop up in the bottom right enabling you to do so when you are editing a .js file. The default content of the file is OK.
  2. If you don’t yet have package.json in your project root, create it as well. You can use “npm init” command in VS integrated terminal (ctrl + `) for that (edit: this step seems optional for this particular purpose, but probably best to get in habit of doing it anyway)
  3. Install typings (definition files) for packages that you use in your project. The easiest way to do it is to issue (for node) “npm install --save-dev @types/node” command, likewise for any other packages that you are using.

Then intellisense should start working, if it’s slow to pick up, close your js file and open it again.

3 Likes
5

It always works, but is limited at the moment (highlights only keywords and declarations, but not subsequent uses of those declared things, like variables or functions).

Actually, I think the functionality of the “latest grammar” extension is supposed to be included in the next update because of that (or whenever the stuff inside of it is out of beta :wink: )

And intellisense works out of the box only for browser stuff.

6

It’s never been clear to me what to do to make a jsconfig file go. I added an empty one by hand and VS Code is none the wiser.

7

This did it. Thank you!!!

8

Ah this is good, I tried Atom and vs code recently and settled on atom because its really good… but also very slow sometimes.

The reason I didn’t go with vs code was the highlighting and intellisense didn’t seem to do much. Ishall give it another go now though.

9

I’m not sure if an empty jsconfig file would work, but the default one (created by clicking the lightbulb at the bottom right when editing js file with no jsconfig present) works OK for me (although by itself it only gives you intellisense across .js files inside the project, not for things such as node). Although I admit I don’t really get most of the options inside it yet :wink: