Microsoft heartbleed-Visual Studio code open-source free cross-platform code editor

Microsoft heartbleed-Visual Studio code open-source free cross-platform code editor

In addition to the Microsoft edge browser and the new windows 10 preview version, Microsoft announced the release of the free cross-platform Visual Studio code editor at the build 2015 Conference!

Visual Studio code (vs code/VSC for short) is a free and open-source modern lightweight code editor, supports syntax highlighting, Intelligent Code Completion, custom hotkeys, parentheses matching, code snippets, code comparison diff, git, and other features, and optimizes webpage development and cloud application development. The software supports windows, Mac, and Linux on a cross-platform basis and runs smoothly ......

I believe that many programmers have never thought of using Visual Studio on Mac or Linux without using virtual machines one day. Of course, Microsoft claims that Visual Studio code is not the full version of Visual Studio. It is just a lightweight code editor, rather than a heavyweight complete IDE (integrated development environment ), its competitors will be sublime text, Atom, Vim, notepad ++ and other products.

When reading this article, do not associate Visual Studio code with. Net or Windows because vs code is a cross-platform, out-of-the-box code editor that supports over 30 languages. Whether you are. net, Java, PHP, Python, typescript, objective-c... or a front-end developer, you deserve it. Next, let's take a look at the Visual Studio code artifact ~

1. Download and install Visual Studio code

The latest version of Visual Studio code, https://www.visualstudio.com/, the file does not reach 60 m,

　　

After the download is complete, click the downloaded EXE file to automatically install it. Note that the installation path is not specified during installation, and some shoes do not know how to enable it after installation, my computer is win7, and the default installation path is:

　　C: \ Users \ % username % \ appdata \ Local \ code \ app-0.3.0 \ code.exe

II. Introduction to Visual Studio code

After the installation is complete, we can see the Visual Studio code interface as follows. Of course, different system interface borders are slightly different, and the basic layout

Next, let's make some simple settings. Let's take the font size settings that everyone cares about most. Others are similar. Click the menu:

We will see the following page. vs code will open two files:

The default settings are on the left and the user settings on the right. Other settings can be found in the default settings on the left. What settings should we modify, copy it to the right window and modify it. For example, we need to modify the font size. Note that this is a JSON file.

Toolbar Introduction 1. Resource Manager

Next, let's take a look at the toolbar on the right. Resource Manager doesn't have to say much about it. It's just worth noting that there is a feature here,

Right-click the file and choose Copy path to copy the physical path of the file. Of course, you may wonder why it is not the location where the file is opened. In fact, this function is already available, that is, reveal in explorer. Remember, don't be ignorant ~

The other menus are simple and I will not talk nonsense.

2. Search

Next we will talk about this search. Why should we add a search toolbar here? If you are familiar with Visual Studio, you will find a search box appears when pressing CTRL + F,

When you press Ctrl + shit + F, you may find that the search function of this toolbar is activated. Yes, this function is similar to the global search function in Visual Studio,

After reading the result, the keyword "blog Garden" is found in 1.html and 2.html. You can see it here ~~

You can also press Ctrl + G to enter the row number to jump to the specified row!

3. Git Version Control

It is clear that git initialization must be in an empty folder. To use this function, you must first have a folder, next let's take a look at how to operate,

Is it really a disadvantage? Right-click the folder and you can open it directly. After opening it, let's continue to look at it,

Obviously, click the initialize git repository button to initialize the GIT repository. Then, we create a new file named "index.html" and save it to this folder. Next, pay attention to the following content,

　　It would be too low for you to repeat a row. Here we will give you a method and enter an exclamation point in the blank document !, Note that it is in English. Then, click the tab key to see what happened. Is it duang ~~

Then, press Ctrl + S to save the file, and then let's take a look at the changes in the GIT toolbar,

We can see that index.html is displayed in changes. then, we enter the commit message and clickCheckSubmit. Then, we will see that all the files under changes have disappeared, and 1 on the right has changed to 0.

Click the... button, and a menu will pop up. More git operations are available here. I will not introduce them one by one. I believe you can understand git operations!

