Sign in to follow this  
garidan

Visual Studio Code, Typescript and multiplatform

Recommended Posts

The OSX version seems really sexy so far. Though so far I haven't gotten Intellisense or code hints working for my code (which is standard node-style CommonJS) yet.

 

Oh wait, from the docs it looks like JS hinting comes only from typescript definition files?

Share this post


Link to post
Share on other sites

It uses Electron, the same platform as the Atom editor. It adds Git support, Intellisense, Gulp tasks, debugging, ... If you use TypeScript, LESS and that things it works really well. Maybe a bit slower because it uses Chromium as renderer engine.

Share this post


Link to post
Share on other sites

Maybe a bit slower because it uses Chromium as renderer engine.

 

Blazing fast for me, so far. I tried editing the babylon.js bundle (30K lines) and it feels like native speed. (for comparison the same file renders Atom unusable)

 

So far, I'd really like to make VS:Code my main editor. Just need to figure out what I'm missing with code hints...

 

  QK4YKD2.png

Share this post


Link to post
Share on other sites

Hi all,

 

I am having trouble getting Intellisense to work with Babylon.js as well in Visual Studio Code.

 

The reference path for Babylon.js is there but it has the red squiggly line underneath and says no definition found. For the term "BABYLON" it puts a green squiggly line underneath. At this point a light bulb should appear underneath the green squiggly and I should be able to click on the light bulb and add the reference path to the Babylon library, but am not getting that option.

 

I am editing on a Mac (and Windows) so I would love to have the Intellisense feature on both machines!

 

Thanks!

Share this post


Link to post
Share on other sites

As this MS tool seems to work the same way on every platform (Win/Mac/Linux) and to handle natively typescript, it could be a (the ?) good candidate for being one of (or the ?) the recommanded tools for contributors. 

 

So it would be nice to have some basic tips, from VS experts, about how to :

- have Intellisense working with BJS

- deal with git (branches/commit/fetch), if integrated

- deal with gulp to compile, if integrated

 

Well, just a primer about editing BJS files, compiling, testing, and maybe commiting

Share this post


Link to post
Share on other sites

I think (hope) our MS guys will give us some tips to solve all this stuff ;)

 

For now, I'm testing it besides SublimeText2.

I can edit my ts files,

I can see some kind of auto-completion in the file Im' editing about BJS stuff, but I don't understand what it is proposed (not everything if I start typing "BABYLON.Mesh.." for instance)

I can see git features but I don't know how to commit a file only (don't want to commit all js locally compiled files, ST2 has the option : "quick commit this file")

I don't know how to get/install new themes (I'm really used to ST2 Cobalt theme I like a lot)

 

For now, I still compile with gulp in command line, which seems to be the recommanded way.

 

I guess this tool is really worth it, especially if we can get the tips to use it right with BJS.

 

[EDIT] tips for configuration : https://code.visualstudio.com/Docs/customization

Share this post


Link to post
Share on other sites

Someone did a good blog post on integrating javascript libraries into Visual Studio Code:

 

http://www.johnpapa.net/intellisense-witha-visual-studio-code/

 

There are some good tips here, but alas, these tips did not seem to work for Babylon.js. I know nothing about VS but this blog post seems a good step in the right direction for Babylon.js users in using Visual Studio Code.

Share this post


Link to post
Share on other sites

If anyone's interested, I dug into the details on getting code hints in vsCode.

 

The main thing that threw me was, vsCode understands CommonJS/AMD modules out of the box, but really only to the extent that you are passing plain objects around. Code like this just works:

 

foo.js:

module.exports = {  banana: 'banana'}

bar.js:

var f = require('./foo')f.ba // code hint!

However if any classes or prototypes are involved then Intellisense gives up, even within the same file:

function Foo() {  this.banana = 'banana'}var f = new Foo()f.ba // no hints

There are two other ways of getting code hints:

 

1. Have a pre-made typescript-style definition file

2. Turn on the editor preference javascript.suggest.alwaysAllWords, which causes vsCode to use every word in the file as a possible code hint suggestion.

 

However, note that option 2 is not smart enough to follow file references - it only suggests words found in the current file, even as properties for an external module. Also, while vsCode understands require statements it does not not understand npm modules. It will only find a file if you explicitly require its full path (as in:  require('./node_modules/foo/main') ).

 

 

TL;DR: basically the only way to get any code hints for a JS module is to have a pre-made definition file.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.