vscode/Vidual Studio Code official website
VS Code shortcut keys
Commonly used shortcut keys
- Turn on the command selector: Ctrl + Shift + PorF1
- Search files: Ctrl + P
- Search global content: Ctrl + Shift + F
- Switch terminal: Ctrl + `(backtick on keyboard)
- File storage: Ctrl + S
Edit related shortcut keys
- Copy the line: Alt + Shift + ↓or↑
- Delete row: Ctrl + Shift + K
- Move row: Alt + ↑or↓
- Formatting code: Shift + Alt + F
- Quick line wrapping/expanding: Ctrl + EnterorShift + Enter
Multiple cursors and selection
- Added multiple cursors: Alt+ click
- Select the same words: Ctrl + D
- Select all identical words: Ctrl + Shift + L
- Region selection: Shift + Alt+ drag
File and window management
- Create new file: Ctrl + N
- Open the file: Ctrl + O
- Switch split windows: Ctrl + 1, 2, 3...
- Close the file: Ctrl + W
Debugging and Execution
- Start debugging: F5
- Stop debugging: Shift + F5
- Step by step execution: F10
- Enter inside the function: F11
- Jump out of function: Shift + F11
Search and replace
- search: Ctrl + F
- Search and replace: Ctrl + H
- Search for next match: F3
- Search for the previous match: Shift + F3
Custom shortcut keys
You can useFile > Preferences > Keyboard Shortcuts(or pressCtrl + K + Ctrl + S) to customize the shortcut key settings.
Shortcut key to switch from editor to file manager
Use built-in shortcut keys
- Windows / Linux:
Ctrl + Shift + E
- Mac:
Cmd + Shift + E
After pressing this shortcut key, the focus will switch from the editor to the Explorer window.
Custom shortcut keys
- according to
Ctrl + K Ctrl + S(Windows/Linux) orCmd + K Cmd + S(Mac) Turn on shortcut key settings.
- search「focus on explorer」,turn up
workbench.view.explorer。
- Click on the item and set the shortcut key you want, for example
Ctrl + Alt + E。
Manually set `keybindings.json`
If you want to manually modify the JSON settings, you cankeybindings.jsonAdd the following:
[
{
"key": "ctrl+alt+e",
"command": "workbench.view.explorer"
}
]
Test shortcut keys
- Make sure a code file is open and within the editor.
- press
Ctrl + Shift + EOr your customized shortcut keys.
- The focus should switch to File Explorer on the left.
Open settings.json of VS Code
Method 1: Through the command panel
- press
Ctrl + Shift + P(Mac:Cmd + Shift + P)。
- enter
Preferences: Open Settings (JSON)and choose.
- VS Code will open
settings.json, you can edit personal settings directly.
Method 2: Enter from the graphical interface
- Click the gear icon (⚙️) in the lower left corner.
- Select Settings.
- Click the "{} Open Settings (JSON)" icon in the upper right corner to enter
settings.jsonEdit page.
Method 3: Directly open the file location
Windows / Linux:
%APPDATA%\Code\User\settings.json
macOS:
~/Library/Application Support/Code/User/settings.json
You can also use VS CodeFile → Open FileOpen the file at this path directly.
VS Code Terminal
Opening method
- shortcut key:
Ctrl + `
- Menu:
View → Terminal
Terminal type
- PowerShell (Windows default)
- Command Prompt(cmd.exe)
- Git Bash
- WSL
Set default terminal
{
"terminal.integrated.defaultProfile.windows": "PowerShell",
"terminal.integrated.profiles.windows": {
"PowerShell": {
"path": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
},
"Command Prompt": {
"path": "C:\\Windows\\System32\\cmd.exe"
},
"Git Bash": {
"path": "C:\\Program Files\\Git\\bin\\bash.exe"
}
}
}
Switch terminal
- Select Shell from the drop-down menu in the upper right corner of the terminal.
- Command panel input
Terminal: Select Default Profile
Multi-terminal operation
- Add new terminal:
Ctrl + Shift + `
- Split the terminal: Split button on the terminal panel
- Close the terminal:
exitor trash can icon
Debug and Terminal relationship
- Run/Debug using integrated terminal or internal console
- Available at
launch.jsonSpecifyintegratedTerminal
FAQ
- The command cannot be executed: confirm the terminal type and PATH settings
- Font alignment issues: Use monospaced fonts and turn off font ligatures
Configure integrated terminal using cmd or PowerShell
Modify settings.json
Open in VS Codesettings.json, add the following settings:
"terminal.integrated.defaultProfile.windows": "Command Prompt",
"terminal.integrated.profiles": {
"Command Prompt": {
"path": "C:\\Windows\\System32\\cmd.exe"
},
"PowerShell": {
"path": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
}
}
Effect
- After opening a new integrated terminal, it will be used by default
cmd.exe。
- You can still manually switch to PowerShell or other shells from the drop-down menu.
Notice
If you have Git Bash, WSL, or another shell installed, you can alsoprofilesAdd them together in the section to facilitate switching.
Case: Use cmd when setting up debugging in VS Code, but the default terminal is still PowerShell
practice
The terminal used for "Execution and Debugging" of VS Code can be used throughlaunch.jsoninconsoleandinternalConsoleOptionsto control.
Example settings
Keep PowerShell as the default integrated terminal
"terminal.integrated.defaultProfile.windows": "PowerShell",
"terminal.integrated.profiles": {
"PowerShell": {
"path": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
},
"Command Prompt": {
"path": "C:\\Windows\\System32\\cmd.exe"
}
}
Specify Debug in launch.json using cmd
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Python program (using cmd)",
"type": "python",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"windows": {
"command": "cmd.exe"
}
}
]
}
Effect
- Normally open a new terminal → the default is still PowerShell.
- Start Debug → automatically in
cmd.exeexecuted here.
Syntax formatting in VS Code
1. Use shortcut keys for formatting
Visual Studio Code provides shortcut keys to quickly format code:
- **Format entire file**: Press `Shift + Alt + F` (Windows) or `Shift + Option + F` (Mac).
- **Format selected area**: Press the above shortcut key after selecting the code.2. Enable automatic formatting when saving files
Visual Studio Code supports automatic code formatting:
1. Open **File > Preferences > Settings**.
2. Search for **format on save**.
3. Check **Editor: Format On Save** and the file will be automatically formatted when saving.3. Install format extension tools
1. Open the **Extension Market**, search and install the appropriate formatting tool, for example:
- **Prettier - Code formatter**: for JavaScript, TypeScript, HTML, CSS, and more.
- **Black**: for Python.
2. After installation, VS Code will automatically use extension tools for formatting.4. Set the default formatting tool
If multiple formatting extension tools are installed, you can set the default formatting tool:
1. Open **File > Preferences > Settings**.
2. Search for **default formatter**.
3. Select the tool you want to use in **Editor: Default Formatter**.5. Custom formatting rules
Some formatting tools support custom rules. Here is Prettier as an example:
1. Create a `.prettierrc` file in the project directory.
2. Add custom rules, for example:
{
"tabWidth": 4,
"useTabs": false,
"singleQuote": true,
"trailingComma": "es5"
}
6. Use the .editorconfig file
`.editorconfig` is used to unify the team’s coding style:
1. Create an `.editorconfig` file in the project root directory.
2. Add rules, for example:
[*.{js,css,html}]
indent_style = space
indent_size = 2
7. Quickly fix format problems
When formatting issues arise, use quick fixes:
1. Right-click on the problem code and select **Format File** or **Format Selection**.
2. Use shortcut keys to perform quick fixes.8. Summary
- Use shortcut keys to quickly format code.
- Enable automatic formatting to improve efficiency.
- Install extensions to support more languages.
- Use `.editorconfig` and tool-specific configuration files to unify the format.
VS Code changes file encoding
Use shortcut keys to change file encoding
- according to
Ctrl + K Ctrl + S(Windows/Linux) orCmd + K Cmd + S(Mac) Turn on shortcut key settings.
- Click the "Open JSON" icon in the upper right corner to open
keybindings.json。
- Add the following settings to set the shortcut key to change the file encoding to UTF-8:
[
{
"key": "ctrl+alt+u",
"command": "workbench.action.editor.changeEncoding",
"args": "utf8",
"when": "editorTextFocus"
}
]
- shortcut key:Can be changed
ctrl+alt+ufor other key combinations.
- args:Specify
"utf8"Encoding for the target, can be changed to other encodings.
Manually change the encoding through the command panel
- according to
Ctrl + Shift + P(For MacCmd + Shift + P)。
- search「Change File Encoding」(Change file encoding).
- Select the target encoding, e.g.UTF-8orBig5。
Common encoding list
utf8(UTF-8)
utf16le(UTF-16 LE)
utf16be(UTF-16 BE)
big5(Big5)
gbk(GBK)
iso88591(ISO-8859-1)
windows1252(Windows-1252)
Test shortcut keys
- Open a non-UTF-8 encoded archive (such as Big5).
- press
Ctrl + Alt + U(or the shortcut key you set).
- The archive should be converted to UTF-8 immediately (no manual selection required).
Convert archive from Big5 encoding to UTF-8
Step 4: Save the file
After selecting UTF-8, Visual Studio Code will convert the file's encoding to UTF-8 and save it. You can now confirm whether the file is UTF-8 by checking the encoding indicator again.
Align Chinese fonts in Unicode fields
Requirements description
In VS Code, if you edit files containing Chinese characters, full-width symbols, or Unicode special characters, you will often encounter problems with inconsistent character widths and inability to vertically align. These issues can still occur even when using fixed-width English fonts, especially when CJK characters are involved.
Recommended Chinese fonts
The following fonts can better handle the problem of Chinese equal-width arrangement:
- SimSun-ExtB (new detailed body extension): Supports Traditional Chinese and Unicode extended characters
- MS Gothic: Japanese fixed-width font, stable for CJK display
- Imitation of Song Dynasty: Monowidth Chinese printing style, high visual consistency
- standard italic style: Traditional Chinese writing font, balanced layout
Setting method
turn onsettings.json(shortcut keyCtrl + Shift + P→ Enter "Preferences: Open Settings (JSON)") and add the following settings:
"editor.fontFamily": "'SimSun-ExtB', 'MS Gothic', 'imitate Song Dynasty', 'standard script', monospace"
This setting will try to load fonts in sequence, falling back to the next one if the former is not installed.
Suggested additional settings
"editor.fontLigatures": false: Avoid alignment problems caused by font merging
"editor.renderWhitespace": "all": Display blank characters for easy format adjustment
"editor.lineHeight": 22:Slightly adjust the line height depending on the font size to avoid overlapping.
Things to note
- If the font is not installed correctly on the system, VS Code will skip the font
- It is recommended to use it with "full space" to manually adjust alignment.
- Some Chinese fonts are displayed as non-uniform width in VS Code and need to be confirmed by actual measurement.
in conclusion
If you want to use Traditional Chinese fonts in VS Code to achieve neat alignment of Unicode fields, you can useSimSun-ExtB、MS Gothic、Imitation of Song Dynasty、standard italic styleWait for combination settings, and enable auxiliary settings to enhance the alignment effect.
Convert all spaces to Tabs in VS Code
1. Open the command panel
- Press `Ctrl + Shift + P` (`Cmd + Shift + P` for macOS) to open the command panel.
- Enter **"Convert Indentation to Tabs"** and select it.2. Confirm the current indentation type
- Check the status bar in the lower right corner to check the indentation type of the current file (e.g. `Spaces: 4`).
- Click this area to open the indentation settings menu.3. Convert indentation to Tab
- Select **"Convert Indentation to Tabs"** in the menu, this will replace all spaces used for indentation with Tabs.4. Adjust Tab width (optional)
- Click the indentation setting in the lower right corner again (e.g. `Tab Size: 4`).
- Set the Tab width you want (e.g. `4`).5. Save file
- After the conversion is complete, press `Ctrl + S` (use `Cmd + S` on macOS) to save the file.6. Set the default indentation to Tab (optional)
If you want all files to use Tab by default, follow these steps:Step 1: Open settings
- Press `Ctrl + ,` (macOS uses `Cmd + ,`) to open the settings menu.Step 2: Search indentation settings
- Search for **"Editor: Insert Spaces"**.
- Uncheck this option to use Tab instead.Step 3: Set Tab Width
- Search for **"Editor: Tab Size"**.
- Set your desired Tab width (e.g. `4`).Step 4: Apply to workspace (optional)
- If you only want these settings to apply to the current workspace, open the **Workspace Settings** tab to make adjustments.Summarize
By following the above steps, you can easily convert all spaces to Tabs in Visual Studio Code and make default settings as per your requirement.
VS Code switches the folded display of the program code
Manually toggle folding
- Collapse the current range:Ctrl + Shift + [(Windows/Linux),Cmd + Option + [(Mac)
- Expand the current scope:Ctrl + Shift + ](Windows/Linux),Cmd + Option + ](Mac)
- Collapse all blocks:Ctrl + Shift + Alt + [(Windows/Linux),Cmd + Option + Shift + [(Mac)
- Expand all blocks:Ctrl + Shift + Alt + ](Windows/Linux),Cmd + Option + Shift + ](Mac)
Set folding on or off
- Open settings (Ctrl + , or Cmd + ,).
- searchEditor > Folding。
- switchEditor: Foldingsettings:
- On (default):Collapse ranges are allowed.
- closure:Disable folding.
or edit directlysettings.json:
{
"editor.folding": false
}
specific block folding
- Python、C#、JavaScript:use
#regionand#endregion。
- C、Java、JavaScript:folding braces
{...}。
- Python、YAML:Use indentation to collapse.
Extended functions
- availableFoldingorBetter CommentsExtended functionality to add folding control.
VS Code uses the file name at the cursor position to perform Go To File
Method 1: UseCtrl + Pand copy the current word
- Place the cursor on the file name.
- according to
Ctrl + Shift + ←(Mac: Cmd + Shift + ←) to select a file name.
- according to
Ctrl + C(Mac: Cmd + C) to copy the file name.
- according to
Ctrl + P(Mac: Cmd + P) onGo To Filepanel.
- Paste the file name (
Ctrl + VorCmd + V) and pressEnterOpen the file.
Method 2: Useeditor.action.goToImplementation
- If the file name is referenced in the code, such as
importorrequire, can jump directly.
- Click on the file name
F12(jump to definition).
- or press
Ctrl + Click(Mac: Cmd + Click)。
- To open in a new tab, use
Ctrl + Shift + Click。
Method 3: Use an expansion kitQuick File Open
If you often need this function, you can installQuick File OpenExtension package and set shortcut keys to automatically extract the file name from the cursor position and open it.
3.1: Expansion KitOpen file - Frank Stuetzer
- Extension Settings: Search paths : "Your path"
3.2: Expansion KitOpen file From Path - jack89ita
- Extension Settings: open-file-from-path.regExp : default: "['|\"]([^'|\"]+)['|\"]"
VS Code calculates the sum of the column selection area
Basic instructions
Although VS Code supports column selection (Column Selection), itNo built-in functionality by defaultThe values in the selected area can be summed directly. However, you can achieve this goal through the following methods.
Method 1: Use expansion kit
- Calculate(Author: Tomoki Hayashi)
- Function: You can perform operations such as summing, averaging, maximum value, minimum value, etc. on the selected numbers.
- How to use:
- After installation, select the number you want (can be a straight column or general multiple columns)
- Right-click menu → Select
Calculate Sum
- The results will be displayed in the lower right corner or notification bar
Method 2: Copy to the built-in terminal for calculation
- After selecting the value in the column, press
Ctrl+Cclone
- Paste into VS Code's terminal (or any shell that supports computing, such as the Python REPL)
- Execute code, for example:
# Python example
nums = [12, 15, 8, 10]
print(sum(nums))
Method 3: Manually insert and export using multiple cursors
The values can be quickly sorted and pasted into tools such as Excel, Google Sheets, or Pandas for summing.
suggestion
If you often need to perform this kind of operation, installCalculateExpansion kits are the most convenient and straightforward approach.
VS Code sorts selected rows
Function description
Visual Studio Code supports sorting multi-line text in a selected area by alphabetical order, numerical order, or reverse order. It is often used for code organization, data processing, or list organization.
Usage
Use built-in commands
- Select the multi-line text you want to sort
- Open the command menu:
Ctrl + Shift + P
- enter
Sort Lines Ascending(raised to a raised power) orSort Lines Descending(lowering power)
- Press Enter and the selected rows will be sorted immediately
shortcut key
There are no shortcut keys bound by default, you can set them yourself:
- Go toFile → Preferences → Keyboard Shortcuts
- search
Sort Lines AscendingorDescending
- Click the pencil icon to set a custom shortcut key
Advanced sorting (needs expanded functionality)
If you need to customize the sorting conditions (for example: ignore case, sort by fields, sort by natural numbers, etc.), you can install the following extensions:
- Sort lines(Author: Tyriar)
- Natural Sort(Supports natural sorting, numbers will be sorted by numerical values instead of strings)
Supplementary skills
- Can be used before sorting
Alt + Shift + ↓ / ↑Quickly copy or move rows
- Use multiple cursors to sort multiple pieces of data at the same time
in conclusion
VS Code has built-in support for basic row sorting functions. If you have advanced needs, you can expand the usage scenarios through expansion kits.
VS Code insert date string
Method 1: Use an expansion kitInsert Date String
- Open the Extension Marketplace (press
Ctrl + Shift + X,Mac:Cmd + Shift + X)。
- Search and installInsert Date StringExpansion Kit. Note that there are several similar packages in the market, each supporting different parameters.
- After installation, shortcut keys are available by default
Alt + Shift + IInsert the current date and time.
- You can also press
Ctrl + Shift + P,implementInsert Date Stringinstruction.
Method 2: Use Code Snippets
- according to
Ctrl + Shift + P(Mac:Cmd + Shift + P), enter and selectPreferences: Configure User Snippets。
- Select a language (e.g.
plaintext.jsonorpython.json)。
- Added the following sample snippet:
"Insert Date": {
"prefix": "date",
"body": [
"${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
],
"description": "Insert current date"
}
enterdateand pressTabThe date can be inserted.
Method 3: Use an expansion kitmacrosWith date function
- InstallMacrosExpansion Kit.
- Package the date insertion action into a macro through settings and bind shortcut keys for use.
Supplement: Custom format
Insert Date StringThe extension package supports multiple date formats and can be installed insettings.jsonCustom format in, for example:
"insertDateString.format": "YYYY-MM-DD HH:mm:ss"
Python extension for VS Code
How to install
- Open VS Code and press
Ctrl + Shift + X(Mac: Cmd + Shift + X) to open the "Extensions".
- Enter in the search barPython,chooseOfficial Python extensions from Microsoft(Blue icon).
- ClickInstallInstall.
Main functions
Syntax Highlighting and IntelliSense
- Provides instant grammar checking and suggestions.
- Automatically complete function and variable names to improve writing efficiency.
Outline View functions and categories
- throughOutline panelQuickly view the function and class structure within Python files.
- according to
Ctrl + Shift + O(Mac: Cmd + Shift + O) to quickly browse the symbol list.
Debugging
- Complete built-indebugger, supports breakpoints and single-step execution (
F5), variable inspection and other functions.
Python environment management
- supportVirtual environments (venv, conda), you can easily switch Python versions and environments.
- according to
Ctrl + Shift + P(Mac: Cmd + Shift + P) and enterPython: Select InterpreterSelect a Python version.
Jupyter Notebook support
- built-inJupyter NotebookEditing function, support
.ipynbFormat suitable for data science and machine learning development.
Recommended Python related extensions
| Extension package name |
Function description |
| Python (Microsoft) |
Official Python support, including syntax highlighting, completion, and debugging |
| Pylance |
Provides faster IntelliSense and type checking |
| Jupyter |
Let VS Code support Jupyter Notebook |
| Python Environment Manager |
Conveniently manage Python virtual environments |
| Python Docstring Generator |
Automatically generate Python annotations (Docstring) |
Browse the function list of the current Python file in VS Code
Using the Outline panel
- Open the sidebar (Explorer) of VS Code.
- turn upOutlineThe panel will automatically display the functions and categories of the current Python file.
- If it is not displayed, you can press
Ctrl + Shift + P(Mac: Cmd + Shift + P) Open the command panel and enterView: Show Outlineand execute.
Use quick symbol search
- according to
Ctrl + Shift + O(Mac: Cmd + Shift + O)。
- A list of all functions and categories of the current file will be displayed, and you can click to jump quickly.
use@or:Quick filter
- according to
Ctrl + P(Mac: Cmd + P) to open the quick search panel.
- enter
@to view all functions and categories.
- enter
:@to display only Python classes and functions.
Using Python extensions
- Install Microsoft officialPython extension kit, available atOutlineThe Python file is parsed in the panel and a list of functions and categories is displayed.
- Use IntelliSense to automatically complete function names and quickly jump to definitions.
VS Code switches Conda environment
1. Open the interpreter selector
There are two main ways to open the environment selection menu in the VS Code interface:
- shortcut key:press
Ctrl + Shift + PCall the command panel and enterPython: Select Interpreter。
- Status column:Click the Python version text (for example, Python 3.12.x) that appears in the lower-right corner (or upper-right corner) of the window.
2. Select the specified environment
Once the menu opens, look for your environment in the list:
- Look for labels labeledCondaand the path contains
C:\Apps\anaconda3_202406\envs\tf_env\python.exeproject.
- After clicking this item, VS Code will automatically reload the language server and use this environment as the standard for execution and debugging.
3. Configure the terminal to automatically activate
In order to ensure that the program can be used correctly when executing the program in the terminal inside VS Codetf_env, please check the following settings:
- Automatic activation:Confirm in VS Code settings
python.terminal.activateEnvironmentChecked.
- Create a new terminal:After selecting the interpreter, press
Ctrl + ~Turn on the new terminal and the screen should automatically display(tf_env)words.
4. Verify the current execution environment
Add the following snippet to your code and check whether the output path is correctly pointed after executiontf_env, to ensure the DLL loading path is correct:
importsys
import os
# Check Python executable file path
print("Current Python:", sys.executable)
# Check the DLL search path (for troubleshooting TensorFlow errors)
if hasattr(os, 'add_dll_directory'):
print("DLL Directories:", os.environ.get('PATH', '').split(';')[0])
5. Troubleshoot the problem that the environment is not displayed
If not found in the menutf_env:
- Click on the upper right corner of the menuRefreshicon.
- make sure
condaThe command has been added to the system environment variable or specified in the VS Code settings.conda.path。
Using Git in VS Code
Initialize the Git repository
- Open the project folder in VS Code.
- Click the Version Control icon in the activity bar on the left.
- If the folder has not yet been initialized with Git, click the "Initialize Repository" button.
Connect to remote repository
- Open the terminal (
Ctrl + `or select "Terminal" from the menu).
- Enter the command:
git remote add origin [remote repository URL]。
- Confirm the link is successful:
git remote -v。
Add files to version control
- After files are modified or added, they will appear in the "Changes" area.
- Click the "+" button next to each file to add it to the "Staging Area".
Commit changes
- Enter the commit message above the staging area.
- Click the "✔" button to submit.
Push to remote repository
- Click the "..." menu in the upper right corner and select "Push".
- Or enter in the terminal:
git push origin main(Adjusted based on branch name).
Pull remote changes
- Click the "..." menu in the upper right corner and select "Pull".
- Or enter in the terminal:
git pull origin main。
View Git logs
- Open the terminal and enter:
git logView commit history.
- Or use VS Code extension packages such as "Git Graph" to view it graphically.
Git user information settings
Submitter's name and email
Git needs to record the submitter's name and email when executing a commit. If the system cannot find this information, an error will occur.
Setup command
Please enter the following commands in sequence in the Terminal of VS Code:
git config --global user.name "Your Name"
git config --global user.email "[email protected]"
Confirm settings
To confirm whether the setting is successful, please enter:
git config --list
Follow-up operations
After the settings are completed, you can directly click the Commit button on the VS Code interface again to submit successfully.
VS Code View File Git History
Viewing the revision history (Git History) of a single file in VS Code can mainly be achieved through built-in functions or by installing powerful extensions. This helps you track who made changes to your code, when, and what changes were made.
1. Use the built-in Timeline
This is the fastest method without installing any plug-ins:
- on the leftExplorerClick on the file.
- At the bottom of the left panel, find and expandTimelineblock.
- All Git commit records for this file will be listed here.
- Click on any record and VS Code will openDiff View, the left side is the previous version, and the right side is the content after this submission.
2. Use GitLens extensions (highly recommended)
GitLens is a must-have tool for developers, which elevates process viewing capabilities to a professional level:
- Current Line Blame:When the cursor stops on a certain line, the background will fade out to show who modified it and how long ago it was modified.
- File History view:Click in the upper right corner of the editor「Open Changes with Previous Revision」icon, or view the complete graphical process through the GitLens panel.
- Visual comparison:Click on a commit in the history to clearly see the evolution of the entire file.
3. Use Git History extensions
If you prefer a more intuitive graphical interface, you can installGit HistoryPlugin:
- After installation, on the File tab, pressRight click。
- chooseGit: View File History。
- This will open a new window that displays all branch merge and commit records of the file in a hierarchical chart, and supports search and filtering.
Function comparison table
| method |
advantage |
Suitable for the situation |
| Timeline (built-in) |
No installation required, lightweight, ready to use. |
Quickly review recent simple changes. |
| GitLens |
Extremely powerful and deeply integrated with the editor. |
Long-term project maintenance requires precise tracking of the responsibility of each line of code. |
| Git History |
The graphical interface is clear and easy to read the branch directions. |
Need to search for specific information or view complex branch merge history. |
Command line mode (terminal)
If you are used to using the built-in terminal of VS Code, you can also enter the following command:
git log -p <file_path>
This will list all commits for the file and the specific code changes (patches). according toqto exit.
VS Code uses SSH to connect to GitHub
Authentication SSH
If you encounter an error message when using Git clone or other Git operations in VS Code:
[email protected]: Permission denied (publickey)
This means that GitHub did not successfully authenticate your SSH key. During the investigation process, you may encounter the following problems:
- This machine does not have a corresponding private key
- SSH agent is not started
- The SSH used by VS Code Terminal is inconsistent with the system OpenSSH
Step 1: Confirm SSH public key and GitHub settings
- Use the command to view the local SSH public key fingerprint:
ssh-keygen -lf ~/.ssh/id_rsa.pub
- Log in to the GitHub website and enterSettings → SSH and GPG keys, confirm that the fingerprint is consistent with the machine
Step 2: Confirm whether the machine has a private key
Check directoryC:\Users\USERNAME\.ssh\, make sure there isid_rsa(private key) exists. If onlyid_rsa.pub, need to generate a new private key:
ssh-keygen -t rsa -b 3072 -C "[email protected]"
After generation, you will get:
- id_rsa (private key)
- id_rsa.pub (public key, copied to GitHub)
Step 3: Start SSH Agent
- Open services.msc → FindOpenSSH Authentication Agent→ Set to Automatic and start
- Close the old Terminal and reopen VS Code or the new PowerShell / CMD Terminal
Step 4: Confirm the SSH used by VS Code Terminal
where ssh
Suggested results:
C:\Windows\System32\OpenSSH\ssh.exe
If the first one is Git Bash's ssh, please use PowerShell or CMD, or directly specify the full path to use Windows OpenSSH.
Step 5: Modify private key permissions
If executedssh-addAn error about excessive permissions occurs and needs to be modified:
icacls $env:USERPROFILE\.ssh\id_rsa /inheritance:r
icacls $env:USERPROFILE\.ssh\id_rsa /grant:r "$($env:USERNAME):(R,W)"
icacls $env:USERPROFILE\.ssh\id_rsa
Make sure only your own account can read and write.
Step 6: Add the private key to the SSH agent
ssh-add $env:USERPROFILE\.ssh\id_rsa
Example of success message:
Identity added: C:\Users\USERNAME\.ssh\id_rsa ([email protected])
Step 7: Test the SSH connection
ssh -T [email protected]
Example of success message:
Hi USERNAME! You've successfully authenticated, but GitHub does not provide shell access.
Step 8: Subsequent use
Focus on sorting out
- The SSH public key fingerprint must be consistent with the one on GitHub
- This machine must have a corresponding private key. If not, a new one will be generated.
- Start the Windows OpenSSH agent and ensure the private key permissions are correct
- The ssh used by VS Code Terminal must be compatible with the agent (Windows OpenSSH)
- Private key permissions that are too wide will be ignored by SSH
- After adding the private key to the agent, use
ssh-add -lexamine
- Test GitHub connection to ensure successful authentication
- After completion, you can operate the private repository normally in VS Code.
The entire process covers SSH public and private key management, agent startup, permission settings, and VS Code Terminal configuration. Following this operation can solve most SSH problems when using VS Code to connect to GitHub on Windows.
PHP extension for VS Code
Official and commonly used expansion kits
- PHP IntelephenseIt provides smart prompts, automatic completion, syntax checking, and function definition jumps. It is currently the most commonly used PHP extension package.
- PHP DebugPaired with Xdebug, you can set breakpoints, single-step execution, and check variables in VS Code.
- PHP Namespace ResolverAutomatically import PHP classes, interfaces and namespaces to avoid manual typing errors.
- PHP DocBlockerHelps automatically generate PHPDoc comments to improve code readability.
Grammar check settings
Available atsettings.jsonSet the PHP executable file path in:
"php.validate.executablePath": "C:/php/php.exe"
Debugging environment requirements
- Install PHP and enableXdebug。
- Install the VS Code extensionPHP Debug。
- exist
.vscode/launch.jsonSet debugging parameters.
suggestion
If your main needs are program editing and automatic completion, installPHP IntelephenseThat’s it; if you need to debug, be sure to matchPHP Debugwith Xdebug.
Set php.validate.executablePath and required extensions
Necessary expansion kit
Used in Visual Studio Codephp.validate.executablePathFunction, there is no need to install additional PHP extension packages, but you need to confirm that the PHP executable file has been installed in the system.
It is recommended to install the following extensions to enhance your PHP development experience:
- PHP Intelephense(recommend)
- PHP Debug(If Xdebug is required for debugging)
Step 1: Install PHP
- toPHP official websiteDownload PHP and install
- Note the installation location, for example:
- Windows:
C:\\php\\php.exe
- macOS/Linux:
/usr/bin/phpor usewhich phpGet path
Step 2: Set php.validate.executablePath
- turn onSettings (settings.json), which can be entered through the command menu
Preferences: Open Settings (JSON)
- Add or modify the following content:
"php.validate.executablePath": "C:\\php\\php.exe"
(Linux/macOS path example:"/usr/bin/php")
Step 3: Verify settings
- store
settings.json
- Open the PHP file. If no errors are displayed and the syntax check is normal, the setting is successful.
Additional information
- If the PHP executable is not in the system PATH environment variable, it must be set explicitly
php.validate.executablePath
- Intelephense extensions do not rely on this setting, but PHP syntax error checking does.
php.ini path in VS Code
Setting method
VS Code itself has no direct settingsphp.inioption, it is through you insettings.jsondesignatedphp.exeto read the correspondingphp.ini. The steps are as follows:
- First confirm your PHP installation location, for example:
C:\php\php.exe
C:\php\php.ini
- Open in VS Code
settings.json(shortcut key:Ctrl + ,→ "Open Settings (JSON)" icon in the upper right corner).
- Add settings:
"php.validate.executablePath": "C:/php/php.exe"
- make sure
php.iniwith thatphp.exeBelongs to the same PHP installation path, so that VS Code will use it when checking syntax and debugging.php.ini。
Check the currently used php.ini
- Enter in the terminal:
php --ini
- will display:
Configuration File (php.ini) Path: C:\php
Loaded Configuration File: C:\php\php.ini
in conclusion
It cannot be specified directly in VS Codephp.ini, can only be specified byphp.exepath to indirectly specify whichphp.ini。
VS Code Develop Android App
Can it be developed directly?
Visual Studio Code itself is not a complete Android Studio replacement and lacks official Android SDK integration. However, you can develop Android App by installing extension packages and setting up the environment.
Common ways
- Flutter / Dart: Install Flutter and Dart extension kits to quickly develop cross-platform apps in VS Code, supporting Android and iOS.
- React Native: Install the React Native Tools extension package and use JavaScript / TypeScript to develop Android and iOS Apps.
- Native development (Java/Kotlin): Can write program code, but needs to be paired with Android SDK, Gradle, and command line tools. Compilation and simulator operation usually still require Android Studio.
Necessary environment
- InstallAndroid SDK(Typically installed via Android Studio)
- InstallJava JDK(If developing Kotlin/Java native App)
- Configuration
ANDROID_HOMEenvironmental variables
suggestion
If you want lightweight development, it is recommended to choose Flutter or React Native, and most processes can be completed in VS Code; but if you need in-depth development and debugging of native Android App, Android Studio is still the main tool.
Execute and debug in VS Code
Start mode
- Open the VS Code project folder.
- left clickRun and Debugicon, or use shortcut keys
Ctrl+Shift+D。
- If there is no setting yet, clickCreate launch.json file。
launch.json settings
VS Code usage.vscode/launch.jsonTo define execution and debugging methods, the following are examples in different languages:
Node.js Example
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Start Node.js program",
"program": "${file}"
}
]
}
PHP (with Xdebug)
{
"version": "0.2.0",
"configurations": [
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9003
}
]
}
Python example
{
"version": "0.2.0",
"configurations": [
{
"name": "Start Python program",
"type": "python",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal"
}
]
}
Debugging function
- breakpoint: Click the line number to set.
- Single step execution:Supports Step Over, Step Into, and Step Out.
- View variables: You can instantly observe the variable content in the sidebar.
- call stacking: Display the current program calling sequence.
hint
Different languages need to install corresponding expansion kits, for example:
- Python → Python Extension
- PHP → PHP Debug(Requires Xdebug)
- C# → C# Dev Kit
- Java → Extension Pack for Java
PHP v: 7.4.10
email: [email protected]