christianalfoni / webpack-bin

A webpack code sandbox

Home Page:http://www.webpackbin.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Use a better text editor

niieani opened this issue · comments

The current editor is okay, but doesn't support:

  • indentation (pressing tab on a selection)
  • autocompletion / hints

Check out this recent project here (try typing something in the right panel - you'll see the magic of autocompletion): https://microsoft.github.io/monaco-editor/playground.html#creating-the-editor-editor-basic-options.
It would be awesome to swap out the current editor with monaco, which seems to be the best JavaScript editor currently available. It supports many languages and has support for custom ones too.

Hi @niieani and thanks for the tip! There was also some talk about the ACE editor, which is really good at linting because it runs the linting in a web-worker.

There is quite a bit of logic to handle the updates, pass them on websocket for the LIVE feature etc. But it would be fun to try it out :) It is quite an undertaking though

Sounds like a good venture ;) I'm not sure if Monaco runs linting as a WebWorker (I'd imagine so, it's newer than ACE), but the performance is amazingly good, so it's possible. Monaco is the editor engine of Visual Studio Code.

The benefit of Monaco is that you get autocompletion which is based on the actual inferred types, rather than just of all token-string that are available to use in JavaScript. This is because it uses the TypeScript service in the background to infer the types. You can see what I mean if you paste the example from the ACE Editor to the example of Monaco I've linked to above -- try invoking the autocomplete in both editors after typing resultString. below resultString's definition.

@christianalfoni , As suggested by @niieani You should consider Monaco .
Its the editor behind VSCODE and others.

It supports multiple languages and it's extendable to any language.

There's a great (TypeScript specific) web based IDE using it, see ALM Tools, open sourced as well.

@shlomiassaf Not sure if you noticed, but Monaco is exactly what I proposed in the first post. ;)

@niieani Didn't notice, sorry about that.