{"id":16201020,"url":"https://github.com/lin-jun-xiang/awesome-vscode-extensions","last_synced_at":"2025-12-30T20:23:10.757Z","repository":{"id":150131890,"uuid":"615181819","full_name":"Lin-jun-xiang/awesome-vscode-extensions","owner":"Lin-jun-xiang","description":":gem:Tops of VSCode Extensions","archived":false,"fork":false,"pushed_at":"2023-08-16T07:31:00.000Z","size":15192,"stargazers_count":246,"open_issues_count":2,"forks_count":30,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-22T05:01:02.876Z","etag":null,"topics":["awesome","colab","docker","drawio","git","jupyter","python","remote","theme","transparency","visual-studio-code","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"PowerShell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lin-jun-xiang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-03-17T06:01:42.000Z","updated_at":"2024-10-17T13:40:17.000Z","dependencies_parsed_at":"2023-05-05T08:25:07.731Z","dependency_job_id":"6f711002-5fb9-47bf-8631-b84e1f5939e8","html_url":"https://github.com/Lin-jun-xiang/awesome-vscode-extensions","commit_stats":null,"previous_names":["lin-jun-xiang/awesome-vscode-extensions"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lin-jun-xiang%2Fawesome-vscode-extensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lin-jun-xiang%2Fawesome-vscode-extensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lin-jun-xiang%2Fawesome-vscode-extensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lin-jun-xiang%2Fawesome-vscode-extensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lin-jun-xiang","download_url":"https://codeload.github.com/Lin-jun-xiang/awesome-vscode-extensions/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238016117,"owners_count":19402505,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome","colab","docker","drawio","git","jupyter","python","remote","theme","transparency","visual-studio-code","vscode","vscode-extension"],"created_at":"2024-10-10T09:35:16.411Z","updated_at":"2025-12-30T20:23:10.720Z","avatar_url":"https://github.com/Lin-jun-xiang.png","language":"PowerShell","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vscode-extensions [Best]\n\n\u003cdiv\u003e\n    \u003cimg src=\"https://readme-typing-svg.demolab.com/?pause=1\u0026size=50\u0026color=f75c7e\u0026center=True\u0026width=1200\u0026height=120\u0026vCenter=True\u0026lines=Click+the+⭐+Star+please .;Any+questions+can+be+asked+in+Issue.\" /\u003e\n\u003c/div\u003e\n\n[En README](README.md) | [中文版說明檔](README.zh-TW.md)\n\n---\n\n* Record and share vscode extensions, including improving development efficiency, key points, theme beautification, etc. . .\n* This project will provide detailed instructions for each extension, hoping to help coders all over the world code happily together: emoji_sunglasses:\n* This project provides [\"**extended sharing area**\"](./share/README.md), you can submit interested extensions here.\n* If you want **Pull Request**, just update `README.md`\n\n    ([`README.zh-TW.md`](https://github.com/Lin-jun-xiang/action-translate-markdown/tree/main) will be automatically updated through CI)\n\n* Extended Summary:\n     - [Quickly download multiple extensions (read this first)](#starquickly-download-multiple-extensions)\n     - [transparent editor](#snowflaketransparent-editor)\n    - [theme](#purple_hearttheme)\n     - [editor and beautifying environment](#yellow_heart-beautifying-editor-and-editing-environment)\n     - [must have and highly recommended](#green_heart-must-have-highly-recommended)\n    - [Big Data and AI Engineer-Jupyter(Python)](#star2big-data-ai-engineer---jupyter-python)\n     - [Git and Markdown helper](#wavegitmarkdown-support)\n     - [Remote WSL and Dev Container](#computer-remote-wsl--dev-container)\n     - [Remote-SSH: How to connect VSCode to Colab?](#computer-remote-ssl)\n     - [Fixer](#wrenchfixer-fix-vscode-corrupt)\n     - [Copilot Assist](#codeium)\n     - [Community Shares and Contributions](./share/README.md)\n\n\u003cdetails\u003e\n\u003csummary\u003eVscode Common Commands\u003c/summary\u003e\n\n* Using the vscode command panel can increase the development speed .\n\n* Open command panel: `ctrl+shift+p`\n\n* Common commands:\n    * `File: Open Folder`: open folder as workspace .\n    * `Preferences: Color Theme`: select color theme for editor .\n    * `Preferences: File Icon Theme`: select icon theme for file .\n    * `Developer: Reload Window`: Reload VSCode window .\n\n\u003c/details\u003e\n\n---\n\n## :star:Quickly download multiple extensions\nI 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.\n\n:warning: If you have high version vscode, you can jump over the following method, just go to [here](#star-quickly-download-multiple-extensions-for-new-version-vscode)\n\nIf you want to transfer the extension of the old computer to the new computer in the future, you can also use this method :kissing:\n\n* You can download the `.ps1` file that comes with this project, follow the third step below to exclude the unnecessary extension .\n* In the `extensions.ps1` file, each extension has a comment ., please delete the unnecessary . before executing the installation command\n\n\u003e method:\n\u003e\n\u003e 1. Access all the extensions of vscode on the current computer, the output is text . Enter the following command in the terminal (`powershell`):\n\u003e `code --list-extensions | ForEach-Object {\"code --install-extension $_\"} \u003e extensions.ps1`\n\u003e\n\u003e 2. 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) .\n\u003e\n\u003e 3. Enter the following command in the terminal (`powershell`) of the new computer:\n\u003e `./extensions.ps1`\n\u003e\n\u003e 4. download complete\n\u003e \u003cimg src=\"https://user-images.githubusercontent.com/63782903/226086537-1dddd375-3206-44db-8208-17715d70c744.png\" width=\"60%\"\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eFind Missing Extensions\u003c/summary\u003e\n\n* [`extensions-compare`](./extensions_compare/)\n\n* Compare two `.ps` files to find **differences** between two extension records .\n\n* Usage (choose one of the following):\n    * `compare.py`\n         run `Python` script .\n\n        \u003cimg src=\"img/2023-04-19-11-06-37.png\"\u003e\n    * `compare.sh`\n         runs `./extensions_compare/compare.sh` etc . on `git bash, wsl, or linux`\n\n        \u003cimg src=\"img/2023-04-19-11-07-16.png\"\u003e\n\u003c/details\u003e\n\n### :star: Quickly download multiple extensions (for new version vscode)\n\nJust click the `Profile`, then you can import or export the extensions.\n\n\u003cimg src='img/2023-07-07-21-22-20.png' width='60%' /\u003e\n\n---\n\n## :snowflake:Transparent editor\nThe transparency effect is amazing.\n\nIt can be used as a lazy tool (code while watching the video~) .\n\nYou can use your own desktop background while coding and watching **Gura** .\n\n### GlassIt-VSC\n\n\u003e Usage:\n`ctrl+alt+z`: desaturation (transparency)\n`ctrl+alt+c`: increase saturation (opacity)\n\n\u003cimg src=\"img/2023-03-20-20-35-03.png\" width=\"60%\"\u003e\n\n\u003ca href=\"#top\"\u003eBack to top\u003c/a\u003e\n\n---\n\n## :purple_heart:Theme\n\nThe 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:\n\nNext, 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)\n\noh! Wait a minute, here is a quick way to switch themes . After all, you may want to change themes every day~~\n\n\u003e Quick switch theme\n\u003e\n\u003e \"ctrl+shift+p\": Open vscode command input box\n\u003e\n\u003e \"Preferences:Color Theme\": Enter and choose the theme you want\n\n### Arc Dark for Visual Studio Code\n* 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.\n\n\u003cimg src=\"img/2023-03-25-16-10-51.png\" width=\"60%\"\u003e\n\n### ButterTheme\n* As the name suggests, this is an eye-catching *milk yellow* theme\n* A very rare theme (to put it bluntly, not many people use it), but the author likes it very much\n* If you can't find this theme, \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=Levampire.Buttur\" target=\"_blank\"\u003elink\u003c/a\u003e\n\n\u003cimg src=\"img/2023-03-17-14-36-15.png\" width=\"60%\"\u003e\n\n### Coder200\n* This time I don't know ... just by looking at the name\n* Rare theme, full of *orange*, so sexy~:flushed:\n\n\u003cimg src=\"img/2023-03-17-14-44-30.png\" width=\"60%\"\u003e\n\n\n### doom-emacs-theme\n* Simple style\n\n\u003cimage src=\"https://user-images.githubusercontent.com/63782903/232356902-fc57dbc3-f650-4c41-b5a6-f33497954cc7.png\" width=\"60%\" /\u003e\n\n### Dracula Official\n*very famous, *pink* and *purple* vampire colors\n\n\u003cimg src=\"img/2023-03-17-14-51-36.png\" width=\"60%\"\u003e\n\n### Github Theme\n* One of the classic themes that cannot be ignored\n\n\u003cimg src=\"img/2023-06-06-15-03-29.png\" width=\"60%\"\u003e\n\n### Hydra Theme for VS-Code\n* Black and red theme, exuding a strong sense of high-tech aesthetics.\n  \n\u003cimg src=\"img/2023-08-16-15-20-03.png\" width=\"60%\"\u003e\n\n### LaserWave\n* A *purple pink* theme with a sunset feel\n\n\u003cimg src=\"img/2023-03-17-20-17-56.png\" width=\"60%\"\u003e\n\n### Moegi Theme\n* Gentle and charming theme\n\n\u003cimg src=\"img/2023-03-17-20-20-13.png\" width=\"60%\"\u003e\n\n### Material Dark\n* One of the classic themes that cannot be ignored\n\n\u003cimg src=\"img/2023-03-17-20-37-24.png\" width=\"60%\"\u003e\n\n### One Dark Pro\n* One of the classic themes that cannot be ignored\n\n\u003cimg src=\"img/2023-03-17-20-36-31.png\" width=\"60%\"\u003e\n\n### Panda Theme\n* *Lake Green* :panda_face: Top notch themes:\n* This theme is really cool!\n\n\u003cimg src=\"img/2023-03-17-20-21-23.png\" width=\"60%\"\u003e\n\n### Simple Dark\n* The background is very dark, the text color will not be too dazzling\n\n\u003cimg src=\"img/2023-03-17-20-23-37.png\" width=\"60%\"\u003e\n\n### Skyline\n* Blue lovers must use it :blue_heart:\n\n\u003cimg src=\"img/2023-03-17-20-25-15.png\" width=\"60%\"\u003e\n\n### SynthWave '84\n* Super high-tech, dazzling fluorescent theme: emoji_sunglasses:\n* Remember to turn on the fluorescent effect after selecting the theme (you can also match it with other theme colors: emoji_emoji_fu :)\n\n\u003e Enable fluorescence mode:\n\u003e\n\u003e 1. \"ctrl+shift+p\": Open the VS Code command input box\n\u003e\n\u003e 2. \"Synthwave '84: Enable/Disable Neon Dreams\": Enable/Disable Neon Dreams (see picture)\n\u003e\n\u003e 3. \"Restart\": Restart VS Code\n\n\u003cimg src=\"img/2023-03-17-20-28-44.png\" width=\"60%\"\u003e\n\n\u003cimg src=\"img/2023-03-17-20-27-06.png\" width=\"60%\"\u003e\n\n### Tearz\n* A bit similar to the previously launched Moe Wood theme\n*But this *purple* really attracts the author~\n\n\u003cimg src=\"img/2023-03-17-20-33-32.png\" width=\"60%\"\u003e\n\n### Vuesion Theme\n* Simple pink, looks very comfortable\n\n\u003cimg src=\"img/2023-05-18-14-20-10.png\" width=\"60%\"\u003e\n\n### Xcode Theme\n* One of the classic themes that cannot be ignored\n\n\u003cimg src=\"img/2023-03-17-20-35-39.png\" width=\"60%\"\u003e\n\n\u003ca href=\"#top\"\u003eBack to top\u003c/a\u003e\n\n---\n## :yellow_heart: Beautifying editor and editing environment\nAfter finishing the decoration, our editor will introduce the plug-ins that can not only increase the aesthetic feeling, but also improve work efficiency~\n\n### Color Highlight\n* If you are a **front-end** engineer or **data analyst**, and often need to do **visual** work, be sure to download this!\n* 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) .\n\n\u003cimg src=\"img/2023-03-17-20-48-11.png\" width=\"60%\"\u003e\n\n### Material Theme Icons\n* Different file extensions have different icons\n* Not only looks good but can find files faster.\n\n\u003cimg src=\"img/2023-03-17-20-51-07.png\" width=\"60%\"\u003e\n\n### vscode-icons\n* Slightly different from Material theme icons\n* The author prefers to use this~\n\n\u003cimg src=\"img/2023-03-17-20-53-26.png\" width=\"60%\"\u003e\n\n\u003ca href=\"#top\"\u003eBack to top\u003c/a\u003e\n\n---\n## :green_heart: Must-have, highly recommended\nThe plugins to be introduced below are really easy to use!\n\nMost of them can improve development efficiency, don't miss: emoji_heart_eyes:\n\n### autoDocstring - Python Docstring Generator\n* This plugin was introduced by . for Python developers\n* Use shortcut keys to quickly generate **Docstring** style comments .\n* Describe the purpose, parameters, return value and other information of the function.\n* Support different **Docstring** styles, such as google, sphinx, numpy, etc. . .\n\n\u003e How to use: Press the key below where you want to generate comments\nWindows: `ctrl+shift+2`\nMac: `cmd+shift+2`\n\n\u003cimg src=\"img/2023-03-17-21-07-10.png\" width=\"60%\"\u003e\n\n### Code Runner\n* I believe that friends who have used VSCode should be familiar with this plugin! ?\n* Allow VSCode to execute the program with one click .\n* Support multiple languages, such as C, C++, Java, JavaScript, PHP, Python, Perl...etc.\n\n\u003cimg src=\"img/2023-03-17-20-59-33.png\" width=\"60%\"\u003e\n\n### Comment Divider\n* Use shortcut keys to generate beautiful **comment styles** .\n* As shown in the figure below, you can see two styles: `Shift+Alt+x` and `Alt+x`.\n\n\u003cimg src=\"img/2023-03-17-21-03-04.png\" width=\"60%\"\u003e\n\n### Draw.io Integration\n* Flow chart drawing tool\n* When designing a project, you can use this plugin to plan the feasibility .\n* Can be used as a note taking tool .\n* Support many common modes, such as Google cloud platform representative function symbol (as shown in the figure).\n\n\u003cimg src=\"img/2023-03-17-21-14-00.png\" width=\"60%\"\u003e\n\n### Isort\n* This is intended for use by Python developers.\n* Automatically formats imports.\n* After downloading, add the following code to `settings.json`:\n\n    ```\n    \"isort.args\":[\"--profile\", \"black\"]\n    ```\n\n* Next, open `Keyboard Shortcuts` and set a shortcut (the author has bound it to `F12`):\n\n  \u003cimg src=\"img/2023-08-16-15-25-55.png\" width=\"60%\"\u003e\n\n* Use the shortcut `F12` to automatically format Python imports.\n\n\u003cimg src=\"img/2023-08-16-15-27-41.png\" width=\"60%\"\u003e\n\n### Path Intellisense\n* It's really cool to have this plugin when coding :kissing_heart:\n* Coder suitable for frequently reading and writing files .\n* When writing the path, it will automatically list the files under the path you want to find .\n\n\u003cimg src=\"img/2023-03-17-21-17-09.png\" width=\"60%\"\u003e\n\n\u003ca href=\"#top\"\u003eBack to top\u003c/a\u003e\n\n---\n\n## :star2:Big data, AI engineer - Jupyter (Python)\nThe plugins presented here are really powerful!\n\nThe author knows that many people who use Python are not used to using vscode for many reasons:\n* Interactive mode\n* View variable data type and variable value (just like in Spyder, Pycharm)\n* Execute the code line by line, and execute part of the code (really very practical, better than Debug~:heart_eyes:)\n\nThe plugin provides the following features:\n* :pushpin:**interactive mode**\n* :pushpin:** View variable data type and variable value** (such as Spyder, Pycharm)\n* :pushpin: **Execute code line by line** and **Execute part of code** (really useful, better than debugging~:heart_eyes :)\n\n\u003e If you can understand Chinese, it is recommended to spend 5 minutes to quickly learn how to use the Jupyter plug-in (see \u003ca href=\"https://www.bilibili.com/video/BV1Bg411J78F/\" target=\"_blank\" \u003elink\u003c/a\u003e)\n\n\u003e Usage:\n\u003e\n\u003e :bulb: Download the following plug-ins (some may not be used, forget it~)\n\u003e\n\u003e `Jupyter`, `Jupyter keymap`, `Jupyter slide show`, `Jupyter cell tag`, `Jupyter notebook renderes`, `vs code jupyter notebook previewer`\n\u003e\n\u003e\u003cimg src=\"img/2023-03-17-21-50-07.png\" width=\"40%\"\u003e\n\n\u003e :bulb:**Execute code in interactive mode**\n\u003e\n\u003e 1. right click . in script\n\u003e 2. select `Run Current File in Interactive Window`\n(It is recommended to set a VS Code shortcut key, I set it to `F10`).\n\u003e 3 . `Interactive` window will appear after execution of .\n\u003e\n\u003e\u003cimg src=\"img/2023-03-17-21-54-03.png\" width=\"40%\"\u003e\n\u003e\u003cimg src=\"img/2023-03-17-21-57-03.png\" width=\"40%\"\u003e\n\n\u003e :bulb:**View variable data type and variable value** (need to be in interactive mode)\n\u003e\n\u003e Click *Variables*. in the interactive window\n\u003e\n\u003e\u003cimg src=\"img/2023-03-20-13-17.PNG\" width=\"60%\"\u003e\n\n\u003e :bulb: **Execute line by line or partly**\n\u003e\n\u003e 1. Select the code to execute (can be one or more lines) .\n\u003e 2. right click on selected code .\n\u003e 3 . SELECT * run select/row in interactive window * .\n\u003e\n\u003e\u003cimg src=\"img/2023-03-17-22-04-33.png\" width=\"60%\"\u003e\n\n\u003ca href=\"#top\"\u003eBack to top\u003c/a\u003e\n\n---\n\n## :wave:Git、Markdown Support\nThe plugins described below are essential for developers working on Github or Gitlab projects .\n\n### GitLens\n* After downloading, the script code will show **which** parts were **modified**, **who** made the changes, **when** the . was modified\n* 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) .\n* Remember to track the project with `git` for this plugin to work .\n\n\u003cimg src=\"img/2023-03-17-22-08-15.png\" width=\"60%\"\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eMore for GitLens\u003c/summary\u003e\n\n* Compare two commits with detailed **differences**\n    * `COMMITS`: Select the commit to compare with HEAD (step1~2)\n    * `SEARCH \u0026 COMPARE`: select changed files (step 3)\n    * `diff`: correct file is HEAD (step 4)\n\n        \u003cimg src=\"img/git_diff.PNG\" width=\"60%\" /\u003e\n\n\u003c/details\u003e\n\n### Markdown All in One\n* Using Markdown syntax in the vscode editor.\n* It provides automatic generation of table of contents.\n* It offers special shortcuts for Markdown, such as using `Ctrl+B` for bold formatting.\n\n\u003cimg src='img/2023-06-27-20-42-05.png' width='60%' /\u003e\n\n### Markdown Preview Enhanced\n* When writing `.md` file, you can preview the result .\n* Press `ctrl+k`, then `v` to open preview window .\n* The middle of the figure below is the `.md` file, and the right is the preview window .\n\n\n\u003cimg src=\"img/2023-03-17-22-15-20.png\" width=\"60%\"\u003e\n\n### Paste Image\n* Paste images directly from the clipboard into markdown/asciidoc (or other files)!\n* Usage\n    * screenshot to clipboard\n    * Use default keybindings: `Ctrl+Alt+V` (`Cmd+Alt+V` on Mac).\n    * images will be saved in the folder containing the currently edited file\n    * Relative paths will be pasted to the current edited file\n\n* You can configure `imagePath` in settings.\n\n    \u003cimg src=\"img/2023-05-27-15-53-03.png\" width=\"60%\" /\u003e\n\n\u003ca href=\"#top\"\u003eBack to top\u003c/a\u003e\n\n\n---\n\n## :computer: Remote WSL \u0026 Dev Container\n\n### Remote WSL\n* vscode will open . in `Windows Subsystem Linux` environment\n* You can edit files in `WSL` environment in vscode editor without using `vim` or `nano`.\n\n\u003e Usage:\n\u003e 1. `ctrl+shift+p`: open command panel .\n\u003e 2 . `WSL: New WSL Window`: Open `WSL` environment in vscode .\n\n\u003cimg src=\"img/2023-03-20-11-47-42.png\" width=\"60%\"\u003e\n\n### Dev-Container\n* Using `Docker`, the entire development environment inside vscode can run in the container, including editing, terminal, debugging, executing .\n\n* `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 .\n\n\u003cimg src=\"img/2023-03-20-11-48-43.png\" width=\"60%\"\u003e\n\n\u003ca href=\"#top\"\u003eBack to top\u003c/a\u003e\n\n---\n\n## :computer: Remote-SSL\n\nThe 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:\n* Develop on the same operating system you deploy to or use larger, faster, or more specialized hardware than your local machine.\n* Quickly swap between different, remote development environments and safely make updates without worrying about impacting your local machine.\n* Access an existing development environment from multiple machines or locations.\nDebug an application running somewhere else such as a customer site or in the cloud.\n\n\u003cimg src='img/2023-06-27-20-45-53.png' width='60%' /\u003e\n\n* 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:\n\n    ```\n    \u003cHost\u003e \u003cHostname\u003e\n    ```\n\n\n\nNext, let's take an example of connecting VS Code to Colab:\n\n#### Connect VSCode to Colab\n\nPlease refer to the official documentation for instructions:\n\nhttps://colab.research.google.com/github/JayThibs/jacques-blog/blob/master/_notebooks/2021-09-27-connect-to-colab-from-local-vscode.ipynb\n\nRemeber you only need to perform steps 6, 8, 9, and 10 once\n\n\n1. Open Colab.\n\n2. Execute the following code to connect to Google Drive. You will see your Drive file manager appear next to Colab.\n    \n    ```python\n    from google.colab import drive\n    drive.mount(\"/content/drive\")\n    ```\n\n3. Create a file named `config.env` in your Google Drive, for example:\n   \n   ```\n   # /content/drive/MyDrive/Colab/config.env\n   PASSWORD=1234567\n   ```\n\n4. Read the `config.env` file in Google Drive to obtain the password needed for SSH later.\n   \n   ```python\n   # !pip install python-dotenv --quiet\n    import dotenv\n    import os\n\n    dotenv.load_dotenv(\n            os.path.join('/content/drive/MyDrive/Colab/', 'config.env')\n    )\n    password = os.getenv('PASSWORD')\n   ```\n\n5. Perform SSH using Cloudflared to obtain the remote host (URL that will be used later).\n   \n   ```python\n    # Install colab_ssh on google colab\n    # !pip install colab_ssh --upgrade --quiet\n    from colab_ssh import launch_ssh_cloudflared, init_git_cloudflared\n    launch_ssh_cloudflared(password)\n   ```\n\n    \u003cimg src='img/2023-06-27-21-06-42.png' width='60%' /\u003e\n\n6. Download Cloudflared to any location on your local machine. [link](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation/)\n   \n7. Install the `Remote-SSH` extension in VS Code.\n\n8. Use the VS Code command `Ctrl+Shift+P` and enter `remote-ssh: connect to host`.\n\n9.  Select `configure ssh hosts` then `c:\\users\u003cname\u003e.ssh\\config`.\n\n10. Paste the following code, making sure to fill in the path with the location where Cloudflared was downloaded!\n\n    ```\n    Host *.trycloudflare.com\n        HostName %h\n        User root\n        Port 22\n        ProxyCommand \u003cPUT_THE_ABSOLUTE_CLOUDFLARE_PATH_HERE\u003e access ssh --hostname %h\n    ```    \n\n11. Use the VS Code command `Ctrl+Shift+P` and enter `remote-ssh: connect to host`.\n12. Select `add new ssh host` and enter the URL from step 5.\n13. Enter the password from `config.env`.\n\n14. After creating new vscode window, choose the OS System.\n\n15. Finished!\n\n\u003ca href=\"#top\"\u003eBack to top\u003c/a\u003e\n\n---\n\n## :wrench:Fixer (Fix Vscode Corrupt)\nSometimes, when uninstalling the plugin, the following error message will appear in the lower right corner of the VS Code window:\n\n\u003cimg src=\"https://user-images.githubusercontent.com/63782903/231321298-916da9d3-0e90-4bd5-bfc6-859371545ec7.png\" width=\"40%\" /\u003e\n\nYou can solve this problem with:\n\n\u003e Usage:\n\u003e 1. Download Fix VSCode Checksum Plugin .\n\u003e 2. `ctrl+shift+p`: Open command palette .\n\u003e 3. `Fix ChecksumS: Apply`: perform repair .\n\u003e 4. `ctrl+shift+p`: Open command palette .\n\u003e 5. `Developer: Reload Window`: restart VS Code.\n\n\u003cimg src=\"img/2023-03-17-21-36-48.png\" width=\"60%\"\u003e\n\n\n\u003ca href=\"#top\"\u003eBack to top\u003c/a\u003e\n\n## :rocket: Copilot\nAI-assisted development tools similar to ChatGPT make everyone faster in the development process\n\n### Codeium\n* Completely **FREE** to use!\n*Comparison of functions with ChatGPT and Copilot\n* With this tool, you can:\n    * Automatic code generation\n    * automatically generates comments, `Docstring`\n    * automatically generates `Annotation hint`\n    * improve code quality\n\n    \u003cimg src=\"img/2023-06-02-11-36-02.png\" width=\"40%\" /\u003e\n\n* Instructions\n    * Click `Refactor` of the code block\n\n        \u003cimg src=\"img/2023-06-02-11-35-37.png\" width=\"60%\" /\u003e\n\n    * Select the processing you want, eg: `Add comments and docstrings to the code`\n\n        \u003cimg src=\"img/2023-06-06-15-00-52.png\" width=\"50%\" /\u003e\n\n    * generate `Codeium` chat blocks\n\n        \u003cimg src=\"img/2023-06-06-15-05-18.png\" width=\"40%\" /\u003e\n\n    * code extraction is complete!\n\n\u003ca href=\"#top\"\u003eBack to top\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flin-jun-xiang%2Fawesome-vscode-extensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flin-jun-xiang%2Fawesome-vscode-extensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flin-jun-xiang%2Fawesome-vscode-extensions/lists"}