Visual Studio Code

lastmod 2026-05-31created 2016-03-2358 edits

Visual Studio Code is a source code editor developed by Microsoft for Microsoft Windows, macOS, and Linux. It includes debugging support, Git control, syntax highlighting, and more, and users can modify the editor's theme, keyboard shortcuts, settings, and so on.

Visual Studio Code runs on the Electron framework developed by GitHub. However, it is not a fork of Atom, another Electron-based editor; it was developed based on the Visual Studio Online editor (codename "Monaco").

Categories

• Debug Adapter Protocol (DAP)
• Language Server Protocol (LSP)
• OmniSharp
• Monaco Editor - the underlying web editor

Plugins

• Material Theme
• Material icon
• Prettier
• Bracket Pair Colorizer
• Indent Rainbow
• Auto Rename Tag
• CSS Peek
• HTML CSS suppport
• Live server
• Mark down Preview
• Emmet
• OmniSharp
• Visual Studio Live Share (pair programming)
• VS Code Debug Visualizer
• SuperDesign - an AI design agent used inside the IDE

Debugging

Docker node.js debugging

First, add a Docker container for debugging.

#!/usr/bin/env bash

PUBLISH_PORT=3000
INSPECT_PORT=9229
echo "Publish web: http://localhost:$PUBLISH_PORT/"
echo "Inspect port: $INSPECT_PORT"

docker run --rm -it \
    -v $PWD:/cycloud-admin \
    -w /cycloud-admin \
    -p $PUBLISH_PORT:3000 \
    -p $INSPECT_PORT:9229 \
    node:8.11 \
    node --inspect=0.0.0.0:9229 app.js
CODE=$?

echo "Done ($CODE)."

Add the following to the .vscode/launch.json file.

{
    // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
    // 기존 특성에 대한 설명을 보려면 가리킵니다.
    // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Docker: Attach to Node",
            "port": 9229,
            "address": "localhost",
            "localRoot": "${workspaceFolder}",
            "remoteRoot": "/cycloud-admin",
            "protocol": "inspector"
        }
    ]
}

Keyboard Shortcut

Open the keybinding settings JSON

• Stackoverflow - Is there a quick change tabs function in Visual Studio Code?

To achieve this in Visual Studio Code, you have to edit keybindings.json. Use the Command Palette with CTRL+SHIFT+P, enter "Preferences: Open Keyboard Shortcuts (JSON)", and hit Enter.

Tab switching settings

[
    {
        "key": "shift+alt+[",
        "command": "workbench.action.previousEditor"
    },
    {
        "key": "shift+alt+]",
        "command": "workbench.action.nextEditor"
    }
]

Settings

The settings.json file is located in the following places.

• Workspace: .vscode/settings.json
• User:
  • MacOS: ~/Library/Application Support/Code/User/settings.json
  • Windows:
  • Linux:

In the command palette (Ctrl + Shift + P), type > Preferences: Open User Settings (JSON). The UI mode can be opened directly with the Ctrl + , shortcut)

Default settings file locations

• ~/.config/Code
• ~/.vscode

Recommended settings

• Text Editor
  • Font
    • Font Size: 14 -> 12 (on Ubuntu)

Disable automatic bracket insertion

"editor.autoClosingBrackets": "never"

Editor Settings

Render whitespace characters

"editor.renderWhitespace": "all"

Disable auto-closing brackets

"editor.autoClosingBrackets": "never"

Default font size

"editor.fontSize": 12

Vim

Bind the documentation shortcut (K) to show a preview popup

• visual studio code - Command-hover tooltip in VSCode VIM without using mouse - Stack Overflow

    "vim.normalModeKeyBindings": [
        {
          "before": ["K"],
          "commands": [
            {
                "command": "editor.action.showDefinitionPreviewHover"
            }
          ]
        }
    ]

References Code Lens

If the reference counts shown in the image above bother you, go to the Extensions > C# configuration item on the Settings screen and set the Csharp > References Code Lens item to Disable.

