:gem:Tops of VSCode Extensions
Record and share vscode extensions, including improving development efficiency, key points, theme beautification, etc. . .
This project will provide detailed instructions for each extension, hoping to help coders all over the world code happily together: emoji_sunglasses:
This project provides "extended sharing area", you can submit interested extensions here.
If you want Pull Request, just update README.md
(README.zh-TW.md
will be automatically updated through CI)
Extended Summary:
Using the vscode command panel can increase the development speed .
Open command panel: ctrl+shift+p
Common commands:
File: Open Folder
: open folder as workspace .Preferences: Color Theme
: select color theme for editor .Preferences: File Icon Theme
: select icon theme for file .Developer: Reload Window
: Reload VSCode window .I will introduce a lot of vscode extensions later . There is a trick here, you can quickly download many extensions without looking for . one by one.
:warning: If you have high version vscode, you can jump over the following method, just go to here
If you want to transfer the extension of the old computer to the new computer in the future, you can also use this method :kissing:
.ps1
file that comes with this project, follow the third step below to exclude the unnecessary extension .extensions.ps1
file, each extension has a comment ., please delete the unnecessary . before executing the installation commandmethod:
Access all the extensions of vscode on the current computer, the output is text . Enter the following command in the terminal (
powershell
):code --list-extensions | ForEach-Object {"code --install-extension $_"} > extensions.ps1
After the command is executed, the
extensions.ps1
file will be obtained in the current directory (the file name is defined when the command is executed) .Enter the following command in the terminal (
powershell
) of the new computer:./extensions.ps1
download complete
Compare two .ps
files to find differences between two extension records .
Usage (choose one of the following):
compare.py
run Python
script .
compare.sh
runs ./extensions_compare/compare.sh
etc . on git bash, wsl, or linux
Just click the Profile
, then you can import or export the extensions.
The transparency effect is amazing.
It can be used as a lazy tool (code while watching the video~) .
You can use your own desktop background while coding and watching Gura .
Usage:
ctrl+alt+z
: desaturation (transparency)ctrl+alt+c
: increase saturation (opacity)
The biggest reason to use vscode is to have eye-catching
, elegant
, comfortable
, pleasant editing interface
. Only a good-looking editing environment can make the coder willing to type on the keyboard~:sunglasses:
Next, I will share my favorite topics with you one by one (the following examples are based on Python, and different languages may have slight differences)
oh! Wait a minute, here is a quick way to switch themes . After all, you may want to change themes every day~~
Quick switch theme
"ctrl+shift+p": Open vscode command input box
"Preferences:Color Theme": Enter and choose the theme you want
*very famous, pink and purple vampire colors
Enable fluorescence mode:
"ctrl+shift+p": Open the VS Code command input box
"Synthwave '84: Enable/Disable Neon Dreams": Enable/Disable Neon Dreams (see picture)
"Restart": Restart VS Code
After finishing the decoration, our editor will introduce the plug-ins that can not only increase the aesthetic feeling, but also improve work efficiency~
The plugins to be introduced below are really easy to use!
Most of them can improve development efficiency, don't miss: emoji_heart_eyes:
How to use: Press the key below where you want to generate comments Windows:
ctrl+shift+2
Mac:cmd+shift+2
Shift+Alt+x
and Alt+x
.This is intended for use by Python developers.
Automatically formats imports.
After downloading, add the following code to settings.json
:
"isort.args":["--profile", "black"]
Next, open Keyboard Shortcuts
and set a shortcut (the author has bound it to F12
):
Use the shortcut F12
to automatically format Python imports.
The plugins presented here are really powerful!
The author knows that many people who use Python are not used to using vscode for many reasons:
The plugin provides the following features:
If you can understand Chinese, it is recommended to spend 5 minutes to quickly learn how to use the Jupyter plug-in (see link)
Usage:
:bulb: Download the following plug-ins (some may not be used, forget it~)
Jupyter
,Jupyter keymap
,Jupyter slide show
,Jupyter cell tag
,Jupyter notebook renderes
,vs code jupyter notebook previewer
:bulb:Execute code in interactive mode
- right click . in script
- select
Run Current File in Interactive Window
(It is recommended to set a VS Code shortcut key, I set it toF10
). 3 .Interactive
window will appear after execution of .
:bulb:View variable data type and variable value (need to be in interactive mode)
Click Variables. in the interactive window
:bulb: Execute line by line or partly
- Select the code to execute (can be one or more lines) .
- right click on selected code . 3 . SELECT * run select/row in interactive window * .
The plugins described below are essential for developers working on Github or Gitlab projects .
170
line on the right side of the screen has a green line indicating that there is a new code record (red means deleting the code) .git
for this plugin to work .COMMITS
: Select the commit to compare with HEAD (step1~2)
SEARCH & COMPARE
: select changed files (step 3)
diff
: correct file is HEAD (step 4)
Ctrl+B
for bold formatting..md
file, you can preview the result .ctrl+k
, then v
to open preview window ..md
file, and the right is the preview window .Paste images directly from the clipboard into markdown/asciidoc (or other files)!
Usage
Ctrl+Alt+V
(Cmd+Alt+V
on Mac).You can configure imagePath
in settings.
Windows Subsystem Linux
environmentWSL
environment in vscode editor without using vim
or nano
.Usage:
ctrl+shift+p
: open command panel . 2 .WSL: New WSL Window
: OpenWSL
environment in vscode .
Using Docker
, the entire development environment inside vscode can run in the container, including editing, terminal, debugging, executing .
Node.js
, Python
, Java
, etc. and other development tasks, only need to install Docker
and vscode, no need to install the corresponding runtime and compiling software .
The Remote - SSH extension lets you use any remote machine with a SSH server as your development environment. This can greatly simplify development and troubleshooting in a wide variety of situations. You can:
Please note that if you are using the Windows operating system and experiencing issues with SSH, receiving the following error: ssh: could not resolve hostname
, you need to add your Host and Hostname to the C:/Windows/System32/drivers/etc/hosts
file:
<Host> <Hostname>
Next, let's take an example of connecting VS Code to Colab:
Please refer to the official documentation for instructions:
Remeber you only need to perform steps 6, 8, 9, and 10 once
Open Colab.
Execute the following code to connect to Google Drive. You will see your Drive file manager appear next to Colab.
from google.colab import drive
drive.mount("/content/drive")
Create a file named config.env
in your Google Drive, for example:
# /content/drive/MyDrive/Colab/config.env
PASSWORD=1234567
Read the config.env
file in Google Drive to obtain the password needed for SSH later.
# !pip install python-dotenv --quiet
import dotenv
import os
dotenv.load_dotenv(
os.path.join('/content/drive/MyDrive/Colab/', 'config.env')
)
password = os.getenv('PASSWORD')
Perform SSH using Cloudflared to obtain the remote host (URL that will be used later).
# Install colab_ssh on google colab
# !pip install colab_ssh --upgrade --quiet
from colab_ssh import launch_ssh_cloudflared, init_git_cloudflared
launch_ssh_cloudflared(password)
Download Cloudflared to any location on your local machine. link
Install the Remote-SSH
extension in VS Code.
Use the VS Code command Ctrl+Shift+P
and enter remote-ssh: connect to host
.
Select configure ssh hosts
then c:\users<name>.ssh\config
.
Paste the following code, making sure to fill in the path with the location where Cloudflared was downloaded!
Host *.trycloudflare.com
HostName %h
User root
Port 22
ProxyCommand <PUT_THE_ABSOLUTE_CLOUDFLARE_PATH_HERE> access ssh --hostname %h
Use the VS Code command Ctrl+Shift+P
and enter remote-ssh: connect to host
.
Select add new ssh host
and enter the URL from step 5.
Enter the password from config.env
.
After creating new vscode window, choose the OS System.
Finished!
Sometimes, when uninstalling the plugin, the following error message will appear in the lower right corner of the VS Code window:
You can solve this problem with:
Usage:
- Download Fix VSCode Checksum Plugin .
ctrl+shift+p
: Open command palette .Fix ChecksumS: Apply
: perform repair .ctrl+shift+p
: Open command palette .Developer: Reload Window
: restart VS Code.
AI-assisted development tools similar to ChatGPT make everyone faster in the development process
Completely FREE to use! *Comparison of functions with ChatGPT and Copilot
With this tool, you can:
Docstring
Annotation hint
Instructions
Click Refactor
of the code block
Select the processing you want, eg: Add comments and docstrings to the code
generate Codeium
chat blocks
code extraction is complete!