"Tools" about VS Code-all you want to know is here

background

Before the department wanted to unify the code editor, it finally decided to use VS Code.

I had the idea of writing this article before, so I took the initiative to sign up.

So there is today's article, an article that introduces VS Code in detail.

I refer to a lot of information in the middle, if there are errors, please leave a message to point out :)

The main content of the article:

• VS Code overview

  • Introduction to VS Code
  • VS Code technical route
  • VS Code technical composition
  • VS Code's efforts to optimize performance
  • VS Code startup speed optimization
  • VS Code code editor scrolling virtualization
  • VS Code shading speed optimization
  • VS Code multi-process architecture
  • backstage process
  • Editor window
  • IO
  • Plug-in process
  • Debug process
  • Search process

• `VSCode technical architecture and core

  • VS Code technical architecture

  • VSCode core

    • Core layer
    • Core components
    • Core environment
• VS Code language support

• VS Code plug-in system

  • language support
  • Debugger
  • Theme/color scheme
  • Editor assistance
  • Extended command
  • Extended menu
  • hot key

• VS Code plug-in development

  • Application of VSC plug-in in actual project
  • Some interesting VSC plugins in the community

• VS Code and Git integration

  • Introduction to Git integration features
  • Git commit history

• VS Code remote development

  • Supported functions
  • Need to install plug-ins
  • Open remote directory and port forwarding

• VS Code server-side deployment

  • Code Server download and run

• VS Code development practice

  • 10 useful plugins I recommend
• summary

Not much nonsense, let's get started.

text

VS Code overview

Introduction to VS Code

Visual Studio Code (hereafter referred to as VSC) is an open source, free, cross-platform code editor for

Microsoft hopes that while maintaining the core lightweight text editor, it will add project support, IntelliSense and compilation and debugging to the editor.

The predecessor of VSC is Microsoft's cloud-based editor project: Monaco editor, as a part of Microsoft's cloud service, it provides the ability to edit source code online.

The VSC Team is led by the famous engineer Erich Gamma. Erich is one of the authors of "Design Patterns", the father of Eclipse, and has many years of IDE development experience.

Due to the limitations of the cloud editor and the change in Microsoft's attitude towards platforms other than Windows in recent years, Microsoft has decided to expand and develop it into a universal code editor for all platforms.

VS Code technical route

VSCode uses Electron, and the code editor used is named Monaco .

In terms of language, VSCode uses HTML, CSS, TypeScript for development, and uses Electron as a build tool.

From an implementation point of view:

Electron = Node + Chromium + Native API

In other words, Electron has a Node operating environment, which gives users the ability to interact with the bottom layer of the system.

Relying on Chromium provide interface interaction support based on Web technologies (HTML, CSS, JS), and also has some platform features, such as desktop notifications.

VS Code technical composition

Electron

In order to protect the security of local files, browsers do not provide direct access to local files.

In order to achieve access to the local file system, VSC uses Github's open source project Electron.

Electron, formerly known as Atom-Shell , is an open source framework written by Github for the Atom editor.

It perfectly integrates Chromium and Node.js, allowing developers to use HTML to implement App UI and Node.js API to access the file system.

TypeScript

The main code of VSC is written in TypeScript. At present, the core of VSC has more than 1,100 TS files. The language advantage of TypeScript provides a guarantee for multiple reconstructions.

Pure DOM manipulation

In order to ensure the UI response speed, VSC does not use the existing UI library, most of the UI adopts absolute size, and it is simple and rude to avoid the linkage refresh of a large area UI.

VS Code's efforts to optimize performance

The VS Code team has done a lot of work to improve the performance of VSC.

VS Code startup speed optimization

Editors based on HTML technology, limited by Chrome, generally have the problem of slow startup speed.

In addition to the basic JS / CSS combined compression, VSC also directly embedded the particularly commonly used ActivityBar icon in the css.

But even so, there is still a big gap between the startup speed and editors such as Sublime Text.

Here is a trick. When we open a file with VSC, VSC will start a new VSC window by default. This will take a long time to start. We can use the opened VSC instance to open window.openFilesInNewWindow: false New files, so there is almost no waiting time.

VS Code code editor scrolling virtualization

Let the editor only render the visible part, reducing the pressure on the browser for editing large files.

At the same time, with css translate3d , to avoid re-rendering unchanged lines of code.

VS Code shading speed optimization

In order not to reinvent the wheel, VSC uses the same code coloring analysis syntax as TextMate.

It is a set of analysis solutions based on regular expressions. Although JS natively supports regular expressions, for higher efficiency, VSC uses a set of regular expression engines written by C++

VS Code multi-process architecture

The above mentioned are just some minor optimizations. What really guarantees the response speed is the advantage brought by the multi-process architecture.

VSC adopts a multi-process architecture. After VSC is started, there are mainly the following processes:

• backstage process

• Editor window-started by a background process, it is also a multi-process architecture

  • UI written in HTML

    • Activitybar
    • Viewlets
    • Panels
    • Editors
    • Statusbar

• Nodejs asynchronous IO

  • FileService
  • ConfigurationService

• Plug-in host process

  • Plug-in instance

    • Plug-in subprocess-such as TS language service
    • Plug-in instance
  • Debug process
  • Search process
• Editor window

backstage process

The background process is the entrance of VSC, which is mainly responsible for managing the editor life cycle, inter-process communication, automatic update, menu management, etc.

When we start VSC, the background process will be started first, read various configuration information and history records, and then integrate these information and the HTML main file path of the main window UI into a URL, and start a browser window to display and edit The UI of the device.

The background process will always pay attention to the status of the UI process. When all the UI processes are closed, the entire editor exits.

In addition, the background process will open a local Socket . When a new VSC process starts, it will try to connect to this Socket and pass the startup parameter information to it. The existing VSC will perform related actions. It can ensure the uniqueness of VSC and avoid the problems caused by opening multiple folders.

Editor window

The editor window process is responsible for the display of the entire UI.

That is the part we have seen, the UI is all written in HTML, and there is not much need to be introduced.

IO

The reading and saving of the project file is done by the NodeJS API of the main process, because all are asynchronous operations, even if there is a relatively large file, it will not block the UI.

IO and UI are in the same process, and adopt asynchronous operation, which guarantees the response speed of UI on the basis of guaranteeing IO performance.

Plug-in process

Each UI window will start a NodeJS child process as the host process of the plug-in. All plug-ins will run together in this process.

The main purpose of this design is: avoid the complex plug-in system blocking the UI response. This starts with JS and the browser.

In most operating systems, the refresh rate of the display is 60 frames per second, which means that the application needs to complete all calculations and UI refresh within 16.7 milliseconds.

The speed of HTML DOM has always been criticized, and there is less time left for JS. Therefore, it is necessary to complete all the instructions in such a short time to ensure the response speed of the UI.

But in fact, it is difficult for us to complete tasks such as coloring 10,000 lines of code in such a short time. This requires us to transfer this time-consuming task to another thread or process to do it, and then return the result to the UI process after the time-consuming task is over.

In the latest version of VSC, changed all language support to plug-ins. Including the Markdown language support previously implemented with Web Worker in the UI process. Later I will introduce a typical working method of language services.

But putting the plug-in in a separate process also has obvious disadvantages. Because it is a separate process, not a UI process, there is no way to directly access the DOM tree. It becomes difficult to change the UI in real time and efficiently. The extension in VSC There is almost no API to extend the UI in the system.

Debug process

Debugger plug-in is a little different from ordinary plug-ins. does not run in the plug-in process, but a new process is opened every time you debug.

Search process

Searching is a very time-consuming task. VSC also uses a separate process to achieve this function to ensure the efficiency of the main window.

divides time-consuming tasks into multiple processes, effectively ensuring the response speed the main process.

VSCode technical architecture and core

VS Code technical architecture

The layered architecture is worthy of our study.

Source directory structure

VSCode core

Core layer

• base : Provide general services and build user interfaces
• platform : Inject service and basic service code
• editor : Microsoft Monaco editor, can also run independently
• wrokbench : Cooperate with Monaco and provide a framework for viewlets: such as: browser status bar, menu bar uses electron to implement desktop programs

Core components

• Electron : Formerly known as Atom Shell, it is an open source framework developed by Github.
• Momaco Edictor : The core component of VSC.
• Typescript : A strict superset of Javascript.
• Language Server Protocol : Language server, which provides programming language-related functions such as auto-completion, definition jump, code formatting, etc.
• Degug Adaptor Protocol : DAP is a JSON-based protocol, which abstracts the communication between development tools and debugging tools.
• Xterm.js : It is a front-end component developed using TS, which brings complete terminal functions into the browser, and can be connected to processes such as bash.

Here is a brief demonstration of LSP and DAP:

Structure without DAP:

Structure with DAP:

Once again embodies the idea of stratification.

Core environment

The entire project is completely implemented using typescript. The main process and rendering process run in electron, and the api used is different, so the organization of each directory in the core is also arranged according to the api used.

The operating environment is divided into several categories:

• common : Only use javascritp api code, can run in any environment
• browser : browser api, such as operating dom; you can call common
• node : Need to use node's api, such as file io operation
• electron-brower : render process api, can call common, brower, node, rely on electron renderer-process API
• electron-main : main process api, you can call: common, node depends on electron main-process API

VS Code language support

VS code supports almost all mainstream programming languages.

For JS, TS, CSS, HTML, VS code, out-of-the-box support is provided, but for other languages, you need to install the corresponding plug-ins.

The current ranking of the most downloaded language plugins:

VS Code plug-in system

The plug-in system is essential to VSC.

why?

In the early version, VSC did not have a plug-in system, and only supported TypeScript, JavaScript, and C# IntelliSense, as well as code coloring in the remaining 40 languages.

So VSC only appeared in the Microsoft technology community. In December 2015, VSC released the first version that supports extensions.

Soon there was support for many other languages, such as Go language, C++, Java, Python, Ruby.

Therefore, with the extremely fast experience of the core editor, plus the good expansion capabilities of , VSC has been achieved.

language support

VSC has formulated a complete language support system to facilitate the support of new programming languages.

What features does a code editor need to support a new language?

• Code display

  • Code coloring

• IntelliSense

  • Code hint
  • Code jump
  • Mouse touch prompt
  • Find references
  • Error message

• Code modification

  • Autocomplete
  • Refactoring function

Compatible with TextMate's code coloring analysis

You can simply copy the language coloring configuration file of TextMate to the plug-in and specify it in package.json.

Language support common protocol

VSC agreed on a common communication protocol to support multiple languages

Because VSC adopts a multi-process architecture, language developers can use their familiar language to write language services in this language. VSC will use JSON-RPC communication to communicate with the language services, execute user commands, and obtain results.

Debugger

Similar to language services, VSC has opened a set of common protocols to meet the debugging needs of platforms with different languages.

Theme/color scheme

VSC uses the same color scheme file format as TextMate.

Editor assistance

VSC provides editor operation API, you can get user input points and current file code in real time. In this way, the shortcut operations that can be provided can be determined according to the user's current document. For example, methods that do not exist are automatically added.

Extended command

Developers can define their own commands in the plug-in. These commands will appear in the "Command Panel". Developers can ctrl/cmd + shift + p or F1 to complete complex operations.

Plug-ins can use all NodeJS APIs and cooperate with various NodeJS libraries to complete very imaginative functions.

Extended menu

VSC provides file manager menu, editor menu, and file title menu extension points. It is convenient for developers to operate in different contexts.

hot key

Developers can assign shortcut keys custom operations.

VS Code plug-in development

VSC plug-in development document: https://code.visualstudio.com/api

Wing plug-in development documentation: http://developer.egret.com/cn/github/egret-docs/Wing/introduction/index.html

Application of VSC plug-in in actual project

Using the VSC plug-in, we can customize some efficiency tools for the project, such as:

1. MyStock one-click download translation plugin

This is a plug-in I wrote to quickly download translation resources.

1. WMS translation automatic generation plug-in

The plugin for quickly generating translation key for the project next door:

Some interesting VSC plugins in the community

1. Little Overlord

1. Leek box

There are many more, so I won’t list them one by one.

VS Code and Git integration

Introduction to Git integration features

Visual Studio Code comes with support for Git.

You need to have installed Git version 2.0.0 (and above).

The main functions are as follows:

• Display the changes of the file being edited in the line number slot
• The Git status bar (located in the lower left corner) will display the current branch, the edit indicator, and the number of uncommitted or unpulled commits

• Able to complete common Git operations in the editor:

  • Initialize a warehouse
  • Clone a warehouse
  • New branches and tags
  • Staging and submitting changes
  • Push/pull/synchronize a remote branch
  • Resolve merge conflicts
  • View comparison

Click clone the repository Git remote repository address in the pop-up box:

Submit the changes and push to the remote warehouse (see the figure below for more supported Git commands):

Git commit history

When using git, you often need to check the modification records, or you need to check who submitted what files, etc. Of course, you can go to the directory where the git code is stored, but this is very inconvenient. If you use the vscode editing tool to write, you can install a git The history toolkit, as shown in the figure:

Then restart vscode, select any file or folder, right click to see the git:history label.

Click to pop up the Git History page, as shown below:

VS Code remote development

Supported functions

VS Code is used for remote development. It can support seamless remote development on physical machines, containers, and Windows Subsystem for Linux (WSL). It can:

• Develop on the same operating system deployed, or use larger or more specialized hardware
• Use the development environment as a sandbox, so as not to affect the local computer configuration
• Let novices get started easily, let everyone maintain a consistent development environment
• Use tools or runtimes that are not originally available in the local environment, or manage multiple versions of them
• Develop Linux applications in WSL
• Access the existing development environment from multiple different computers
• Debug applications running in other locations (such as customer websites or the cloud)

The following is the operation process of connecting to a local virtual machine through SSH to simulate remote development.

The principle of using VS Code to connect to the server remotely is as follows. VS Code will run a Server on the remote host and connect to the remote server locally via SSH.

Need to install plug-ins

Search on the VS Code extension page: Remote - SSH

After installing the Remote-SSH extension, you will see a new status bar icon on the far left:

The remote status bar icon can quickly display in which context VS Code is running (local or remote). Click the icon or click the F1 button and then enter Remote-SSH, and Remote-SSH related commands will pop up.

Select the Remote-SSH: Connect to Host command, and then enter the connection information of the remote host in the following format to connect to the host: user@hostname, and then enter the login password as prompted.

VSCode will open a new window, and then you will see a notification that "VSCode Server" is being initialized on the SSH host. Once the VSCode server is installed on the remote host, it can run extensions and communicate with your local VSCode instance.

By looking at the indicator in the status bar, you can know that you have connected to the virtual machine. It shows the host name of the virtual machine.

Once connected to the remote SSH host, you can interact with the files on the remote machine. If you open the integrated terminal, you will find that you are now under the remote Linux.

Open remote directory and port forwarding

Now you can use the bash shell to browse the file system on the remote host. You can also use "File">"Open Folder" to browse and open the folder on the remote directory.

In addition, if the development is a WEB application, in order to be able to browse to the application on the remote host, we can use another port forwarding function to achieve it.

VS Code server-side deployment

Code Server download and run

The Coder-server project is deployed on a remote server, which can open the browser to write code anytime, anywhere. The steps are as follows:

• ssh to connect to the server
• Download code-server binary version wget https://github.com/cdr/code-server/releases/download/v3.9.0/code-server-3.9.0-linux-amd64.tar.gz
• Unzip tar -xvzf code-server-3.9.0-linux-amd64.tar.gz
• Rename mv code-server-3.9.0-linux-amd64.tar.gz code-server

run:

• cd code-server
• export PASSWORD="password" && ./bin/code-server --port 8080 --host 0.0.0.0

Description:

1. Without specifying a password, one will be generated by default, which can be seen after running
2. --port specifies the port to run
3. --host 0.0.0.0 The default is 127.0.0.1, which can only be accessed locally, it must be changed to 0.0.0.0 to access outside the network

The effect after access is as follows (basically the same as the local VS Code interface, except that the extension cannot be installed online):

Advantages of code-server:

• High portability: No matter where you are, as long as you have a computer on hand and can connect to the Internet, you can debug the code.
• High security: Sometimes you may not be using your computer, but you have to complete some assigned tasks. You can pull the code from the git repository to the current computer to complete, but there may be some that you don’t want For the record to be left, cloud coding can ensure that you do not leave a trace.
• Convenient debugging: Because the code is run on the server environment, if this server happens to be the server you use, you see is what you get, and there is no need to solve the environmental compatibility problem in subsequent code deployment.
• High uniformity: Sometimes you may need multiple teams to develop coding in the same area, but your teammates may have completely different environments and even slow down the project due to environment configuration. At this time, create multiple accounts and distribute them to your teammates. Cloud programming on the server can solve this problem perfectly.

Disadvantages of code-server:

• There are very high requirements for cloud servers: this is not only a requirement for memory and cpu, but also a great demand for network bandwidth. Moreover, the loading time of the running code is also delayed compared to the local vscode.
• You can't write code without a network: Because it's based on the interaction between a browser and a server, you can't open a webpage without a network.
• Can’t write too big a project: vscode is a lightweight IDE. If you want to develop a particularly large website, you must use other IDEs. The native support for development plug-ins is more comprehensive.
• Unable to debug graphical pages: It’s not impossible to debug at all. It can be accessed through a browser, but this requires your server to perform larger bandwidth, and the cost is higher latency. Maybe you just have to write an html page, but I want to preview the effect every time I write a few lines, and the code-server needs you to wait half a day to send the page from the server, which is definitely not comparable to local access.

VS Code development practice

Front-end practical plug-in recommendation

1. AutoCloseTag

1. Bracket Pair Colorizer

1. ESLint

...

1. GitLens

1. Import Cost

1. Prettier

1. Peacock

1. Svg viewer

1. Indent-rainbow

1. Reload

summary

VS Code is a tool that we can't live without. It has a lot of things worth exploring. We look forward to discovering it.

There is so much content in this article, I hope it helps you.

I'm too talented, if I make any mistakes, please correct me, thank you.

If you find the content helpful, you can follow my official account, keep up with the latest developments, and learn together!

Reference

• https://www.electronjs.org/docs/tutorial/application-architecture#electron-application architecture
• https://zhuanlan.zhihu.com/p/99587182
• http://imzc.me/dev/2016/08/15/vscode-the-architecture/
• http://imzc.me/dev/2016/08/16/vscode-the-extensions/
• https://codeteenager.github.io/vscode-analysis/learn/
• https://segmentfault.com/a/1190000020833042