Microsoft Conscience--visual Studio Code Open source free cross-platform coding editor

Microsoft Conscience--visual Studio Code Open source free cross-platform coding editor

In addition to the Microsoft Edge Browser and the new Windows 10 preview in the Build 2015 conference, Microsoft is the biggest surprise to announce the launch of the free cross-platform Visual Studio Code Editor!

Visual Studio Code (VS CODE/VSC) is a free and open source modern lightweight code editor that supports syntax highlighting, smart code completion, custom hotkeys, brace matching, snippets, code diff, GIT, and more. and optimized for Web development and cloud application development. Software cross-platform support Win, MAC and Linux, running smoothly, it is Microsoft's conscience ...

I believe many programmers do not think that one day can be used in the case without virtual machine directly on the MAC, Linux use VisualStudio Bar. Of course, Microsoft says Visual Studio code is not the full version of Visual Studio, it's just a lightweight code editor, not a full-weight IDE (integrated development environment), its competitors will be Sublime Text, Atom, VIM, notepad++ and other products.

When you start reading this article, don't associate visual Studio code with. NET, Windows, because vs code is a cross-platform, open-box code editor that supports more than 30 languages. Whether you are. Net, Java, PHP, Python, TypeScript, objective-c ... Or a front-end developer, you deserve it. Let's take a look at the artifact of Visual Studio Code.

One, the download and installation of Visual Studio code

Visual Studio Code Latest version, https://www.visualstudio.com/, files less than 60M,

　　

After the download is complete, click the downloaded EXE file can be installed automatically, here need to note, when the installation is not specified the path of installation, some children's shoes after installation will not know how to open, My computer is Win7, the default path to install:

　　C:\Users\%USERNAME%\AppData\Local\Code\app-0.3.0\Code.exe

Ii. Introduction to Visual Studio code

After the installation, we see the following visual Studio code interface, of course, different system interface border slightly different, basic layout

Here are some simple settings, let's take care of the most important font size settings, the others are similar, click the menu:

We will see the following page, VS code will open two files:

On the left is the default settings, the right is the user settings, some other settings can be found in the default settings on the left, we want to modify what settings, copy to the right of the window to modify. For example, we want to modify the font size, the modification is good, note that this is a JSON file.

Introduction to Toolbars 1. Resource Manager

Let's take a look at the toolbar on the right, the explorer doesn't have to say it's easy, but here's a feature worth noting,

On the file, click the right mouse button, there is a copy path, you can copy the physical path of the file. Of course, you will wonder why it is not open file location Ah, in fact, this feature has already been, is reveal in Explorer. Remember, no more ignorance of the spit of the Groove ~

The other menu, you know the point, relatively simple, I will not nonsense.

2. Search

Let's say this search, why add a search toolbar to this place? If you are familiar with Visual Studio, you will find that pressing the shortcut key CTRL + F will show a search box,

Careful you may find that when you press CTRL + Shit + F, the search function of this toolbar is activated, and yes, it is similar to the global search function in Visual Studio.

See, here the search results, in 1.html and 2.html search out the "blog park" this keyword. See here, already heart ~ ~

Also have CTRL + G key, enter line number can jump to the specified line!

3. Git version control

This feature, used git everyone knows that git initialization must be in an empty folder inside, so to use this function, but also to have a folder, the following we see how to operate,

is not feeling very abuses, right-click folder can be opened directly, after opening, we continue to look,

Here, obviously, click on the Initialize GIT repository button to initialize the Git repository. Then, we create a new file, named Index.html, saved to this folder. Next, pay attention, notice, we want to enter the following content,

　　If you are also a line of knocking, it is too low, here first give you a method, in a blank document enter an exclamation mark! , note is in English Oh, then, click the TAB key to see what happened, is not the duang of the following out ~ ~

Then we press CTRL + S to save the file, and then look at the changes in the Git toolbar,

We saw that there was a index.html in the changes, and then we entered a commit message, clicked on the tick above, and then we saw changes the files below disappeared, and the 1 on the right became 0.

Click on the ... button, will pop-up menu, there are more git operations, I do not introduce each, I believe that the use of git are read!

