Use the Visual Studio code editor in your own project

0


Recently, GitHub Github.dev service.. If you are referencing the code in the repository, all you have to do to launch the editor is press “.”. You can also change the URL of the page from .com to .dev. This launches the main editor from your browser’s Visual Studio code and provides all the functionality you need to make quick changes and commit to the repository.

This is a handy tool for launching an editor on your PC, updating your local git branch, and then modifying your code without making any changes. Maybe you don’t have time. Maybe you’ve read some reviews and have a simple solution. Your development PC is an hour away and you may need to change it now. If you rent a keyboard to fix an urgent bug, you don’t have to worry about code remaining on a random PC. I am not cloning the repository. Instead, it uses the GitHub API to work directly with code hosted in the cloud.

Github.dev does not replace a local editor.. It runs in the browser’s sandbox, so it doesn’t have a compiler or terminal, and it doesn’t run a lot of extensions (especially extensions that rely on tools like the compiler. .NET Roslyn). By signing in to Github.dev with the same account you use for Visual Studio Code, you can sync from your account with settings.

Presentation of Monaco

Originally it was like a Skunk Works project within Microsoft, Monaco was developed as part of a project to build an online development tool From a new laboratory in Switzerland. Introduced in 2013, it was born as a subset of the Visual Studio editor built using TypeScript. His first role was as an Azure website editor and quickly acted as an editor for Office 365 extension development sites. Since then he has been used as an editor on SkyDrive and Azure DevOps. , then wrapped in Electron and used as the core of Visual Studio Code released in 2015.

After GitHub, Microsoft released its own Monaco-based browser host editor vscode.dev. It functions as a GitHub tool, providing access to local and OneDrive folders, as well as GitHub repositories. Like GitHub.dev, you don’t have access to runtime and debugging tools, but you can upgrade to use it with remote resources in the GitHub code space and work with code in remote environments. from your browser. It also has the ability to sync settings and extensions with the desktop editor, so you can use the same set of tools, extensions, and keyboard shortcuts wherever you code.

Add a familiar editor to your browser It’s a wise move for Microsoft and GitHub. If you are already using it, there is nothing new or installed. All you need is an internet connection and a decent browser. It is also facilitated thanks to the work carried out by Microsoft with Monaco, the web editor of Code.

The Monegasque project is open source, Currently most of its development GitHub repository for Visual Studio code.. This does not mean that it is no longer available as a standalone editor in another project that provides tools for creating your own npm package editor. Microsoft continues to build and ship its own versions of packages. Monegasque publisher..

This is the approach taken by GitHub and others, using the npm Monaco package to customize it. With this API.. With a set of APIs fully documented on npm, the editor is ready to be used in your own application when you need it. You can embed it in your web application, host it in Electron or WebView2 if you need a desktop version, or run it in a progressive web application.

Install Monaco in your application

Monaco Editor is packaged from the Visual Studio Code repository and can be installed via npm on the command line. This will drop three versions of the module. ESM version (ECMAScript module) and two AMD versions (Asynchronous module definition) used by tools like Webpack, one of which has been scaled down for faster downloads. The package also contains a reduced version of the source map and API specs.

The full AMD development version is for development purposes. It is easier to debug than the reduced version. However, if you are sending the code to the user, we recommend that you lower the minimum version of AMD as it has less impact on the device and the user’s bandwidth.

It’s quite easy Activate Monaco in your applicationThe code required to install and run the AMD version of the editor is a few lines. First, create a div container for the editor, then call the JavaScript loader to deploy the AMD module. Then use the require statement to configure the editor configuration file and the main function. Finally, you can launch the editor by calling the create function in the div, prefilling it if necessary, using its properties to set the initial state, and selecting the editor’s default language.

Composition of Monaco using a playground

Many options can be set through the properties of the editor. In many cases, you can customize the appearance of the editor, from mouse wheel operations and tab management to selecting the initial language support. Microsoft offers an interactive playground Here you can use Monaco to provide playground JavaScript, CSS, and HTML editors to experiment with different setups.

The playground is a convenient way to understand how to use Monaco. The drop-down menu at the top left of the screen displays a long list of samples, so you can see how to configure the editor. Learn how to add your own customizations.. In Monaco, it is important to understand that only editors are available. If you want more, you have to write it yourself. This includes all of the chrome around the editor, including all application menus and dialogs.

Monaco does not need to be a code editor. It’s actually a general purpose editing canvas that you can customize to provide the look you need for your application. This could be a text editor with basic word processing capabilities or a tool for configuring a set of Internet of Things devices. Building a full-featured code editor like Visual Studio Code or Github.dev pushes the boundaries of what Monaco can do, just as F1 cars prove new technologies that improve everyday cars. Push outside.

Using Monaco is not difficult. It provides all the features your editor needs. On the contrary, the challenge is to overcome all the configuration options and find the right set of features for your needs. You don’t even have to use Monaco alone. Tools like the Monark syntax highlighting library It extends the basic editor and provides tools for creating and sharing your own language definitions. Maybe you are working on a search language and need a way to create an interactive tutorial. The combination of Monaco and Monaco provides a REPL interface that lets you turn your documents into an interactive experience, much like Monaco’s own playground.

There are a lot of things I love about Monaco. It is a flexible and extensible tool that brings to your applications proven editor features based on the experience of tools such as Microsoft and GitHub. All you need is a small piece of JavaScript.

Copyright © 2021 IDG Communications, Inc.


Share.

Leave A Reply