Basic use of vscode

Time:2019-11-7

Visual studio code (hereinafter referred to as vscode) is a lightweight and powerful code editor that supports windows, OS X and Linux. Built in JavaScript, typescript and node.js support, and has a rich plug-in ecosystem. You can install plug-ins to support c + +, C ා, python, PHP and other languages.

Software name:
Visual studio code 64 bit v1.33.1 official latest installation
Software size:
42.0MB
Updated:
2019-04-12

When making luaide plug-ins, I found that many students who first contacted vscode would ask some basic questions. In order to waste unnecessary time, write down this brief introduction:

Here is the author’s plug-in — > luaide

Luaide is used for editing in Lua language. First, it is a code editor, then a debugger. The author pays more attention to the prompt effect of code editing at this stage

install

Download address according to your own system

Navigation area resource management area search git debugging extension (plug in center) – > any plug-in you need can find and open the workspace here

There is no so-called project for vscode. A directory is a project (personal understanding)


 

openProject.gif

To configure

Please note that the settings in vscode are implemented through configuration files. There is no setting panel. Configuration files are divided into

System default configuration global configuration (modifiable for global) workspace configuration (modifiable for workspace) – > after setting workspace configuration, vscode will create. Vscode directory in workspace directory and create setting.json setting.json file, which is only useful for workspace
The following figure shows how to open vscode configuration
 


 

Open settings.gif

 

Vscode has a lot of settings that you can view one by one. Each setting is not described here. Plug in installation directly searches and installs through extension
 


 

Plug in search install.gif

 

If the. Vsix plug-in file cannot be downloaded through the network but can be obtained, it can also be installed locally
 


 

Install plug-in.gif locally

 

debugging

The debugging of vscode is also realized through configuration. Different plug-in debugging configurations are also different. For example, the debugging configuration of luaide is customized by the author, so this should be noted
You can set multiple debugging configurations. The following figure shows the debugging configuration of luaide

Getting started with vscode

install

  • Download: click me to download
  • Installation: double click to install, and select as required.

To configure

  • CTRL + Shift + P or F1 to open the command panel (you can also use view – > command panel to open);
  • Enter user set and press enter to open user configuration;
  • Use “editor. Fontfamily”: “Consolas, ‘Courier New’, monospace” to select font style, and the default is “Consolas, ‘Courier New’, monospace”; use “editor. Fontsize”: 14 to control font size, and the default is 14; use “editor. Wrappingcolumn”: 0 to make text wrap automatically, and the default is 300; there will be detailed Chinese description in the default configuration on the left, and the configuration file is JSON format Text document for.

Plug-in unit

  • CTRL + Shift + P or F1 to open the extension panel, enter install and press enter to open the extension installation panel, or click the last button in the sidebar, or use the command Ctrl + Shift + X to open it, or use view – > extension to open the extension panel.
  • In the dialog box, enter [string] @ sort: installsto sort and view according to the download quantity. Select the required plug-ins and click Install.
    • @Sort: installs: sort and view all plug-ins according to the download quantity, ASC in ascending order and desc in descending order.
    • @Sort: Rating: hierarchical view, ASC ascending, desc descending.
    • String can be empty
  • Recommended plug-ins:
    • C / C + +: add C / C + + support, including but not limited to auto completion
    • Python: automatic indentation, completion, error checking, debugging, code formatting, etc
    • Beauty: format HTML, CSS, JS
    • Vscode icons: a popular icon theme
    • HTML snippets: prompt without entering
    • View in browser: open HTML file in browser
    • Crane – PHP IntelliSense: an auto completion plug-in for PHP code
    • JQuery code snippets: a plug-in for jQuery severe patients
    • Debugger for chrome: debugging JavaScript
    • Git history: display git log and line history

Use of GIT

  • Need git installed locally
  • Without installing plug-ins, the third icon in the stand-alone sidebar can add, commit, push and pull. (or use Ctrl + Shift + G to open, or view – > git to open GIT)

Topic change

  • Icon theme: Ctrl + Shift + P to open the command panel, enter icon theme and press enter. Select one.
  • Color theme: Ctrl + Shift + P to open the command panel, enter color theme and press enter. Select one.

Jump

  • Jump to file: Ctrl + P.
  • Jump to symbol: Ctrl + Shift + O, you can jump to square brackets, braces and so on in the file.
  • Jump to row: Ctrl + G, you can jump to the specified row.

Debug

  • Use Ctrl + D to open the debug panel.
  • Launch.json can be configured as required

Common functions

  • Emmet: use tab to automatically complete HTML tags
  • Markdown Preview: preview the markdown file using Ctrl + Shift + V
  • Use shift + Alt + up / down to copy the selected content or current line up / down