4. Commissioning

　　This function is simple to say that debugging code, if you want to use the words to do some configuration, specific people look at the official document debugging, I will no longer elaborate, we are interested in their own to study it ~ ~

Iii. Visual Studio Code onboarding Experience

VS code supports multiple languages, let's take a look at the official note:

This is probably about CSS, HTML, JavaScript, JSON, less, sass several languages have smart hints, and other languages are syntax highlighting and refactoring. It means that you write C #, Java and some other code are not smart hints, but there will be syntax highlighting. The code to see, you can open some of the relevant code files to see, I do not show one by one.

1. File Type

Let's take a look at the VS Code writing code is handy, click the menu to create a new file or use the shortcut key CTRL + N, this time will create a new Untiled-1 file, the default is a text file, do not highlight and prompt any code, this time we can save the file to change the file type, or tell the VS code file type directly,

Click Plain Text, and then enter the language you want in the pop-up input box. Or we use the shortcut key, Ctrl + Shift + P, open the Command input box, enter language,

Select the first change Language Mode, or you can open the language selection box.

The first thing to say is the VS code support for HTML, of course, vs code for HTML support is very good, we have seen, enter an exclamation point, and then press the TAB key to complete the basic structure of the HTML5 document. In fact, this is the VS code inside added Emmet snippet expansion, official document address http://docs.emmet.io/cheat-sheet/, we'll probably look at:

See, the first one is what we use above, similarly if we enter the <a> tag, we just enter a, and then press the TAB key to do it. Here will not say more, left to everyone to explore the ~

In addition, VS code also support HTML5 and Angularjs Smart tips, can be said to be the front end artifact Ah ~ ~ Haha, at present I know only VS2015 support Angularjs smart tips.

2. File Encoding

File encoding of course is very important, sometimes we want to view and modify the file encoding, in the introduction of the VS Code, has told you where to display the file encoding, below we say how to modify the file encoding, or CTRL + Shift + P Open the command panel, enter encoding,

After selecting, the following options appear:

We can choose according to the need, here we choose to save the encoding format,

3, MarkDown

　　One of the more favorite is that vs code also supports Markdown's writing and previewing, let's take a look at:

　　If you want to preview it, you can preview it by saving the file first and then pressing CTRL + Shift + V on the shortcut key.

4, the file switch

When we write multiple documents, we often need to switch directly in multiple files, with the mouse click to switch is a very extravagant practice, we usually like to use shortcut keys. In VS code, we can use the CTRL + TAB key to quickly switch files,

Hold down the CTRL key and keep pressing the TAB key to toggle the selection file. Of course, this only applies to less files when there are more files, which is not useful.

When there are many files, we can use CTRL + P shortcut to open the same input box as above, but at this time we can enter the content to search for the file and then select Open.

　　

5. Support Open a folder

When we edit a file in a project, it is very cool to open a folder at the same time, many other text editors do not have this feature.

See here, now feel vs code how? Of course, this is only a small part of the VS code feature, there are more waiting for everyone to discover! Wait until the official version comes out, the estimate will be more good ~ ~

Iv. Summary

Because of the length of the relationship, about vs code first introduced here, the following is a simple summary of the VS code is a bit:

1, support more than 30 kinds of common language syntax highlighting, and HTML, JS, CSS, angular and other good grammar support, and also support Markdown preview!

2, small size, powerful, of course, performance is also very good, open super-large text files will not be stuck, you can and other text editor comparison.

3, Support command operation (Ctrl + Shift + P) and mouse operation, there are a lot of shortcut keys, can adapt to the various developers operating habits.

4, support git version controller, can be done to create branches, resolve conflicts, submit changes and other operations;

5, powerful search function, and support multi-file search;

6, the biggest is a little, of course, cross-platform, free;

Microsoft This recent time to continue to open the posture, more and more let us see Microsoft's feelings and future. Some people say that VSC's launch another reason to buy a Mac, but actually think, with. Net Open source, plus free VS Code paving, but can let a large number of development experts back to Microsoft's big environment, have to say that Microsoft this time a good chess ah.

Microsoft Conscience--visual Studio Code Open source free cross-platform coding editor