Disabling annoying features of VSCode and popular extensions

• VSCode config to disable popular extensions' annoyances (telemetry, notifications, welcome pages, etc.)

A settings.jsonc file that removes all the useless features of VSCode itself and various extensions

• Showing welcome pages/walkthroughs
• Showing release notes
• Sending telemetry
• Features that recommend things

{
    "clangd.checkUpdates": false,
    "code-runner.enableAppInsights": false,
    "docker-explorer.enableTelemetry": false,
    "extensions.ignoreRecommendations": true,
    "gitlens.showWelcomeOnInstall": false,
    "gitlens.showWhatsNewAfterUpgrades": false,
    "java.help.firstView": "none",
    "java.help.showReleaseNotes": false,
    "julia.enableTelemetry": false,
    "kite.showWelcomeNotificationOnStartup": false,
    "liveServer.settings.donotShowInfoMsg": true,
    "Lua.telemetry.enable": false,
    "material-icon-theme.showWelcomeMessage": false,
    "pros.showWelcomeOnStartup": false,
    "pros.useGoogleAnalytics": false,
    "redhat.telemetry.enabled": false,
    "rpcServer.showStartupMessage": false,
    "shellcheck.disableVersionCheck": true,
    "sonarlint.disableTelemetry": true,
    "telemetry.enableCrashReporter": false,
    "telemetry.enableTelemetry": false,
    "telemetry.telemetryLevel": "off",
    "terraform.telemetry.enabled": false,
    "update.showReleaseNotes": false,
    "vsicons.dontShowNewVersionMessage": true,
    "workbench.welcomePage.walkthroughs.openOnInstall": false
}

Formatting

Add per-language formatter settings to settings.json as follows.

{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

The above applies Prettier.

Launch

Edit the .vscode/launch.json file in the workspace.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
     {
        "type": "firefox",
        "request": "launch",
        "name": "[Debug] Vue.js: firefox",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
      }
    ]
}

Troubleshooting

.NETFramework not found in macOS

See OmniSharp#.NETFramework not found in macOS.

Enable press and hold on macOS

• Stackoverflow - How do I press and hold a key and have it repeat in VSCode?

To disable the Apple press and hold for VSCode only, run this command in a terminal:

$ defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false

Then restart VSCode.

To re-enable, run this command in a terminal:

$ defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool true

ArchLinux C# development environment

Installing from the default repository of ArchLinux gives you the OSS version. If you instead install the Microsoft distribution (visual-studio-code-bin) from the AUR, things like OmniSharp get installed as shown below.

Installing C# dependencies...
Platform: linux, x86_64, name=arch, version=unknown

Downloading package 'OmniSharp for Linux (x64)' (47313 KB).................... Done!
Validating download...
Integrity Check succeeded.
Installing package 'OmniSharp for Linux (x64)'

Downloading package '.NET Core Debugger (linux / x64)' (55714 KB).................... Done!
Validating download...
Integrity Check succeeded.
Installing package '.NET Core Debugger (linux / x64)'

Downloading package 'Razor Language Server (Linux / x64)' (53267 KB).................... Done!
Installing package 'Razor Language Server (Linux / x64)'

Finished

=== .NETFramework,Version=v4.7.2 were not found === See OmniSharp#.NETFramework,Version=v4.7.2 were not found.

See also

• Visual Studio
• code-server
• xtermjs
• Atom
• Zed
• Daytona - open-source development environment manager
• Gitpod - an open-source remote development platform.
• CodeCafé - an open-source editor for collaborative coding in the browser
• IntelliSense
• Coder - Secure environments for developers and their agents

Favorite site

• Visual Studio Code web site
  • Visual Studio Code web site (kor)
  • VS Code Remote Development
• MS open-sources ‘Visual Studio Code’
• Github: VS Code Tips and Tricks
• [Recommended] Debug - Visual Studio Code tutorial

Basic

• VSCode configuration and basic usage

Online Tools

• https://vscode.dev/