Fable: adding a `dotnet new fable-vscode` template

[acormier]

It's not clear how to setup a visual studio code extension project for Fable 1.0 but it seems that what's needed is a template that will create the structure of such a project. Could such a template be created? I don't know how to do this but I'm very happy to take it on with some guidance.

[MangelMaxime]

Hello, for creating a template you can take a look here

To create the template, you can then do dotnet pack path/to/file.proj
You can then install it by using: dotnet new -i path/to/nugetfile (the one generated by the previous command).

[acormier]

Thanks. That's very useful. Next step I have to figure out what files / structure / build scripts are needed for a vscode extension project

[alfonsogarciacaro]

It's using an old Fable version, but here's a post by @Krzysztof-Cieslak on building VS Code extensions with Fable: http://kcieslak.io/Creating-VS-Code-plugins-with-F-and-Fable

[acormier]

I did read that post. Thanks. I'm also looking at the Ionide source code. I converted one of the vscode samples and I incorporated Paket and FAKE: https://github.com/acormier/vscode-fable-sample. I'm not sure if that's overkill or not. Once I got the scaffolding figured out I could maybe make 2 templates. One with Paket & FAKE and one without? The biggest problem with my sample is that it's still using an old version of Fable. If someone could tell me how to make it use Fable 1.0 that would be great.

[Krzysztof-Cieslak]

I doubt that Paket and FAKE are necessary at all.

[alfonsogarciacaro]

Nice. @acormier, there's a blog post about using Fable 1.0 beta. You can see Fable 1.0 templates here (simple) and here (fable-elmish-react, more complex).

About Paket, we're currently considering better integration between Paket and Fable but it's not done yet. About FAKE, it depends. For simple things like building and starting a Webpack dev server, the dotnet-fable CLI tools should be enough. If you need more complex stuff FAKE can indeed be very useful.

[acormier]

Hi. Thanks for the feedback. I'm still confused about how to hookup the fable compiler and how webpack (I never used it before) fits into all this. I update the project (https://github.com/acormier/vscode-fable-sample) to try to use Fable 1.0 but I'm getting a "The namespace 'vscode' is not defined" error. Is there something wrong with my paths or with Fable.Import.VSCode.fs? (I'm using the one from Ionide).
Alain

[alfonsogarciacaro]

Hmm, probably @Krzysztof-Cieslak can confirm, but I think you need to tell Webpack not to put the vscode module in the bundle. You can do this by adding the following to the Webpack config:

  externals: {
    vscode: 'commonjs vscode'
  },

I'll try to clone your project later and see if I can make it work :+1:

[acormier]

Thanks. Much appreciated.

[acormier]

@alfonsogarciacaro , I added the webpack config like you suggest above plus added libraryTarget: commonjs2 like suggested by @vasyl-purchel and the sample now runs! Thanks everyone.

[acormier]

I created a very simple sample that doesn't use Paket or FAKE. I defined vscode tasks for fetch (get dependencies), clean, and build: https://github.com/acormier/vscode-extension-fable-simple.

I tried creating a template but couldn't get it to work. I'll get back to it when I have more time.

[alfonsogarciacaro]

Awesome @acormier, thanks for that! A template would be nice, but I guess a repo is fine for now. Could you please send a PR to add a link to awesome-fable?

[alfonsogarciacaro]

As we already have the sample repo working, we can close this issue 😄 It'd be great to include a link in awesome-fable repo to improve visibility within the Fable community :+1: