vscode-extensions [Best]

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:

Vscode Common Commands

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 .

⭐Quickly download multiple extensions

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

If you want to transfer the extension of the old computer to the new computer in the future, you can also use this method: emoji_kissing:

You can download the .ps1 file that comes with this project, follow the third step below to exclude the unnecessary extension .
In the extensions.ps1 file, each extension has a comment ., please delete the unnecessary . before executing the installation command

method:

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

Find Missing Extensions

extensions-compare
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

❄️Transparent editor

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 .

GlassIt-VSC

Usage: ctrl+alt+z: desaturation (transparency) ctrl+alt+c: increase saturation (opacity)

💜Theme

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

Arc Dark for Visual Studio Code

The theme is a bit similar to the dark theme of Visual Studio Code, but the overall tone is softer, similar to the color of macarons.

ButterTheme

As the name suggests, this is an eye-catching milk yellow theme
A very rare theme (to put it bluntly, not many people use it), but the author likes it very much
If you can't find this theme, link

Coder200

This time I don't know ... just by looking at the name
Rare theme, full of orange, so sexy~:flushed:

doom-emacs-theme

Simple style

Dracula Official

*very famous, pink and purple vampire colors

Github Theme

One of the classic themes that cannot be ignored

LaserWave

A purple pink theme with a sunset feel

Moegi Theme

Gentle and charming theme

Material Dark

One of the classic themes that cannot be ignored

One Dark Pro

One of the classic themes that cannot be ignored

Panda Theme

Lake Green 🐼 Top notch themes:
This theme is really cool!

Simple Dark

The background is very dark, the text color will not be too dazzling

Skyline

Blue lovers must use it 💙

SynthWave '84

Super high-tech, dazzling fluorescent theme: emoji_sunglasses:
Remember to turn on the fluorescent effect after selecting the theme (you can also match it with other theme colors: emoji_emoji_fu :)

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

Tearz

A bit similar to the previously launched Moe Wood theme *But this purple really attracts the author~

Vuesion Theme

Simple pink, looks very comfortable

Xcode Theme

One of the classic themes that cannot be ignored

💛 Beautifying editor and editing environment

After finishing the decoration, our editor will introduce the plug-ins that can not only increase the aesthetic feeling, but also improve work efficiency~

Color Highlight

If you are a front-end engineer or data analyst, and often need to do visual work, be sure to download this!
When editing, as long as there is hexadecimal color expression, you can see the color very clearly (you don’t need to run the code if the color looks good) .

Material Theme Icons

Different file extensions have different icons
Not only looks good but can find files faster.

vscode-icons

Slightly different from Material theme icons
The author prefers to use this~

💚 Must-have, highly recommended

The plugins to be introduced below are really easy to use!

Most of them can improve development efficiency, don't miss: emoji_heart_eyes:

Code Runner

I believe that friends who have used VSCode should be familiar with this plugin! ?
Allow VSCode to execute the program with one click .
Support multiple languages, such as C, C++, Java, JavaScript, PHP, Python, Perl...etc.

Comment Divider

Use shortcut keys to generate beautiful comment styles .
As shown in the figure below, you can see two styles: Shift+Alt+x and Alt+x.

autoDocstring - Python Docstring Generator

This plugin was introduced by . for Python developers
Use shortcut keys to quickly generate Docstring style comments .
Describe the purpose, parameters, return value and other information of the function.
Support different Docstring styles, such as google, sphinx, numpy, etc. . .

How to use: Press the key below where you want to generate comments Windows: ctrl+shift+2 Mac: cmd+shift+2

Draw.io Integration

Flow chart drawing tool
When designing a project, you can use this plugin to plan the feasibility .
Can be used as a note taking tool .
Support many common modes, such as Google cloud platform representative function symbol (as shown in the figure).

Path Intellisense

It's really cool to have this plugin when coding 😘
Coder suitable for frequently reading and writing files .
When writing the path, it will automatically list the files under the path you want to find .

🌟Big data, AI engineer - Jupyter (Python)

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:

Interactive mode
View variable data type and variable value (just like in Spyder, Pycharm)
Execute the code line by line, and execute part of the code (really very practical, better than Debug~:heart_eyes:)

The plugin provides the following features:

📌interactive mode
📌** View variable data type and variable value** (such as Spyder, Pycharm)
📌 Execute code line by line and Execute part of code (really useful, better than debugging~:heart_eyes :)

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:

💡 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

💡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 to F10). 3 . Interactive window will appear after execution of .

💡View variable data type and variable value (need to be in interactive mode)

Click Variables. in the interactive window

💡 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 * .

👋Git、Markdown Support

The plugins described below are essential for developers working on Github or Gitlab projects .

GitLens

After downloading, the script code will show which parts were modified, who made the changes, when the . was modified
Note that the .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) .
Remember to track the project with git for this plugin to work .

More for GitLens

Compare two commits with detailed differences
- COMMITS: Select the commit to compare with HEAD (step1~2)
- SEARCH & COMPARE: select changed files (step 3)
- diff: correct file is HEAD (step 4)

Markdown Preview Enhanced

When writing .md file, you can preview the result .
Press ctrl+k, then v to open preview window .
The middle of the figure below is the .md file, and the right is the preview window .

Paste Image

Paste images directly from the clipboard into markdown/asciidoc (or other files)!
Usage
- screenshot to clipboard
- Use default keybindings: Ctrl+Alt+V (Cmd+Alt+V on Mac).
- images will be saved in the folder containing the currently edited file
- Relative paths will be pasted to the current edited file
You can configure imagePath in settings.

💻 Remote WSL & Dev Container

Remote WSL

vscode will open . in Windows Subsystem Linux environment
You can edit files in WSL environment in vscode editor without using vim or nano.

Usage:

ctrl+shift+p: open command panel . 2 . WSL: New WSL Window: Open WSL environment in vscode .

Dev-Container

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 .

🔧Fixer (Fix Vscode Corrupt)

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.

🚀 Copilot

AI-assisted development tools similar to ChatGPT make everyone faster in the development process

Codeium

Completely FREE to use! *Comparison of functions with ChatGPT and Copilot
With this tool, you can:
- Automatic code generation
- automatically generates comments, Docstring
- automatically generates Annotation hint
- improve code quality
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!

Alinccc/vscode-extensions-best