12 ms·
The Monaco Code Editor
- tracker1 10y agoIt'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 10y agoDidn'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..
- Secretmapper 10y agoEven 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 :)
- dangrossman 10y agoMicrosoft isn't a person, it's 117,354 different people, who collectively probably use every variety of browser. An incognito window of a different browser than your primary one would be a simple way to get a screenshot free of your private tabs, messy addon buttons, and any pre-release features that shouldn't be made public accidentally.
- rcarmo 10y agoThis. We actually use non-Windows platforms, too. ;)
- tacos 10y agoThey've been doing this on purpose for years to signal they no longer have their heads up their own asses. The fact that you haven't noticed until now may indicate...
- yayadarsh 10y agoIt sounds like you are attributing this to some sort of surreptitious attempt to "seem relevant", where really it's much simpler. Unless you are working directly on IE/Edge, there is absolutely no "top-down" direction as to which browser you must use. Truth is, you use what browser you like. On my team (MSFT employee) this is a mixture of Chrome, FF, IE, and Edge, based on personal preference.
- eyko 10y agoI'm not sure if your team is large enough for the following question but: do you find that usage ratios are comparable to general (global) browser share stats?
- tacos 10y agoThe product states it's compatible with a bunch of browsers; of course the devs use a mix. That's not interesting. But like the requisite non-white person in every group photo, Microsoft's choice of browser screenshots most certainly is a conscious decision. For the same reasons. It's not to fake relevancy; it's to signal they're culturally aware.
- blahi 10y agoYou can say it's a conscious decision on a corporate branded product launch, like the surface. Not on some obsucure developer tool's page.
- itaysk 10y agoWhy would they use IE, the use Edge :)
- jongalloway2 10y agoAs 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 10y agoHow about using different browsers for different screenshots?
- jongalloway2 10y agoI do that sometimes, but that's kind of weird too. If you're reading a tutorial that keeps flipping between browsers, it calls attention to the browser rather than what you're learning about. We do sometimes flip between browsers for conference demos - I try not to call attention to it - just use a few different browsers and people who notice that kind of thing will see it.
- christogreeff 10y agoWhat next? Different operating systems? :) I suspect the guy just wants to get some work done. I'm ok with whatever browser works for him, and I will choose whatever browser works for me if IE/Chrome/Firefox does not perform optimally to my own standards.
- emn13 10y agoNot 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).
- alexdima 10y agoThe screenshot doesn't represent a statement on my part. I use Chrome, Edge and Firefox all the time. I especially enjoy debugging the editor in Edge's F12 Tools, because Edge's debugger is built with the monaco editor ;).
- nojvek 10y agoGlad you like it. Let us know if you have any feedback regarding the tools. I'm one of the devs on the team.
- hackinthebochs 10y agoGonna have to give edge a try just for this
- nilved 10y agoInteresting choice for the name since that is Apple's monospace font.
- tinza123 10y agoOr you know, it's also a country.
- jayrox 10y agoAnd a video game
- ascagnel_ 10y agoAnd a Grand Prix.
- deleted 10y ago[deleted]
- deanstag 10y agoand a salt biscuit brand
- freyir 10y agoAnd the internal codename for a Microsoft-developed music-making program similar to Apple's GarageBand. Apparently never released. [1] http://www.foxnews.com/story/2006/04/11/microsoft-readies-monaco-answer-to-apple-garageband.html http://www.foxnews.com/story/2006/04/11/microsoft-readies-mo...
- D_Guidi 10y agoand, in italian, a priest
- kgwgk 10y agoa monk, not a priest
- profeta 10y agoyou 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.
- actsasbuffoon 10y agoThis makes me wonder how hard it would be to write a browser extension that uses Monaco for displaying diffs on Github.
- manigandham 10y agoWhat is so bad about the Github diffs?
- profeta 10y agoIt often hides syntax highlight if it times out on their servers, which is almost always. It will outright hide the file if over 500lines or so, which i have a lot when changing config files prefixes. They will show no syntax on 99% of the cases, etc.
- DasIch 10y agoMicrosoft 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 10y agoi know. i know. just mocking the consensus here, that startups raison d'etre is that they can move much faster than big corps.
- DasIch 10y agoI 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.
- sdegutis 10y ago<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 10y agoThe scroll bar style is an option, anyways: https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-scrollbars https://microsoft.github.io/monaco-editor/playground.html#cu...
- pkill17 10y agoIn 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?
- mAritz 10y agoIt's not hardcoded. I just tested it in an actual Code instance and their diff algorithm appears to mark the wrong braces as removed.
- alexdima 10y agoWe 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/5b9ec15ce526decc5dd0488339e798f6bcb4ec46/src/vs/editor/common/diff/diffComputer.ts#L198 https://github.com/Microsoft/vscode/blob/5b9ec15ce526decc5dd...
- satysin 10y agoSigh I select C and it gives me C++. That perfectly sums up Microsoft's attitude to C :(
- mwambua 10y agoHaha... I also like how the first example is a batch script. :-D
- jbb67 10y agoNo, it's not even C++. "void Direct3DBase::Initialize(CoreWindow^ window)" That's not C++.
- alexdima 10y agoWe 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/src/monaco.contribution.ts#L58 https://github.com/Microsoft/monaco-languages/blob/master/sr... [2] https://github.com/Microsoft/monaco-languages/blob/master/src/cpp.ts https://github.com/Microsoft/monaco-languages/blob/master/sr... [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-new-language https://github.com/Microsoft/monaco-languages#dev-adding-a-n...
- tiles 10y agoDoes 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?
- Secretmapper 10y agoDoes Atom still feel slower? I've used Atom before and it did feel sluggish, and using VSCode for TypeScript really felt lightyears ahead from Atom. (maybe a bit unfair of a comparison since it's most likely nicely integrated for it, but whatever) To be fair I haven't caught up with their current versions (I'm a vimmer, I just tried them) but I think I tried Atom after the React move.
- rattray 10y agoAtom has gotten incrementally faster and I have few problems using it as my main editor at work, on a Macbook Pro with 16GB of RAM. It isn't pleasant to use on my personal laptop (MBA with 4GB RAM) where I frequently switch projects. While I am a happy Atom user, I am disappointed with performance; I think there's an order-of-magnitude jump in overall speed that the editor could really use.
- Loic 10y agoYou are talking about 16 GB of RAM, rights? My emacs is very happy with 32 MB of RAM and my vim with even less. I understand that Atom is doing a lot, but if you need 16 GB of RAM to run your text editor, this simply means that the developers have not been using the right data structures to manage the state of the application or maybe the new code editors have an implementation of an AI coding for you so you can outsource yourself.
- Longhanks 10y agoThat's the price you pay for Electron.
- benologist 10y agoWeb based vscode in 10 ... 9 ...
- rbanffy 10y agoIsn't it mostly HTML/JS based already?
- rcarmo 10y agoIt uses Electron as a shell, so "yes"
- rcarmo 10y agoActually, if you go to https://tryappservice.azure.com https://tryappservice.azure.com and create a temporary (free, login required, no registration, etc.) web app, you can edit it in real time with Monaco. You can do that in Go, NodeJS, Python... Etc.
- petemill 10y agoVSCode was actually based on a web-based version that was previously launched in Azure and called... Monaco https://dzone.com/articles/first-look-visual-studio https://dzone.com/articles/first-look-visual-studio
- leeoniya 10y agobtw, 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
- kentor 10y agohow does this compare to ace editor[0]? [0]: https://ace.c9.io/ https://ace.c9.io/
- joaomsa 10y agoMonaco doesn't have alternate keybinding modes like vim or emacs that ace has.
- rattray 10y agoVery 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 10y agoVery 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 10y agoI 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-files-in-vim http://unix.stackexchange.com/questions/1386/comparing-two-f...
- DontGiveTwoFlux 10y agoI 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.
- microcolonel 10y agoI think it's almost exactly the same as the diff viewer in Team Foundation Server 2015, though I really really don't recommend installing or using that when you have Gitlab at your disposal.
- nojvek 10y agoI hope VSCode has fixed the bug where left side cannot be edited when picking two files.
- philbarr 10y agoIf you're using split-diff I also recommend MiniMap [0] and the Minimap-Split-Diff plugin [1] [0] https://atom.io/packages/minimap https://atom.io/packages/minimap [1] https://atom.io/packages/minimap-split-diff https://atom.io/packages/minimap-split-diff
- blahi 10y agoI wonder if RStudio can switch to this. Probably will never happen :(
- timsneath 10y agoWorth 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
- deleted 10y ago[deleted]
- amasad 10y agoThe 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 10y agoYep, 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 10y agoCan 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 10y agoThe plugin code is here: https://github.com/Microsoft/monaco-typescript https://github.com/Microsoft/monaco-typescript
- numlocked 10y agoI 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 10y agoDoesn't it? https://codemirror.net/demo/resize.html https://codemirror.net/demo/resize.html
- numlocked 10y agoI'm looking for mouse-drag-resizing, like a text area. Not auto-sizing to fit contents. But thanks!
- rodionos 10y agoHow is it different from notepad++?
- rspeer 10y agoAmong 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 10y agoNo, 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.
- deleted 10y ago[deleted]
- lobster_johnson 10y agoThis 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 10y agoImplementing 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
- undoware 10y agoThe 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 10y agoThanks! Created https://github.com/Microsoft/monaco-editor/issues/6 https://github.com/Microsoft/monaco-editor/issues/6
- deanclatworthy 10y agoAnyone got this on a CDN yet? I can't find an actual github repo on github that contains a bundled JS file?
- Matthias247 10y agoIs 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 10y agoHere [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#extending-language-services-custom-languages https://microsoft.github.io/monaco-editor/playground.html#ex... [2] https://github.com/Microsoft/monaco-typescript/blob/master/src/mode.ts#L44 https://github.com/Microsoft/monaco-typescript/blob/master/s...
- Matthias247 10y agoThanks, 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.
- petemill 10y agoInteresting 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
- shirro 10y agoWhat is the key to get out of insert mode and into normal mode?
- ausjke 10y agohttps://ace.c9.io/ https://ace.c9.io/ ACE has been the choice for many, how does Monaco compares to?
- rsrsrs86 10y agoJust downloaded Code. Looks pretty fast. Really like the integrated terminal!
- Mahn 10y agoSurprisingly responsive for a web based editor, really well done. I guess it's time to give VS Code a try!
- GreaterFool 10y agoI 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 10y agoHaving the same on Chrome on Mac. Would assume it's a funny line of CSS.
- ruste 10y agoIf 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?