Meteor dev with VSCode?

help
1

We recently started using VSCode for our Meteor dev and are really liking it. We’ve got most of the essentials working like Server-side debugging, but we’re missing a few things that Webstorm used to do quite well. Namely:

  • Go To Definition -> It seems to draw a total blank here.
  • Autocomplete on simple objects. We have lots of objects called someEnum = {first: 1, second: 2}; Shouldn’t the autocomplete pick up on those?
  • We also have lots of collections defined in the global scope. None of those get picked up.

Everybody speaks so glowingly of the intellisense so I’m pretty convinced this must be working out of the box for others. Anyone any ideas?

I’ve setup my jsconfig.json as follows:

{
	// See https://go.microsoft.com/fwlink/?LinkId=759670
	// for the documentation about the jsconfig.json format
	"compilerOptions": {
    	    "target": "ES6",
    	    "module": "es6",
    	    "allowSyntheticDefaultImports": true
	},
	"exclude": [
		"node_modules",
                ".meteor"
	],
	"files": [
		"client/*",
		"collections/*",
		"lib/*",
		"packages/*",
		"server/*"
	]
}
2

How did you get server side debugging working within the editor?

1 Like
3

If you want top notch intellissense with VSCode, you have probably to use Typescript

4

First of all you have to use imports with relative path that way it will pull correct intellisense e.g.
import x from ‘…/…/lib/x’ instead of
import x from ‘lib/x’

Secondly the way intellisense works in vscode is through typings. You need to install typings from npm and then use typings from dt a repository for typescript definition for various packages. Vscode understand typescript natively so it will understand typings without any issue and gives you JavaScript intellisense as well. I had it working with node projects but have not tried it with meteor. Give it a shot. It works perfectly with require statements have not seen it with import statements though.

5

It’s pretty easy.

  • You’ll need a config entry in your launch.json like the one below
  • Stick a debugger statement somewhere in your server code. You need this to activate the debugger. Once this has triggered all other breakpoints will work but not before.
  • run meteor debug
  • In VSCode debug pane make sure the ‘attach to server’ config is selected and hit the play button.
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to server",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        }
    ]
}
6

As to using the typings. I realise that I could probably get a better experience using the Typings ( and this is definitely on my list to investigate ) but I thought basic things like ‘go to definition’ or enumerating the properties of an object wouldn’t require that. I’ll go ahead and install them anyway and see if it makes any difference.

7

did you ever find a way to get intellisense working with meteor packages and code in your project ?

8

I know this is not of much help for VSCode users. But in my experience, nothing has proven to be better for Meteor development than WebStorm.

9

Yes. Unfortunately it requires refactoring your code to ES6. If you are using imports then VSCode works very nicely. If you’re using Meteor Classic then it can’t do much.

10

Does it work with Meteor packages just as well as with npm packages?

11

That’ll depend on if the meteor package uses exports or globals.