Using the Monaco Editor in a browser without VSCode #446
Comments
Sevin777
changed the title
|
+1 for this. Doing proper context code completion in CodeMirror and Ace is a nightmare. An open source editor that had good hooks to this kind of thing would be gold. We just need some docs on using it ;) |
|
@sevin7676 you are correct that the Monaco editor is contained in the vscode repository and we are working on making the Monaco Editor more easy to consume independent of VS Code. |
|
+1 making some docs on Monaco editor. So far this editor beats both codemirror and ace :) |
|
This is almost same as #815 |
|
I'm eagerly awaiting this also. Don't forget to close this UserVoice suggestion when it's complete. https://visualstudio.uservoice.com/forums/293070-visual-studio-code/suggestions/7782546-release-monaco-javascript-code-editor |
|
+1, the other options like codemirror or ace does not even come close compared with typescript playground |
|
+1 Waiting for this! |
|
+1 |
|
It is still on our backlog but it didn't make the cut for the GA milestone, sorry. |
|
I've been using code mirror to bootstrap http://alm.tools/. Would like to integrate Monaco when it becomes available. I have time. It's a labor of love 🌹 |
|
fyi @Microsoft/vscode |
|
+1 The editor at the typescriptlang playground is amazing! Especially the speed, intellisense, and VS look-and-feel. Been working a lot with other code editors that offer intellisense, but none come close to Monaco. Eagerly waiting :) Thanks for keeping us updated, @egamma |
|
+1 yes please |
|
👍 |
|
While we wait for official documentation... This HTML hosts the editor (in TypeScript mode) when served from the 'out' directory VSC builds to: <!DOCTYPE html>
<html>
<head>
<title>VSC Editor</title>
<style>
html, body { height: 100%; margin: 0; }
.box { display: flex; flex-flow: column; height: 100%; }
.box .row { flex: 0 1 auto; }
.box .row.content { flex: 1 1 auto; }
</style>
</head>
<body>
<div class='box'>
<div class='row content' id="editor"></div>
</div>
<script type="text/javascript" src="vs/loader.js"></script>
<script type="text/javascript">
'use strict';
(function () {
require(['vs/editor/editor.main', 'vs/base/browser/ui/aria/aria'], function (main, aria) {
aria.setARIAContainer(document.body);
var editor = Monaco.Editor.create(document.getElementById('editor'), {
value: 'var foo = \'bar\';',
mode: 'text/typescript'
});
window.addEventListener('resize', function () {
editor.layout();
});
});
})();
</script>
</body>
</html> |
|
I managed to get the editor working using something similar to darrinm's solution but I still haven't figured out how to add extra libraries to the auto completion system. The azure-based playgrounds out there seem to have a way to include code libraries but the API seems different for the version in VS Code and I haven't been able to figure it out yet :( |
|
👍 |
|
@egamma do you have a rough date on when this might be available? |
|
+1 please make it possible |
|
+1 ,I think that this feature will bring closer to this project many people who don't use vs code yet |
|
@egamma, thank you. I looked at the PR - there's a lot of commits there and I am not entirely familiar with with VSCode code-base just yet.
All the best! Love the VSCode. |
|
@mbana I've linked to the PR as an illustration of progress, not that you can use it already.
This is not our main focus but you can create a branded custom IDE, the Glad you like VS Code |
|
Is there any difference between Monaco Editor and Winjs (http://try.buildwinjs.com/)? They both seem similar. Will Monaco be better than Winjs? |
|
@gujiman The WinJS site seems to use a version of monaco, since it uses classes like |
|
The intellisense/autocomplete in Winjs appears to be very slow. I suggest looking at http://vbguyny.github.io/Ace.Tern/demo.html which uses the ACE editor plus the Tern libraries to create a very powerful and fast editor. |
|
@gujiman WinJS is irrelevant, it is a collection of UI controls which does not contain a source code editor. @egamma Is there any possibility to access Visual Studio Live source code? I know https://github.com/projectkudu/kudu is open source but front end code is not available, right? |
|
Please see the May plan we will make progress on this topic #6105 |
|
Great news! Thank you egamma! |
|
I've been meaning to get a prototype of vscode as editor in chrome devtools workspaces in my free time. Would be great to have documentation. |
|
@egamma Thanks a lot for your Q&A yesterday in Shanghai. I read the plan and looks like Monaco will be a separate repo? is this happening already? Can we have the URL? BTW: hope you had a great time in China :) |
|
@ups216 its been done https://www.npmjs.com/package/monaco-editor-core which is just shipped (pushed to npm) from this repository and I'm experimenting migrating alm to it as well alm-tools/alm#120 🌹 |
|
@basarat have you considered using something like https://github.com/lerna/lerna to help manage the mono-repo approach (single repo, multiple npm packages) ? Do you think there will be other goodies in VSCode that make sense to extract as separate npm packages? |
|
It looks like progress is being made on this :) |
|
+1 looking forward to get the full Javascript solution of vscode. This is exciting! |
|
@maxdec , thank you for the link. The issue is now resolved! |
|
Just made a release of alm that uses monaco : |
|
Will VSCode use this newly extracted Monaco? Will they be synchronised? Will they diverge? |
|
GHEdit is a project that has "ported" large sections VSCode to run in a browser. If you have an interest in doing that here is the project page: https://github.com/spiffcode/ghedit It's targeted at editing, searching, and browsing Github repos. Live version: |
and others
Now that VS Code is open source, it also means that the Monaco Editor is open source (at-least to some extent).
I would really like to use this editor in my own web application for editing TypeScript files. The only problem is I can't find any documentation about how to do this. I know its possible because the editor is on TypeScript Playground and a few other places.
As far as I can tell, the open sourcing of VS Code is the first time the source code of the Monaco editor has been made public. Also, I think that the VS Code repository is the primary source of the Monaco editor (someone from Microsoft please confirm?).
So far, there have been many questions about using the Monaco Editor on Stack Overflow and other forums, but I have yet to see an official reply from Microsoft.
Can someone please provide some documentation on using the Monaco Editor in a web site, or perhaps release the source code of TypeScript Playground (There is nothing to hide now that we have the Monaco source in the VS Code repository).
Currently, the only thing keeping me from using TypeScript as a JavaScript replacement is the fact that I can't easily use the Monaco Editor inside of my web application. I'm currently using the ACE Editor with a Tern plugin I created. I don't want to go through all of the work of creating full Intellisense support for TypeScript inside of ACE because its a significant undertaking- Instead I'd rather contribute to the Monaco editor and use it as a replacement for ACE (and replace JavaScript with TypeScript).
The text was updated successfully, but these errors were encountered: