VS Code, vscode

vscode.md

awesome-vscode - A curated list of delightful VS Code packages and resources.

Extensions

REST Client - REST Client allows you to send HTTP request and view the response in Visual Studio Code directly

PlantUML - Rich PlantUML support for Visual Studio Codehttps://github.com/EliverLara/Andromeda

vscode-drawio - This extension integrates Draw.io into VS Code

foam - A personal knowledge management and sharing system for VSCode

vscode-essentials - Turn VSCode into a supercharged IDE

Bookmarks - Bookmarks Extension for Visual Studio Code

vscode-numbered-bookmarks - Numbered Bookmarks Extension for Visual Studio Code

Vim Cheatsheet - VS Code extension that lets you open a vim cheatsheet directly in the editor to expand your vim vocabulary github

peacock - Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.

vscode-openapi - VisualStudio Code OpenAPI tools

Development

New Relic CodeStream - New Relic CodeStream is a developer collaboration platform that integrates essential dev tools into VS Code. Eliminate context-switching and simplify code discussion and code review by putting collaboration tools in your IDE. github

Mintlify Doc Writer - Writing documentation sucks. Let Mintlify take care of it. Just hightlight code and see the magic. github

Python

autoDocstring - Python Docstring Generator - Visual Studio Code extension to quickly generate docstrings for python functions. github

Python code snippets - This extension contains code snippets for Python for Visual Studio Code. Most of the shortcuts were selected from other more popular libraries. Main part of snippets.json was generated automaticaly base on https://github.com/honza/vim-snippets.

Python Environment Manager - A Visual Studio Code extension that provides the ability to via and manage all of your Python environments & packages from a single place.

Python Indent - Correct Python indentation in Visual Studio Code.

Database

database-client - Database Client For Visual Studio Code

sqltools - Database management for VSCode. Connection explorer, query runner, intellisense, bookmarks, query history.

Text

LTeX - LanguageTool grammar/spell checking. The difference to regular spell checkers is that LTEX not only detects spelling errors, but also many grammar and stylistic errors.

LaTeX Workshop - Visual Studio Code LaTeX Workshop Extension

Markdown All in One - All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more).github

Autocomplete

Visual Studio IntelliCode - The Visual Studio IntelliCode extension provides AI-assisted productivity features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

Kite - AI-powered programming assistant

Remote

Live Share - Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you're using or app types you're building. github

Linters

SonarLint - helps you detect and fix quality issues as you write code

Frontend

Live Server - Launch a development local Server with live reload feature for static & dynamic pages github

HTML CSS Support - Visual Studio Code CSS Intellisense for HTML github

Preview.js - preview React, Preact, Solid, Svelte, Vue components and Storybook stories instantly in your IDE.

Version Control

GitLens - Supercharge Git inside VS Code and unlock untapped knowledge within each repository github

gitHistoryVSCode - Git History for Visual Studio Code github

Tutorials

vscode-tips-and-tricks - Collection of helpful tips and tricks for VS Code

Themes

Andromeda marketplace, github

Bio Dark marketplace, github

Mayukai marketplace, github

Dainty marketplace, github

Ayu marketplace, github

Ayu Adaptive marketplace Dark theme

Bio Dark marketplace

Braver's Solarized marketplace

Calmness Theme Color marketplace

Cobalt2 Theme Official marketplace

Dainty is a color theme generator marketplace

Plastic marketplace

Palenight marketplace

Night Owl marketplace, github

Nord marketplace

Noctis marketplace

One Dark Bimbo marketplace, github

Pale Fire marketplace, github

Panda marketplace

Rigel marketplace, github

Seoul marketplace, github

Sonokai marketplace

Edge marketplace

Forest Night marketplace

Gruvebox Material marketplace

Plain - minimalisic monohrome theme markplace, github

Solarized marketplace, github

Sublime Material marketplace, github

Vitesse marketplace, github

VS Code Zenburn Theme marketplace

Zenburn+ Dark Theme marketplace, github

Dark

1337 marketplace, github

Alabaster Dark Theme marketplace, github

Bluloco Dark marketplace, github

City Lights marketplace, github

Darcula Extra marketplace, github

Darcula marketplace, github

Darcula python marketplace, github

Darcula Theme marketplace, github

Darcula Theme - WebStorm Edition marketplace, github

Dracula Official marketplace, github

DesertDawn marketplace, github

Henna marketplace, github

Karma marketplace, github

Monokai Pro marketplace, github

Niketa Theme Dark marketplace, github

One Monokai marketplace, github

Palenight Theme marketplice, github

Ra Nature marketplace, github

Rubber github

Solarized Dark Grey marketplace, github

subliminal marketplace, github - An opinionated minimalistic VS Code theme for JavaScript

Substrata marketplace, github

Zeus-Sublime-Text marketplace, github

Light

Atom One Light Theme marketplace, github

Alabaster github

Best Light Themes Pack marketplace, github

Blue Light Theme marketplace, github

Bluloco Light marketplace, github

Brackets Light Pro marketplace, github

Daobeam marketplace, github

Github Light Theme marketplace, github

Jo's Light Theme marketplace

Monokai Light marketplace

Niketa light themes marketplace, github

Nord Light marketplace, github

Quiet Light marketplace, github

Ra Autumn Light marketplace, github

Ra Spring marketplace, github

Ra Summer marketplace, github

Relax Eyes marketplace, github

Solarized Autumn marketplace, github

Solarized Espresso Soda marketplace, github

Squirrelsong Light Theme marketplace, github

Svelte Color Theme marketplace, github

Ysgrifennwr marketplace, github

Zeppelin themes marketplace

Light/Dark

catppuccin marketplace, github

Community Material Theme marketplace, github

Eva Theme marketplace, github

Malibu marketplace, github

Settings

Speed-Up

You could prevent vscode from watching folders with really many files in you project by adding this to your json settings file

"files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/node_modules/**": true,
    "**/.venv/**/*": true,
    "**/.venv/*/**": true
} 

profile-the-running-extensions

Pytest configuration

Add following lines to the settings.json

{
    "python.testing.pytestArgs": [
        "--rootdir", "${workspaceFolder}/tests/unit"
    ],
    "python.testing.unittestEnabled": false,
    "python.testing.pytestEnabled": true,
    "python.testing.cwd":  "${workspaceFolder}/tests/unit",
}

Vertical rulers in Visual Studio Code

stackoverflow

Vertical rulers are configured by editing settings.json.

Snippets

"[git-commit]": {"editor.rulers": [50]},
"[python]": {
    "editor.rulers": [
        79,
        120
    ]
}

"editor.rulers": [
  {
    "column": 80,
    "color": "#ff00FF"
  },
  100,  // <- a ruler in the default color or as customized (with "editorRuler.foreground") at column 100
  {
    "column": 120,
    "color": "#ff0000"
  },
]

To change the default color for a ruler:

"workbench.colorCustomizations": {

  "editorRuler.foreground": "#fffa"   
            // or "#ffffffaa" - the a's are alpha transparency values

"editor.rulers": [
    {"column":   0, "color": "#5a5a5a80"}, // left boundary is 50% opaque
    {"column":   2, "color": "#5a5a5a20"}, // tab stops are 12.5% opaque
    {"column":   4, "color": "#5a5a5a20"},
    {"column":   6, "color": "#5a5a5a20"},
    {"column":   8, "color": "#5a5a5a20"},
    {"column":  10, "color": "#5a5a5a20"},
    {"column":  40, "color": "#5a5a5a20"}, // center line
    {"column":  79, "color": "#5a5a5a20"}, // right rule minus one
    {"column":  80, "color": "#5a5a5a80"}, // right rule
    {"column": 120, "color": "#5a5a5a40"}  // extra right rule

{
    "editor.formatOnSave": true,
    "editor.autoIndent": "advanced",
    "editor.detectIndentation": true,
    "files.insertFinalNewline": true,
    "files.trimTrailingWhitespace": true,
    "editor.formatOnPaste": true,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.snippetSuggestions": "top",
    "editor.rulers": [
        {
            "column": 79,
            "color": "#424142"
        },
        100, // <- a ruler in the default color or as customized at column 0
        {
            "column": 120,
            "color": "#ff0000"
        },
    ],

}

Customizing VS Code's Char-len Ruler

The following answer is far more recent than the other answers provided for this question, therefore; it is important to note that this answer contains information & content not provided by any of the other answers. I have formatted the question below into 4 configurations. Each configuration builds on top of the last configuration, consequently; The first configuration is simple, and offers a simple result, whereas the last configuration is more complex and offers much more.

For your convenience, I have included images at the bottom of each configuration's example. The images allow you to view a configuration, then see the result that the configuration has. This is important, because without the images you would have to bounce back and forth between here & your editor to see what each configuration looks like.

Config 1 | The Obvious Single Ruler Config

The obvious setting is the setting that has been suggested many times over. I will mention it here, just because it is the correct place to start.

Add the following JSON Property to your settings.json file.

{
    "editor.rulers": [80]
}

PLEASE NOTE! It may be required that you reload the instance of VS Code (semantically speaking: some refer to this as reloading the window) being configured to get the newly added configuration to render as expected. (to see how to reload your window quickly, scroll to the end of this answer).

Once the configuration takes, your editor should look like this:
Image demonstrates the result when the editor.ruler setting in VS Code is configured with a single value

Config 2 | Multiple Rulers

Obviously the ruler takes an array as its assigned value. The array allows VSC users to add multiple rulers.

Be simply adding one value to the configuration in the last example (as shown in the snippet below) we can add another ruler.

{
    "editor.rulers": [80, 125]
}

The screen shot I took is a bit short, but it communicates the point well enough. You can see that there are now two vertical lines, rather than a single line. Many front-end developers opt for this configuration because 125 is often used as the preferred line-length for HTML, and 80 is the preferred line-length for JavaScript embedded in HTML documents.

Image demonstrates the result when the editor.ruler setting in VS Code is configured with more than one value

Config 3 | Coloring the Ruler

This configuration demonstrates the whimsy side of playing with VS Code's configuration; and the ruler is certainly one of the more whimsical editor-features that VS Code ships with. This configuration shows you how to color the configuration we used above. To be able to custom color the rulers, it is required that an additional setting be added to the configuration, take a look below:

{
    "workbench.colorCustomizations": {
        "editor-ruler.foreground": "#0099AA"
    },

    "editor.rulers": [80, 125]
}

Below you can see the awesomeness of the pacific blue color!

Config 4 | Coloring the Ruler so it works w/ Code

So, as awesome as beautiful pacific-blue rulers are, they are not always practical. The opaque — and in this case highly contrasted — rulers streak right behind are code which can greatly decrease the readability of your code. For this very reason, developers generally opt for a configuration that places a single ruler at the desired line length, however, there is another way. By adjusting the previous configuration ever so slightly, we can render the rulers in a way that is much less intrusive. Take a look at the configuration below.

Do you see the subtle change?

{
    "workbench.colorCustomizations": {
        "editor-ruler.foreground": "#0099AA33"
    },

    "editor.rulers": [80, 125]
}

Below demonstrates where the change was made:

Color used in the 3rd configuration:
"editor-ruler.foreground": "#0099AA"
Color used in the 4th configuration:
"editor-ruler.foreground": "#0099AA33"

The new configuration's adjusted chromatic value (the color/hue) renders transparently (or not at 100% opacity), in-other-words; the rulers are rendered to be partially transparent (approximately 25% transparency).

The change has a rather significant effect because opaque rulers hinder readability, and can distract the programmer from her code. A programmer may opt for transparent rulers because transparent rulers will allow her to measure the length of her code at any length intervals she chooses, without hindering the readability of the code.

See the transparent rulers below? You might want to click on the image to see the larger view.

Config 5 | The Ultimate Customized Ruler

The problem with transparent rulers is that they are not quite as fancy as the other rulers, fortunately, there's a way to get the best of both worlds. This example uses two images (or screen-shots): One image that shows the configuration, just like the other images you have been viewing above, and the other is a final image showing the configuration I use. The configuration I use is shown as a way to help put into perspective what you're able to accomplish with a good ruler configuration.

Below is a crazy sort of configuration...

{
    "workbench.colorCustomizations": {
        "editorRuler.foreground": "#00999922"
    },

    "editor.rulers": [
        20, 40, 40, 60, 60, 60, 60, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80
    ]
}

I KNOW CRAZY RIGHT?!

This configuration, looks nutter-butter, but it actually produces a very interesting, and highly customized sort of result. I really like this example because it offers a great demonstration of how the ruler array-property configuration works, and what can be accomplished with it.

Here is the result:

Notice what is happening?

Each ruler is brighter than the last. The rulers are doing this because we are laying several transparent rulers over each other. With ever layer the rulers color becomes more saturated. This is an extremely fun effect to play with.

Like I said above, I will show you I use this effect to configure my environment:
Customized rulers in a customized environment

Note that I make all of the rulers very transparent except for the last two. This offers a snazy environment, while still keeping things practical. Having several rulers also helps me to format and organize my code. I am so use to having them now that I can hardly stand to work in an environment without them.

If I work on a project with a style-guide that enforces an 80 character limit, I often will place one line at 80, and another at 90. I write my code such that it breaks before, or at, 80 chars, however I don't like the 80 char limit personally, I feel that the standard should be 85 - 90 chars. 80 really makes developers feel like there pushed into a box. So if I don't like the way a line looks at 80, I will extend it to 90. Before I commit, I look at the file and I can quickly see everywhere I went over 80, I add line-breaks, the commit. then I use ctrl+z to reset the line breaks so the extend past 80.

Another purpose, Is when I comment, I prefer to end my comments at 70, it helps me visually distinguish between comments and code. When you have the extra lines, there is a good chance you'll start using them to do all sorts of your own little formatting customs.

The resource below only pertains to those who are in need of instruction on reloading there instance of VS Code.

RELOADING YOUR WINDOW IN VS CODE

To reload your window, press F1 to open the Quick-input Menu. You should see the menu drop open, type Developer: Reload Window, then select the Developer: Reload Window option from the drop-down menu.

VisualStudio Coe How-To

Multi-root Workspaces

Python testing in Visual Studio Code

How do I hide certain files from the sidebar in Visual Studio Code?

Different theme per window in Visual Studio Code

1. Open a new VSCode window.
2. Open the project folder where you would like to have a different color theme.
3. Navigate to File > Preferences > Settings.
4. Select the "Workspace Settings" tab at the top of the settings screen. Anything you edit in here will now be specific to this workspace.
5. Search for "colorTheme" and select the color theme you would like for this specific workspace.

Different theme per window in Visual Studio Code

1. Press ctrl + , from the keyboard.
2. This will take you to the settings tab.
3. Click on the Workspace Tab
4. Type Theme in the search field.
5. Your will see - Workbench: Color Theme
6. Select the theme you want.

or

1. make a folder in your project with .vscode

2. make a file with the name of settings.json inside the folder.

3. simply copy paste or write the following code. with the theme name { "workbench.colorTheme": "GitHub Dark" }

Different theme per window in Visual Studio Code