1. About Vscode#
1.1 What is VsCode#
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).
Common supported extensions include the following:
image.png
1.2 Learning Resources for VSCode#
VSCode help documentation link
Finding it is actually quite simple, just need to.
image.png
2. How to Use#
2.1 Debugging Code and Installing Extensions#
How to Start Debugging Code, taking Python as an example#
Step 1: First search for Python in the marketplace
image.png
Step 2: Then you can directly start debugging on the main page with F5
Note the following page, where if used internally in the IDE, use the corresponding window blocks as shown
image.png
File and Debug Block Indicators
image.png
3. Familiarize Yourself with Common Shortcuts#
3.1 Common Debugging Shortcuts#
F9 Toggle Debug Breakpoint
F11 Step Debugging
F5 Start Debugging
image.png
The specific debugging page is shown in the figure
image.png
4. Using It#
4.1#
Vscode is a lightweight compiler, so by default, it opens the corresponding project through the folder opening feature. It also lists the recently opened projects below, making it convenient for users to open and edit the recently accessed projects.
image.png
Here, a project is opened by default, and the following prompt can be seen.
How to input special characters like ⌘, ⌥, ⇧, ⌃ on a Mac computer? I just copied it, being a bit lazy.
A brief introduction:
⌘ Command key
⌥ Option/Alt
⇧ Shift key
^ Represents the Control key
Open a project
4.2 Query Unknown Shortcuts#
First type ⇧ ⌘ P, then the interface shown in the figure will appear, where we can input the corresponding keyword "debug" to quickly search for the shortcuts you need to use.
image.png
4.3 ⇧ ⌘ F Search for Keywords in the Entire Project#
The effect after use is shown in the figure below. It is actually equivalent to directly clicking the magnifying glass on the left.
image.png
4.4 ⌘ P Quickly View Files You Need and Jump to Them#
image.png
4.5 ^ ` Open and Close Terminal#
Quickly bring up the terminal, which is particularly convenient for those of us who need to use the terminal for code, such as Python, Vue-cli, RN, Flutter.
4.6 Outline Function#
Regarding the default support for git, if there are changes in the current project, the modifications are clearly visible.
image.png
Open one of the Vue files, where the outline function is a very nice feature, making the file structure clear and obvious.
image.png
4.6.1 HTML Tree#
image.png
4.6.2 Less Hierarchy#
image.png
4.6.3 JS Section#
The only small regret is that functions are not categorized according to compute and methods, but this order is quite okay (this point is not as good as WebStorm).
image.png
4.7 Fast and Powerful Coding Features#
Able to quickly capture issues in the code and highlight them. Supports multi-cursor editing, parameter hints, and other quick coding features.
image
4.8 IntelliSense Feature#
Provides code completion for variable types, function definitions, and imported modules based on the context of the documentation.
image.png
4.9 Code Navigation and Refactoring#
Using peek and navigate to definition features allows you to browse your source code, making code refactoring easy.
image.png
4.10 More Common Features#
image.png
4.11 The Meaning of Backward and Forward#
In a document, we can first edit at point A, as shown in the figure, adding a tag.
image.png
Then we start setting the CSS styles for that div at point B.
image.png
At this point, we can return to area A using ^ -
Using ^ ⇧ - in area A will return to area B
If you press back multiple times, it can cross files, which is also a great feature.
image.png
4.12 Convenient Zooming In and Out of the Entire Interface Font#
By using ⌘ + and ⌘ +, you can easily adjust the font size of all text on the entire page.
image.png
image.png
4.13 File Formatting Shortcut#
⌥ ⇧ F
image.png
4.14 Using VSCode's Fixed Window Mode#
Those who are used to WebStorm can clearly feel that opening a .js file in WebStorm looks like the figure below:
WebStorm Display.png
When normally opening a window, clicking will usually replace the previous window.
image.png
To achieve the same effect as WebStorm, you can simply double-click the title part as indicated by the arrow above.
image.png
Note that the title font will change to regular.
5. Create an HTML File and Debug It Directly Using Chrome#
5.1 First Install, as shown in the figure. The method is already very specific, so I won't elaborate further.#
image.png
5.2 Click F5 in your HTML project directory, or select the debug button on the left#
image
image.png
However, the directly opened Chrome will show the following error
image.png
5.3 Solving the Above Problem#
First, add the following content in the popped-up launch.json
{
// Use IntelliSense to learn about related properties.
// Hover to view descriptions of existing properties.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome and Open localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch index.html (disable sourcemaps)",
"type": "chrome",
"request": "launch",
"sourceMaps": false,
"file": "${workspaceRoot}/index.html"
}
]
}
5.4 Then select the corresponding scheme in the debug page#
image.png
, at the top
image
, select the dropdown button, and choose Chrome.
6. Appendix#
6.1 F Function Keys on MAC#
Due to using MACPro for development, the default F1 to F12 will be replaced by system adjustment buttons. How to set F1 to F12 to their default functions.
Switching between standard functions and special functions on Mac's F keys
Settings --> Keyboard --> Check F1, F2
6.2 Implementing TODO Indicator Function#
First, install the corresponding plugin.
image.png
Then restart Vscode, and you will see the TODO tree structure as shown.
image.png
7. Reference Links and Books#
Visual Studio Code Chinese Documentation (Part 1) - Quick Start
VS Code - Debugger for Chrome Debugging JS