Visual Studio Code

Article from: http://i5ting.github.io/vsc/

1. Visual Studio Code

Visual Studio Code (VSC) was recently updated to version 0.8.0, some of the new features are nice. A few color schemes (the popular Monokai color is also available, although the effect is not good), but also support the custom installation directory. The most let me moved is to JSX file to do a syntax highlighting, write react time is not a piece of black.

Today came the interest, recommend, hope to have more students to use this editor. 1.1. Introduction

The language of VSC's propaganda is:

A cross-platform source editor that runs on Mac OS X, Windows, and Linux for writing modern Web and cloud applications.

As it says, VSC is particularly well-suited as a front-end development editor.

Built-in HTML development artifact Emmet (zencoding), the CSS and its related compiler language less and sass are very good support.

Of course, the best is to write the JS code, which is what I want to focus on the next feature. 1.2. Features free but not open source build (build) and debug (Debug) modern web and cloud applications (especially JavaScript, TypeScript, C #, ASP. V5 and Nodejs) cross-platform support for Linux, Ma C OSX, and Windows support syntax auto-complete, smart tips built-in HTML development artifact Emmet speed very fast support multi-theme (color scheme) 1.3. Installation

Download the installation file of the corresponding platform from https://code.visualstudio.com/and install it.

If it's a Mac system, add a simple command line

[sudo] npm install-g coden

Current directory opens the VSC editor

$ VSC

1.4. Functional Area Description

Ribbon 1:4 Main Menu Explore Search Git Debug

Function Area 2: Level two menu

Click on each main menu will show the corresponding level two menu, such as explore is open Directory, detailed in the following explanation

Ribbon 3: Edit Area

Our most commonly used coding area

Ribbon 4: Information display area

Current git information, format, character encoding, etc.

master+ 0↓1↑

Master represents the current Git branch is the master branch 0↓ represents the remote repo no local code information 1↑ represents a local 1 commits need to push to the server

Click here to pop up

git checkout input git branch name

Switching branches, very intimate

Grammar check, where error, where there is a warning click here to see, but not exactly, calculate for reference only

Ln = line number of rows Col = Column UTF-8 is the character encoding LF is a newline, click to toggle. Option Description 1) LF is the abbreviation of line feed, Chinese meaning is newline 2) CRLF is the abbreviation of carriagereturnlinefeed. It means the carriage return to a newline. Markdown represents the language currently identified by the suffix for syntax highlighting ☺ is feedback 1.5. Main Menu Description 1.5.1. Explore

This menu is mainly for the management of folders and files

Here are 2 concepts working FILES DIR

Dir is very well understood, which is the folder you are currently opening

Working files is all open files, if you click on the top right corner of the split-screen button, you can put the file in the corresponding editing area.

Open folder in menu, shortcut key command + o 1.5.2. Search

1.5.3. Git

Here are some git learning materials (if familiar, auto-skipping) to move into Github git-guide git starter gif demo 1.5.4. Debug

The use of the method is also very simple, the following steps: Open the file you want to debug, press F5, the editor will generate a Launch.json modify Launch.json related content, mainly the name and program fields, change to your project corresponding to the left of the click Editor to look like a spider button Click on the button in the upper left-hand corner of debug to start the debugging break point, and debug (as long as you will chrome debugging, the same)

1.6. Example

Demonstrate the specific use of VSC by creating an express project Build, Debug 1.6.1. Create an express project

➜examples git: (master) ✗express HelloWorld Create:helloworld create:helloworld/ Package.json create:helloworld/app.js create:helloworld/public create:helloworld/public/javascripts Crea Te:helloworld/public/images create:helloworld/public/stylesheets Create:helloworld/public/stylesheets/style.cs S create:helloworld/routes create:helloworld/routes/index.js create:helloworld/routes/users.js Create: Helloworld/views Create:helloworld/views/index.jade Create:helloworld/views/layout.jade create:helloworld/v Iews/error.jade Create:helloworld/bin Create:helloworld/bin