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
How to find it is actually very 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 from the main page with F5
Note the following page, where if used within 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 Debug
F5 Start Debugging
image.png
The specific debugging page is shown in the figure
image.png
2. Using It#
2.1#
Vscode is a lightweight compiler, so by default, it opens the corresponding project through the open folder feature. It also lists the recently opened projects below, making it convenient for users to open and edit 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, I just copied them, being a bit lazy.
A brief explanation:
⌘ Command key
⌥ Option/Alt
⇧ Shift key
^ Represents the Control key
Open a project
2.2 Query Unknown Shortcuts#
First, type ⇧ ⌘ P, then the interface as shown will appear, where you can input the corresponding keyword "debug" to quickly search for the shortcuts you need to use.
image.png
2.3 ⇧ ⌘ F Search for Keywords in the Entire Project#
The effect after using it is shown in the figure below. It is actually equivalent to directly clicking the magnifying glass on the left.
image.png
2.4 ⌘ P Quickly View Files You Need and Jump to Them#
image.png
2.5 ^ ` Open and Close Terminal#
Quickly bring up the terminal, which is especially convenient for those of us who need to use the terminal for code, such as Python, Vue CLI, RN, and Flutter.
2.6 Outline Functionality#
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 structure of the file clear and obvious.
image.png
2.6.1 HTML Tree#
image.png
2.6.2 LESS Hierarchy#
image.png
2.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
2.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
2.8 IntelliSense Feature#
Provides code completion for variable types, function definitions, and imported modules based on the context of the documentation.
image.png
2.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
2.10 More Common Features#
image.png
2.11 The Meaning of Back 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 repeatedly press back, you can cross files, which is also a great feature.
image.png
2.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
2.13 File Formatting Shortcut#
⌥ ⇧ F
image.png
2.14 Fixed Window Mode in VSCode#
Those who are used to WebStorm can clearly feel that opening a .js file in WebStorm looks like the one below:
WebStorm Display.png
When normally opening a window, clicking usually replaces the previous window.
image.png
To achieve the same effect as WebStorm, you can simply double-click on the title part as indicated by the arrow above.
image.png
Note that the title font will change to regular.
3. Create an HTML File and Use Chrome for Debugging#
3.1 First Install, as shown in the figure. The method is already very specific, so I won't elaborate further.#
image.png
3.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
3.3. Solve 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"
}
]
}
3.4 Then select the corresponding scheme on the debug page#
image.png
, at the top
image
, select the dropdown button, and choose Chrome.
4. Appendix#
4.1 F Function Keys on MAC#
Since I am developing on a MACPro, 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 "Use F1, F2, etc. keys as standard function keys"
4.2 Implementing TODO Indication Function#
First, install the corresponding plugin.
image.png
Then restart Vscode, and you will see the TODO tree structure as shown.
image.png
5. Reference Links and Books#
Visual Studio Code Chinese Documentation (Part 1) - Quick Start
VS Code - Debugger for Chrome Debugging JS