How is monaco better than alternative web code editors? about monaco-editor HOT 13 CLOSED

@amanuel2, given your somewhat snarky response above, I assume you have a preconception here against this editor in particular or regarding the simplicity of editors in general. I'm not sure you really wanted and answer to this, but I'll give one anyway.

Modern code editors are far more than just fancy text boxes with syntax highlighting. Among many complex features, they have built-in language parsers (one of the components of a compiler), they offer near-realtime feedback as to syntactical correctness, and most offer some form of autocompletion and other interactive feedback designed to make coding easier, faster, and less prone to error.

Why Monaco?

a) The similarity to VSCode and VS is more than a skin or keymappings. It's a mode of interaction that is far deeper. This IS VSCode's editor, so @tylerlong is correct that those who use VSCode will feel right at home.
b) For many languages, the editor has a built-in language parser allowing the autocompletion (intellisense) to be fully context-aware. In other words, it can detect both the context of the code and the data type(s) being manipulated and provide truly "intelligent" autocomplete suggestions. To my knowledge, CodeMirror and Ace offer at best only a static XML-based autocompletion list (could be wrong about this, though). For languages not supported, VSCode offers callouts that allow for the use of external parsers (like that built-in to the .Net Roslyn compiler).
c) The command palette is incredibly useful, offering the full suite of editor tools without requiring a massive toolbar and significant code wiring on your part.
d) Built in diff viewer.
e) Code hints (i.e., definition of methods, parameter lists as you type, etc.). And again this is completely extensible.
f) Again for supported languages tools like "go to definition" and "find all references" are built right in to it's handy right-click context menu.

I'm sure there are many more, but those are important to me. There are some things that Ace and CodeMirror (both fantastic projects) currently do better like more complete language support, somewhat less "heavy", more built-in keymappings, more built-in themes, etc. But they are also more mature projects. The "bones" of Monaco are more robust and modern, so with time I have little doubt it will make up for the current shortcomings. It's been around for a few years internal to MS (used in VS online, VSCode, and elsewhere), but only available as open-source for a few weeks. I have patience and am excited to be able to participate in it's evolution.

from monaco-editor.

Lol @tylerlong a code editor is a code editor. The only thing this code editor does , is just you typing and syntax highlighting and so forth. It dosent actually do the Compiling, or doesnt have any debug stuff or any complicated stuff Visual Studio 2015 offers to me. And to be honest there is probably a visual code theme for Ace.

from monaco-editor.

Asking a question and then LOL'ing at the answer while basically saying that there is no answer to your question...kinda snarky. Anyway...

1 & 4. Kinda. But Cloud9 > Ace. In much the same way that VSCode > Monaco. Ace doesn't ship with any real autocomplete or code hints. Yes, c9 has it (and yes, it IS quite awesome), but it is very much the "special sauce" that makes you want to pay for c9 instead of just rolling your own system using Ace.

If you want to see how "basic" ace is out of the box and how autocomplete works, see: http://plnkr.co/edit/6MVntVmXYUbjR0DI82Cr?p=preview

Don't know how you'd go about creating code hints with Ace. Definitely not out of the box.

1. You can edit a LOT of files. As with Ace, there's a whole infrastructure of Models (Documents in Ace) and Editors. I'm assuming (since I've not gotten that far into it) that you maintain a larger code base in a number of model objects and the definition finding will load the correct one into the editor window. Not certain about that. But to see the basic bit in action:

https://microsoft.github.io/monaco-editor/playground.html#creating-the-diffeditor-navigating-a-diff

Right click on navi on line 22. "Go to" or "peek" at the definition.
Right click on navi on line 16. "Find all references"

All of that is just "out of the box" here. Very much not so with Ace or CodeMirror.

3. Hit F1 or right click and select command palette. It's a really easy way to get access to the full set of commands available without having to know all of the keyboard shortcuts or creating tool bar buttons. It's also easy to add to that list.

from monaco-editor.

Wow @ptyork , that was a long response. Preety deep, that i couldnt understand some parts. Although i have a couple questions:

1. Ace has thier own version of intelisense and "Code Hints", so i dont see a comparison there..?
2. Go to definition? You can only edit one file on it.. And also as i checked the editor it self, the demo one, i couldnt spot a go to defintion. Same with find all refrences.
3. Whats a command pallete?

4.I use Ace Code editor(as i use Cloud9IDE) lot of time, and it has awesome auto-complete. So i dont see this coming : "CodeMirror and Ace offer at best only a static XML-based autocompletion list"

Snarky Response? I was just bieng honest.

from monaco-editor.

Ok, you guys make a good argument. I hope you guys go far, in your adventure. Most of all have fun guys and Go Monaco-Editor!! 🎆

from monaco-editor.

this is not working properly with REACT so I give it F- sorry

from monaco-editor.

Monaco-editor project is still pretty new (VS Code has been around for quite a while though). It is cool to have a web editor which provides similar features as the VS Code editor. Ace, on the other hand, doesn't have a desktop counterpart(there might be third-party ones which I am not familiar with). VS Code users will feel right at home with this editor.

from monaco-editor.

In my perspective there is a meaningful difference.

******* It fully support Right to left languages like persian, arabic, hebrew***********

and of course it does not mess up without monospace fonts.

from monaco-editor.

@x5engine The Monaco editor has nothing to do with React and has proven itself to be very capable as seen in the rapid growth of VS Code.

If you want to use it with React, there are plenty of tutorials and entire library packages available if you do a quick search. Perhaps you can try one of those first?

from monaco-editor.

Hello! I'm a beginner with Monaco and after looking at Ace and Codemirror it seems to me that Monaco offers the best user experience, significantly, so I chose it. The one area where Ace and Codemirror are much stronger is their documentation. Monaco's documentation is simply an automated output of a program that picked up the public methods, while the others have proper documentation written by humans.

from monaco-editor.

With monaco-editor released, it is possible that projects like ALM could converge asymptotically on feature parity with c9 and VS Code itself.

from monaco-editor.

I incorporated Ace into a website and while the setup was easy it worked great on desktop it was unusable in a mobile browser (Chrome). Anytime I would type a character (even just a letter), the whole line would be erased first, then display the character. I even went to ACEs site to use theirs (hoping maybe I set it up incorrectly) but I still encountered the same errors.
CodeMirror seems to work well with mobile but I am intrigued now about Monaco as most of the users of my site are VS users.

from monaco-editor.

Hello,
@ptyork Thank you for the application examples, it's really interesting...

But monaco is more than a code editor, I would like to know if it is possible to customize this editor, for example if I want to use my own auto-completion for javascript, is it possible?

Thank you.

from monaco-editor.