Vscode Using Tutorials (web development)

1. Installation

Go to the official website to download https://code.visualstudio.com/

The next step is good, the middle can choose to install the software in which directory.

2. Common plug-in installation

A. Go to the Extended view interface to install/uninstall

A1. Shortcut key: ctrl+shift+x;

A2. View--extensions;

A3. Click the Extended icon button on the left border of the dot. (The bottom square icon)

Enter the extension you need in the search box at the top, and then click "Install" in the option after the extension, just click " Uninstall" to uninstall the extension .

After the extension download is installed, you need to click "Enable" to take effect, some extensions need to restart the editor to take effect.

B. How do I choose an extension (plugin)?

In fact, it is not difficult, the name of the extension is generally exposed to its function, basically as follows:

1. With snippets is generally code hint class extension;

2. With the viewer is generally the Code run preview class extension;

3. Support is generally supported by code language;

4. With document is generally referred to the extension of the documentation class;

5. With Formatt generally is the code format to organize the extension;

Of course, some snippets also bring their own support function, not the above keyword as the only standard.

3. Plugins that need to be installed

3.1 HTML Snippets

Provides code hinting functionality for HTML documents, including HTML5.

3.2 HTML CSS Support

CSS Auto-Completing

3.3 VS Color Picker

For CSS documents and HTML documents to provide color selection, when the "#" will appear after the Color Picker floating window, click the corresponding color will be inserted in the document, the default is 16 binary notation. If you want to use colors in other formats,

Extensions such as RGB are recommended:Color picker (color picker disadvantage is the need to configure, install Nodejs, and add node to the Global environment variable.) And you need to use the command to call up the color pad when inserting, a bit troublesome)

3.4 Live HTML Previewer

Providing a preview function for an HTML document, which needs to be paged out with a command or shortcut key, adds a new column to the editor to run the HTML file.

A. Press F1 to enter in the Command box:Show side preview adds a column of HTML that can be written to see the effect, real-time preview.

B. You can right-click in the HTML document: The Open inbrowser is opened in the system's default browser, which does not provide a live preview and does not automatically refresh the browser when saved.

3.5 View in Browser
-Preview page (CTRL+F1)

3.6 Vscode-icons

icon in the sidebar

3.7 js-css-html Formatter

Formatting

3.8 JQuery Code Snippets

jquery Automatic Hints

3.9 Path Autocomplete

-Path Auto-completion

3.10 Npm Intellisense
-NPM Package Code hints

3.11 ESLint
-Detect JS Prerequisites

3.12 Debugger for Chrome
-Easy Commissioning
3.13 Auto Rename Tag
-Automatically synchronize changes to tags

3.14 Bootstrap 3 Snippets
-Bootstrap Essentials

3.15 Vue Vscode Snippets

-Vue Essentials

3.16 background
-An Moe plugin that allows you to set your own VSC's background image

3.17 Easyless (not install this yet)

Provides hints for less documents, error warnings, and compiles less documents into CSS files. You can customize the settings. Examples of configurations given by the developer:

"Less.compile": {

"Compress": true,

"Sourcemap": true,

"Out": false

}

can be pasted into the user settings of the "default settings" can also be pasted into the user settings Settings.json . The following students who understand JSON are automatically ignored: if the Settings.json is empty, it should be written as:

{

"Less.compile": {

"Compress": true,

"Sourcemap": true,

"Out": false

}

}

If you have previously written JSON code, you should precede the name/value pair block with ","(Novice easy to add or less "," symbol, personally think so)

Tip: * * *

In writing, it is best not to comment in the code. "Sourcemap": true, this place is best set to False, because when you actually use the browser can not find Sourcemap may error or the browser has been to find, Have not met (I met jquery.js because of this error), the introduction of the students or set to false better.

4. Common shortcut keys

Files – Preferences – keyboard shortcuts: You can see all the shortcut keys;

Modify shortcut keys
File – Preferences – keyboard shortcuts, find the name of the shortcut you want to change, the right overlay on it, very convenient! You can also advanced customizations, options in Files – Preferences – keyboard shortcuts are on top of the top after they are opened, and sublime customize shortcuts in the same way.

Will save, and open the browser shortcut keys to change the way they are accustomed to, such as;

Note: Ctrl +/

Up (down) Copy line SHIFT + ALT + Top (down)

Move line up (bottom) * ALT + top (down) *

Create a new window CTRL + SHIFT + N

Line Increment indent: Ctrl + [

Line Decrease Indent * Ctrl +]**

Crop trailing spaces (remove unused spaces at the end of a line): Ctrl + X CTRL +K

It is strongly recommended that this be enabled so that the saved time will automatically delete the unused space, in many companies in the code specification is not allowed to exist in these spaces.

Show hidden Sidebar: Ctrl + B

Split editor (up to three pieces): Ctrl +/Press CTRL + 1 (2,3) to toggle in the split editor

method to zoom Out CTRL + (-)

Close Editor Ctrl + W (F4)

Toggle Editor Ctrl + SHIFT + Left (right)

You can also use ctrl+1 (2,3)

Toggle Fullscreen F11

Toggle Line Wrapping ALT + Z

Show Git Ctrl + SHIFT + G

The premise is that your project must be a git project

First use, after the need to supplement;

Vscode Using Tutorials (web development)