
The Monaco Code Editor - algorithmsRcool
https://microsoft.github.io/monaco-editor/index.html
======
tiles
Does anyone know on a technical level why the Monaco editor feels so much
faster than the Atom editor? Is there any mechanism Microsoft is employing
that Atom could adopt, or are the two editors that fundamentally different?

~~~
alexdima
Hi,

I'm working on the editor since almost 5 years now. Phew, time flies.

There is no silver bullet, we mostly try to keep all computations limited to
the viewport size (if you have 20 lines visible, then typing, colorizing,
painting a frame, etc. should all end up being computed with loops covering
those 20 lines and not the entire buffer size).

We also use extensively the profilers, and most recently (last month) I
learned about this great tool called IR Hydra[1]. The gains from eliminating
bailouts in the hot code paths are probably too small to notice (5-10% per
render), but I like to think that everything adds up.

We use translate3d for scrolling (except in Firefox which has a known bug[2])
and that brings down the browser painting times considerably when scrolling.

I've also found insertAdjacentHTML to be the fastest way to create dom nodes
(from big fat strings) across all browsers.

Sort of silly to mention, but we use binary search a lot :).

[1] [http://mrale.ph/irhydra/2/](http://mrale.ph/irhydra/2/)

[2]
[https://bugzilla.mozilla.org/show_bug.cgi?id=1083132](https://bugzilla.mozilla.org/show_bug.cgi?id=1083132)

~~~
alexdima
Forgot to mention a funny fact I found. Minify everything [1]

[1] [https://top.fse.guru/nodejs-a-quick-optimization-
advice-7353...](https://top.fse.guru/nodejs-a-quick-optimization-
advice-7353b820c92e#.nfvi89hjc)

~~~
vanderZwan
> _v8 optimizer (crankshaft) inlines the functions whose body length,
> including the comments, is less than 600 characters._

In what kind of world is that a sensible metric to decide if a function can be
inlined?

~~~
luckystarr
In the "I need to do this quickly to finish my sprint" world.

~~~
konschubert
Wasn't V8 written in a cottage in Denmark?
[http://www.ft.com/cms/s/0/03775904-177c-11de-8c9d-0000779fd2...](http://www.ft.com/cms/s/0/03775904-177c-11de-8c9d-0000779fd2ac.html)
I cannot imagine that they would take unreasonable shortcuts.

~~~
luckystarr
Well, unreasonable now was probably perfectly reasonable at the time of
implementation. Perhaps they even have or had a plan to improve upon it, but
given other tasks (ES6, etc.) it hasn't been given much priority.

I mean, why would they fix it with high priority if the engine already has
reasonable performance and the benchmarks are happy as well?

------
satysin
Sigh I select C and it gives me C++. That perfectly sums up Microsoft's
attitude to C :(

~~~
alexdima
We are definitely cheating there - we use the same colorizer for C and C++. I
don't remember why we define two different languages that point to the same
colorizer.

Please help us out and contribute a PR. Here[1] is where we register the C
language and point to the cpp colorizer. And here[2] is the cpp colorizer.
Please go ahead and try the C++ colorizer out at the Monarch playground[3] and
edit it to make it colorize only C keywords, etc. Here[4] are the steps for
adding a new colorizer.

Looking forward for a contribution on this :).

[1] [https://github.com/Microsoft/monaco-
languages/blob/master/sr...](https://github.com/Microsoft/monaco-
languages/blob/master/src/monaco.contribution.ts#L58)

[2] [https://github.com/Microsoft/monaco-
languages/blob/master/sr...](https://github.com/Microsoft/monaco-
languages/blob/master/src/cpp.ts)

[3] [https://microsoft.github.io/monaco-
editor/monarch.html](https://microsoft.github.io/monaco-editor/monarch.html)

[4] [https://github.com/Microsoft/monaco-languages#dev-adding-
a-n...](https://github.com/Microsoft/monaco-languages#dev-adding-a-new-
language)

~~~
satysin
The highlighting isn't an issue, I think most editors cheat in the same way.
As C++ is a super-set of C it shouldn't be a problem, at least not except for
a few edge cases which I wouldn't worry about IMHO.

My comment was more that the C example code is actually C++.

~~~
mFixman
Except C isn't a subset of C++. There are many valid C keywords that aren't
valid in C++, like restrict and _Noreturn.

~~~
satysin
Well MSVC only just supports C99 so asking for C11 keywords is unlikely to
happen.

I had a quick look at their C++ word list [0] and it looks like _Imaginary and
_Complex and _Bool are the only missing C99 keywords. Feel free to make a PR
if you want them added :)

[0] [https://github.com/Microsoft/monaco-
languages/blob/master/sr...](https://github.com/Microsoft/monaco-
languages/blob/master/src/cpp.ts)

~~~
lorenzhs
restrict is C99. Many C++ compilers accept __restrict__ or some other form of
it to mean the same, but restrict doesn't exist in the C++ standard, so the GP
is correct.

~~~
satysin
Good point, it gets tough remembering all the little differences between the
two.

------
tracker1
It's pretty nice seeing the work to bring this out of VS Code, IIRC it started
as a separate project for Visual Studio Online, but embedded/enhanced as part
of VS Code.

Either way, it's definitely one of the better performing code editors in
JS/Browser usage. For that matter VS Code works surprisingly well compared to
Brackets and Atom.

~~~
Rapzid
Didn't vscode start life as a way to dogfood Monaco? It's my understanding
that is why the vscode repo has been the official Monaco repo as well..

------
lobster_johnson
This looks pretty great. I've been frustrated trying to implement ACE in a
project for Markdown support; it turned out to not work on iOS and Android at
all, and it has a ton of bugs elsewhere, too. I ditched it for CodeMirror,
which turned out to be nearly as bad on mobile.

A quick test shows that Monaco does work on iOS, although there's apparently
no selection support within the editor. Surprisingly, double space produces
"." as it should, but it seems iOS autocompletion doesn't work (not sure if it
can be enabled).

~~~
alexdima
Implementing touch selection on a widget that is not native is not trivial. In
the editor, when you select something, what you see painted is not really the
browser (native) selection. It is simply a bunch of divs painted in such a way
that they look like a selection. To add touch selection we would pretty much
need to implement it from scratch.

If you have the chance and the time, I would very much appreciate a PR to fix
some of the input handling quirks you're seeing on iOS. We are not experts in
everything, and I have come to appreciate the amazing world of OSS :). e.g.
Recently, we've gotten an amazing PR [1] that fixes a lot of the input
handling for CJK languages, which I would have had no chance to fix by myself.

[1]
[https://github.com/Microsoft/vscode/pull/5615](https://github.com/Microsoft/vscode/pull/5615)

------
amasad
The JavaScript IntelliSense support looks really solid. Does it use TypeScript
under the hood for type inference?

Also, any plans to add intellisense support for other languages?

~~~
RyanCavanaugh
Yep, the JS inference engine here is just the TypeScript inference system with
a few extra rules bolted on. It's also the JS inference used when compiling JS
files in TS under the --allowJs flag.

~~~
amasad
Can you point me to the part of the code that is responsible for that in
Monaco? I'd like to use it in my editor locally.

~~~
RyanCavanaugh
The plugin code is here: [https://github.com/Microsoft/monaco-
typescript](https://github.com/Microsoft/monaco-typescript)

------
numlocked
I maintain an open source project for writing SQL queries[0] that currently
uses codemirror. I find it a little sluggish to load. This looks like it could
be a good option -- the one thing that would make it a codemirror killer for
me is the ability to resize the editor window; something text areas obviously
natively support, but codemirror does not. Any idea if Monaco does?

[0] [https://github.com/groveco/django-sql-
explorer](https://github.com/groveco/django-sql-explorer)

~~~
ricklamers
Doesn't it?
[https://codemirror.net/demo/resize.html](https://codemirror.net/demo/resize.html)

~~~
numlocked
I'm looking for mouse-drag-resizing, like a text area. Not auto-sizing to fit
contents. But thanks!

------
kentor
how does this compare to ace editor[0]?

[0]: [https://ace.c9.io/](https://ace.c9.io/)

~~~
joaomsa
Monaco doesn't have alternate keybinding modes like vim or emacs that ace has.

------
pkill17
In their diff example, line 33 on the left and 35 on the right are shown to be
unchanged, however the indent isn't the same... Seems like they've hardcoded
this example incorrectly unless I'm missing something? Left line 32 is
removing a bracket at indent level 2, left line 33 is unchanged bracket at
indent level 1, but there's now one less bracket at level 1 in the right side,
even though no bracket at level 1 was removed?

~~~
alexdima
We don't show leading/trailing whitespace diffs unless the diff consists only
of leading/trailing whitespace changes.

This is sort of what we do when diffing:

* when we need to compare two buffers, we represent them as two arrays of lines

* we then proceed to trim() each line in both arrays

* we then use a greedy optimization where the first N and the last M lines that are equal (post trimming) in both arrays are dropped from further computation

* we then run a LCS algorithm over the remaining lines to find the diffs

It is important to note that the same two arrays of lines can have multiple
equal longest common substrings. This method [1] could get some love and could
try to recover in some of these cases.

[1]
[https://github.com/Microsoft/vscode/blob/5b9ec15ce526decc5dd...](https://github.com/Microsoft/vscode/blob/5b9ec15ce526decc5dd0488339e798f6bcb4ec46/src/vs/editor/common/diff/diffComputer.ts#L198)

------
rattray
Very impressed with the diff-editing feature.

... turns out there's a similar package for Atom:
[https://atom.io/packages/split-diff](https://atom.io/packages/split-diff)

~~~
ajross
Very confused that side by side diff editing is really a new feature in this
world. I mean, ediff landed its first versions in the early 90's sometime I
think, and vim certainly had it from very early verisons too...

~~~
alanning
I use vim daily but haven't tried diffing internally yet. What's your
preferred method of doing this in vim? This page [1] suggests a few.

1\. [http://unix.stackexchange.com/questions/1386/comparing-
two-f...](http://unix.stackexchange.com/questions/1386/comparing-two-files-in-
vim)

~~~
DontGiveTwoFlux
I find it's more trouble than it's worth. For some reason it's just not as
good at diffing as other tools I've used and has a hard time matching up both
files. I find that other tools do a better job.

------
sdegutis
<off-topic> You know, my first thought was that it's weird for the scroll bar
to disappear like that. My instinct is that I want to know what part of the
document I'm on. But then I remember that I have (scroll-bar-mode -1) in
Emacs, so I guess I don't really care that much. </div>

~~~
JonathonW
The scroll bar style is an option, anyways:
[https://microsoft.github.io/monaco-
editor/playground.html#cu...](https://microsoft.github.io/monaco-
editor/playground.html#customizing-the-appearence-scrollbars)

------
Mahn
Surprisingly responsive for a web based editor, really well done. I guess it's
time to give VS Code a try!

------
Secretmapper
Even Micrsoft doesn't use IE. Their github's screenshot uses Google Chrome...
in incognito.

EDIT: I'm actually getting downvoted. This statement is just made in jest
people, chill :)

~~~
jongalloway2
As a Microsoft employee who works on conference presentations, works on hands
on labs, etc., you can't win on this.

If I use Edge exclusively in screenshots, people assume it's not cross-
browser, it's not cross-platform, Microsoft is out of touch with other
developers, Microsoft's living in a bubble, etc.

If I use other browsers for screenshots, I get comments like this.

As @dangrossman replied, we all use whatever browser we want for day to day
browsing.

As a professional web dev, I make a habit of cycling through the modern
browsers because it's just a good practice. I was the annoying guy in my dev
team (not Microsoft, a financial services company) in the early 2000's that
tested everything in Firefox when everyone else just wanted to use IE6 all the
time. I'm typing this in Edge now, last week was a Chrome week.

[please don't downvote the parent comment]

~~~
sinatra
How about using different browsers for different screenshots?

~~~
emn13
Not the parent poster, but if he were me: that can easily look inconsistent
(and inconsistency is ugly), and it can also be more work (as you need to walk
through whatever steps you planned many more times). And of course, if you do
show multiple browsers, which ones? E.g. if you want to include both safari
and IE, you need at least two platforms (more work). Firefox & chrome can be
quite different across platforms when it comes to acceleration, so if that's a
factor...

Perhaps one token screenshot to get the message across isn't a bad idea,
especially if everything else is chrome - webdevs sometimes seem to think
chrome is good enough for everyone, and if there are compat issues in modern
sites, it tends to be due to chrome-specific design (IME, but I bet if you've
got a particularly windows or apple focus things may be different).

------
rsrsrs86
Just downloaded Code. Looks pretty fast. Really like the integrated terminal!

------
ausjke
[https://ace.c9.io/](https://ace.c9.io/) ACE has been the choice for many, how
does Monaco compares to?

------
petemill
Interesting choice of names - Monaco was the name[1] of their web-based Visual
Studio editor that looked very similar to Visual Studio Code, except it came a
couple of years earlier. It's pretty clear they're the same evolution of code

[1] [https://dzone.com/articles/first-look-visual-
studio](https://dzone.com/articles/first-look-visual-studio)

------
ruste
If I had to pick any single example of C code to put the fear of god in young
programmers and make sure that they never wanted to touch C in their life, the
example on this page would be it. That is the single ugliest piece of C I have
ever seen. C can be a beautiful language. This is not that. I take it this is
Microsofts fancy new checked C?

------
deanclatworthy
Anyone got this on a CDN yet? I can't find an actual github repo on github
that contains a bundled JS file?

------
Matthias247
Is there some documentation of how to integrate some kind of intellisense for
a custom language to it and not only syntax highlighting?

I might need to integrate an editor for a custom DSL into a webapp soon, and
Monaco could of course be an interesting alternative to codemirror or ACE.

~~~
alexdima
Here [1] is a working sample showing how to register a completion item
provider for a language.

The monaco-typescript [2] plugin shows how a lot of the language API can be
used.

[1] [https://microsoft.github.io/monaco-
editor/playground.html#ex...](https://microsoft.github.io/monaco-
editor/playground.html#extending-language-services-custom-languages)

[2] [https://github.com/Microsoft/monaco-
typescript/blob/master/s...](https://github.com/Microsoft/monaco-
typescript/blob/master/src/mode.ts#L44)

~~~
Matthias247
Thanks, that should be a good start. [1] does not demonstrate context-
dependent completions, but I guess it should be possible, and maybe [2] helps
there. It's also nice that in the playground intellisense for the monaco API
is enabled.

------
leeoniya
btw, if anyone has some time (i don't unfortunately, since the env setup is
pretty lengthy [1]), it would be great to be able to disable the always-on
semantic highlighting [2].

[1] [https://github.com/Microsoft/vscode/wiki/How-to-
Contribute](https://github.com/Microsoft/vscode/wiki/How-to-Contribute)

[2]
[https://github.com/Microsoft/vscode/issues/5351](https://github.com/Microsoft/vscode/issues/5351)

------
undoware
The dropdown language picker is busted (at least in Chrome). It's got an off-
by-one (or possibly 2) bug.

i.e. Pick 'javascript', it shows JS below... but says 'less'.

~~~
alexdima
Thanks! Created [https://github.com/Microsoft/monaco-
editor/issues/6](https://github.com/Microsoft/monaco-editor/issues/6)

------
GreaterFool
I just tried the editor in Opera and I have a strange issue where the cursor
inverts and turns gigantic when I hover over some elements (line numbers for
instance)

~~~
hkjgkjy
Having the same on Chrome on Mac. Would assume it's a funny line of CSS.

------
shirro
What is the key to get out of insert mode and into normal mode?

------
profeta
you see github is dead when even microsoft moves faster than they do.

Still waiting to be able to have decent by 1970 standards code diff on their
site.

~~~
DasIch
Microsoft has had people working on IDEs and editors for a long time now. It's
really to be expected that Microsoft is ahead of Github on this one.

~~~
profeta
i know. i know. just mocking the consensus here, that startups raison d'etre
is that they can move much faster than big corps.

~~~
DasIch
I don't think anyone really believes that startups can move faster than large
corporations.

Startups can merely fully dedicate themselves to exploring new spaces that
open up because they're not burdened by things such as being already occupied
with doing something, especially something that's profitable.

So when something new appears like VR/AR a startup can jump right in at first
opportunity without having to think too much about it. This has the potential
to be an advantage and means that startups are "faster" (really just earlier)
to certain things.

Github is a profitable business that has nothing to do with editors, so I'd
argue that it's not a startup anyway, certainly not in any far that gives them
advantage in developing editors or IDEs.

Quite frankly I really don't get why they even bother. It doesn't
differentiate their actual business in any useful way and it doesn't make
money. In the meantime they're actually facing competition from Gitlab, a
company that's adding features so powerful you can and other people have build
entire business around them.

~~~
sdesol
> Quite frankly I really don't get why they even bother

I've asked this in the past and all that I could gather was, this is about
mindshare.

With regards to GitLab, if they (GitHub) aren't talking about them in weekly
meetings, they really should; because last week was the first time that I
really thought GitHub, may be in serious trouble. With GitLab's recent UI
changes, it looks like they are finally finding their UI groove. It's still
rough in some areas, but it looks like they have the resources to improve
things.

I don't necessary think GitLab, will be the ones that will usurp GitHub, but
what I think GitLab can and probably will do, is seriously devalue GitHub's
value proposition. That is, turn Git hosting into a commodity product.

Linkedin says GitHub has 501-1000 employees and if I've read things correctly,
they have 2 people working on their search. This means they are dedicating
0.4% of their man power to maintaining and advancing their search technology.
Search is one of the things that Enterprise will actually pay for, if it works
well.

If history has shown us anything, Microsoft is not shy about creating loss
leaders, to get people to use complimentary products in their portfolio.
GitHub's entire business model right now, revolves around hosting code.
Microsoft and Atlassian have complimentary products that can see Git Hosting
become a loss leader, that is, a commodity product.

Other than "Social programming", I really don't know what else GitHub is
focused on. And unless I'm really out of touch with today's programmers, I
would say 80% of programmers, program because it pays well and not because
they are passionate about programming. What I think the vast majority of
programmers want, is to be able to leave work on time and this is where I
think GitHub should really be throwing resources at. And I'm not sure how a
free editor is going to convince people that they need/want to host and pay
for code hosting.

~~~
DasIch
I thought about them doing it for mindshare. However people can be very
opinionated about editors especially outside of the enterprise and they're not
competing with any IDEs. There's just fundamentally not a lot of mindshare to
grab here.

They also already have a ton of it. If they want to grab more mindshare, they
should significantly improve their education offering. The free plan is nice
but doesn't make anyone (want to) use it. They're a few systems for
assignments that use SVN to submit assignments, the ones I've used at
university all sucked. Create a significantly better solution here and every
single computer science student becomes aware of Github.

In any case working on mindshare is an investment in the future, if you're
ahead of your competition and can maintain your position relative to them it
makes sense to work on mindshare. This is not the case for Github at least not
anymore.

~~~
sdesol
Coca-cola is good example of why it's not a bad idea to invest in mindshare,
even when you are an incumbent in a particular space. If the atom editor was
blowing peoples mind away, I would think it makes perfect sense to keep
investing in atom, but the pattern today is:

\- A new version of atom is released and the top voted comment is "Why is it
so slow compared to vscode".

\- A new version of vscode is releases and the top voted comment is "Why is
atom so slow compared to vscode"

With Coco-cola, you are reinforcing an intangible belief, plus your target
audience is pretty diverse and suggestible (not the smartest). Mindshare also
works with Apple, since they also have a very diverse and suggestible consumer
base.

The atom editor is a power tool and its job, is not to help you watch a movie,
satisfy a craving, etc. Its purpose is to help you be more productive and when
it comes to productivity, it can be measured and this is where Microsoft
really threw a wrench into their plans.

Starting the atom editor wasn't a bad move, but with Microsoft's current
strategy with vscode, I would think it's time to cut your losses and focus on
more immediate needs, like fending off GitLab and hardening your core
competencies.

I don't know how many people, out of their 500+ plus employees are working on
atom, but I would have to imagine, using their resources to make an enterprise
grade issue tracking and wiki/content management system would be a wiser
choice.

------
nilved
Interesting choice for the name since that is Apple's monospace font.

~~~
tinza123
Or you know, it's also a country.

~~~
jayrox
And a video game

~~~
ascagnel_
And a Grand Prix.

~~~
deanstag
and a salt biscuit brand

~~~
D_Guidi
and, in italian, a priest

~~~
kgwgk
a monk, not a priest

~~~
D_Guidi
yep, you're right

------
blahi
I wonder if RStudio can switch to this. Probably will never happen :(

~~~
timsneath
Worth noting that we also have rich integrated tools for R developers in the
full Visual Studio: [https://www.visualstudio.com/en-us/features/rtvs-
vs.aspx](https://www.visualstudio.com/en-us/features/rtvs-vs.aspx)

And Visual Studio Code includes the R support out of the box:
[https://code.visualstudio.com/docs/languages/overview](https://code.visualstudio.com/docs/languages/overview)

------
benologist
Web based vscode in 10 ... 9 ...

~~~
rbanffy
Isn't it mostly HTML/JS based already?

~~~
rcarmo
It uses Electron as a shell, so "yes"

------
rodionos
How is it different from notepad++?

~~~
rspeer
Among other things, Monaco is a web page component, while Notepad++ is a
program you download.

I'm guessing you glanced at the page and thought the editors were screenshots.

~~~
rodionos
No, I actually switched between some dialects, java/json, and it looked
similar to codemirror. Somehow I compared it to notepad++ which I use for
locally stored files. I guess someone already asked, how is it different from
codemirror.