4. debugging

　　This function is simple to call for code debugging. If you want to use it, you need to perform some configuration. For details, refer to the official document debugging, if you are interested, study it by yourself ~~

3. Visual Studio code getting started

Vs Code supports multiple languages. Let's take a look at the official instructions:

Here we will talk about smart prompts for CSS, HTML, JavaScript, JSON, less, and sass. Other languages use syntax highlighting and refactoring. That is to say, you do not have smart prompts when writing C #, Java, and other code, but there will be syntax highlighting. You can open some related code files to view these code. I will not demonstrate them one by one.

1. File Type

Next let's take a look at vs code to write code is good, click the menu to create a file or use the shortcut key Ctrl + N, this will create a new Untiled-1 file, the default is a text file, without highlighting or prompting any code, we can change the file type by saving the file, or directly tell vs code the file type,

Click plain text and enter the language you want in the displayed input box. Alternatively, use the shortcut key Ctrl + Shift + P to open the command input box and enter language,

Select the first change language mode. You can also open the language selection box.

The first thing we should talk about here is vs code's support for HTML. Of course vs code's support for HTML is very good. As we have seen above, enter an exclamation point, press the tab key to complete the basic structure of the HTML5 document. In fact, this is the added Emmet snippet expansion in vs code. The official document address is http://docs.emmet.io/cheat-sheet/. we will outline it below:

As you can see, the first one is what we use above. Similarly, if we enter the <A> label, we only need to enter a and press the tab key. I will not talk about it here, so I will leave it for you to explore it ~

In addition, vs Code also supports smart prompts of HTML5 and angularjs. It can be said that it is a front-end artifact ~~ Haha, now I know only the Smart Tips that vs2015 supports angularjs.

2. file encoding

File encoding is of course very important. Sometimes we need to view and modify the file encoding. When introducing vs code, we have already told you where to display the file encoding, next let's talk about how to modify the file encoding, or press Ctrl + Shift + P to open the Command Panel, enter encoding,

After selection, the following options will appear:

You can select the encoding format as needed,

3. markdown

　　Another interesting thing is that vs Code also supports markdown writing and previewing. Let's take a look at the following:

　　To preview the file, save the file and press Ctrl + Shift + V to preview the file.

4. File Switching

When writing multiple documents, we often need to switch between multiple files directly. It is a luxury to switch between files by clicking the mouse. We usually like to use shortcuts. In vs code, we can use Ctrl + TAB to quickly switch files,

Press and hold the ctrl key, and press the tab key to switch between the selected files. Of course, this only applies to a small number of files, more files, so it is not easy to use.

When there are many files, we can use the 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 choose to open.

　　

5. You can open a folder.

When editing files in a project, opening a folder at the same time is a great feature. Many other text editors do not have this feature.

Now, how does the vs Code look like? Of course, this is only a small part of vs code, and more are waiting for you to find out! It will be better when the official version is released ~~

Iv. Summary

Due to the length of the article, we will first introduce vs code here. Below is a brief summary of vs code:

1. Supports syntax highlighting in more than 30 common languages, good syntax support for HTML, JS, CSS, and angular, and preview markdown!

2. Small Size and powerful functions. Of course, the performance is also very good. Opening super large text files won't be stuck. You can compare it with some other text editors.

3. Supports command operations (CTRL + Shift + p) and mouse operations, as well as a large number of shortcut keys to adapt to the operation habits of various developers.

4. The GIT version controller is supported to complete branch creation, conflict resolution, and modification submission;

5. Powerful search functions and support multi-file search;

6. The biggest one is, of course, cross-platform and free;

 

Microsoft has been opening up in the recent period, making us more and more aware of Microsoft's feelings and future. Some people say that the launch of VSC has an additional reason to buy a Mac, but in fact I want to keep up with it. net open source, coupled with free vs code paving the way, rather it can bring a large number of developers back to Microsoft's big environment. I have to say that Microsoft has played a good role this time.

Microsoft heartbleed-Visual Studio code open-source free cross-platform code editor