Visual Studio Code, Typescript and multiplatform

[garidan]

I think it is interesting to know Microsoft has released a preview of a new Visual Studio product, free, expecially because it is for Linux, OSX and Windows supports Typescript and things like Intellisense

 

Look at 

https://www.visualstudio.com/products/code-vs

 

http://java.dzone.com/articles/getting-started-visual-studio

 

[fenomas]

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?

[jerome]

At last some MS product for Linux !!! 

I'll give a try.. this could be a good competitor to sublimeText.

[aarroyoc]

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.

[GameMonetize]

I installed it on my Windows and I removed my Sublime text

[fenomas]

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...

 

  

[jerome]

downloaded here, will test 

although I'm not a VS master like DK

[unklebooey]

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!

[jerome]

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

[GameMonetize]

Completely agree!

[jerome]

Maybe we lack this tsconfig.json file in the repo for Intellisense to work automatically  ?

 

https://code.visualstudio.com/Docs/languages#_typescript

https://github.com/Microsoft/TypeScript/wiki/tsconfig.json

[magallanes]

AFAIK, it doesn't compile and its a shame because it worked pretty fine.

[jerome]

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

[unklebooey]

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.

[GameMonetize]

This works:

<body>    <canvas id="canvas"></canvas>    <script>        /// <reference path="./babylon.max.js"/>		var engine = new BABYLON.Engine()	</script></body>

[JCPalmer]

I just got eclipse to have multiple of its "projects" residing in the same git repository not too long ago.  Was wondering if would be a problem here?  I need it for Extensions repository.

[GameMonetize]

I don't think so

[fenomas]

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.