Getting started with vscode
Install
Vscode is a lightweight editor in Microsoft, taking the same UI interface as VS, with a suitable plugin to optimize the experience of front-end development.
HTML SNIPPETS: Enhanced Zen-Coding, adding H5 automatic completion, automatically enable automatically after installation (may conflict with other plugins).
Download: Click I to download
Installation: Double click to install, and select it as needed.
Configure
CTRL + SHIFT + P or F1 opens the command panel (you can also use the view - "command panel open);
Enter user set and press Enter to turn on the user configuration;
Use "editor.fontfamily": "Consolas, 'Courier New', Monospace" Select font style, default "consolas, 'channel": 14 control font size, default is 14; use "Editor.wrappingColumn": 0 Automatically wraps the text, default is 300; in detail in the default configuration on the left, the profile is a text document in the JSON format.
Plug-in
Ctrl + Shift + P or F1 opens the extended panel, press Enter to turn on the extended installation panel after entering install; or click the last button of the sidebar; or use the Ctrl + Shift + X command to open; or use the view - "Extension Open Extension panel.
Enter [String] @Sort: installs in the dialog box, can be sorted according to the download, select the desired plugin, click the installation.
@Sort: installs: Sort by downloads All plugins, ASC ascending arrangements, DESC descending order.
@Sort: rating: Hierarchical view, ASC ascending arrangement, DESC descending order.
String can be empty
Recommended plugin:
C / C ++: Add C / C ++ support, including but not limited to automatic completion
Python: Automatic indentation, complement, error, Debug, code format, etc.
Beautify: Format HTML, CSS, JS
Vscode-icons: a very fire icon theme
HTML SNIPPETS: Can be prompted without input
View in Browser: Open HTML file in your browser
CRANE - PHP IntelliSense: Automatic Plug-in PHP Code
JQuery Code Snippets: Plugin of JQuery Massive Patient
Debugger for chrome: debugging JavaScript
Git History: Show Git Log and Line History
Git's use
Need to install Git
No need to install the plugin, the third icon on the standby sidebar can make add, commit, push, and pull. (Or use Ctrl + Shift + G to open, or use - "Git opens git)
Topic replacement
Icon Topic: Ctrl + Shift + P Open Command Panel, enter the icon theme and return to the car, select one.
Color Topic: Ctrl + Shift + P Open Command Panel, enter the color theme and return to the car, select one.
Jump
Jump to the file: Ctrl + P.
Jump to symbol: Ctrl + Shift + O, you can jump to square brackets, braces, etc. in the file.
Jump to the line: Ctrl + g, you can jump to the specified line.
Debug
Use Ctrl + D to open the Debug panel.
Launch.json can be configured as needed
Common Functions
EMMET: Automatic HTML tab using Tab
MARKDOWN Preview: Preview MarkDown files with Ctrl + Shift + V
Use SHIFT + ALT + UP / DOWN to copy the content or the current line
Vscode Tutorial
2. Common plugins:
View in browser
- Preview page (CTRL + F1)
Vscode-icons
- The icon of the sidebar is required for a person with visual obsessive disorder.
HTML Snippets
- Support HTML5 tag prompt
HTML CSS Support
- CSS automatic complement
JS-CSS-HTML Formatter
Format
JQuery Code Snippets
JQuery automatic prompt
Path AutoComplete
- The path is automatically supplemented
NPM IntelliSense
- NPM package code prompt
Eslint
- Detection JS essential
Debugger for chrome
- Convenient debugging
AUTO RENAME TAG
- Automatic synchronization modification label
Bootstrap 3 Snippets
- Bootstrap essential
Vue 2 Snippets
- Vue essential
BACKGROUND
- a Mengmeng plugin, you can set up the background map of VSC yourself
3. Common shortcuts
(In the shortcut key, you refer to the Command key, ⇧ ⇧ Shift key, ^ refers to the control button, ⌥⌥ ⌥ t t / alt key.)
Here is the shortcut key on the experiment F1, and some I think I don't listed it.
Up (next) copy line Shift + Alt + TOP (Down)
Up (lower) mobile line * Alt + TOP (Down) *
Create a window Ctrl + Shift + N
Increased indentation: Ctrl + [
Row reduced indent * Ctrl +] **
Cutting the tail with spaces (removed the end of the ends of those who are useless): Ctrl + Shift + X
It is highly recommended to enable this, so that it will automatically delete the spaceless spaces, and these spaces are not allowed in many companies' code specification.
Show hidden side bars: Ctrl + B
Split editor (up to three): Ctrl + / Press Ctrl + 1 (2, 3) to switch in the subsequent editor
Method minus Ctrl + (-)
Turn off Editor Ctrl + W (F4)
Switch Editor Ctrl + Shift + Left (Right)
You can also use Ctrl + 1 (2, 3)
Show and hide sidebar Ctrl + B
Switch full screen F11
Switch automatic wrap ALT + Z
Display git ctrl + shift + g
Prerequisites Your project must be a git project
This is still very useful, sometimes our screen is not big enough, but the code does not automatically wrap, so the code that is covered will not see, but you can go in wrap in this shortcut. This is set to automatic wrap in the user settings.
Modify user settings
It is still important to set the default user to our own.
It is also very simple, file-preferences - user settings, and then come out to the default settings on the left, you can't change it, you need to overwrite on the right settings.json.
Modify shortcut
File - Preferences - Keyboard shortcuts, and modify user settings, find the shortcut key name you want to modify, you can overwrite the right side, some features that have not bind shortcuts can be seen on the left side, Then the name of the shortcut key is this. , Reading the full text, the technology area
MYBATIS Dynamic SQL Detailed
Design the HDB3 encoder in the data transmission system with VHDL language
How does the bare metal program drive hardware? What is the seniors say?
Typical examples of object-oriented programming SOC principles
Introduction to Java Common Development Tools for Embedded Development
Our other product:
