Skip to content

Visual Studio Code

다른 의미는 (동음이의어) Code 참조

비주얼 스튜디오 코드(영어: Visual Studio Code)는 마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기이다. 디버깅 지원과 Git 제어, 구문 강조 기능등이 포함되어 있으며, 사용자가 편집기의 테마와 단축키, 설정 등을 수정할 수 있다.

비주얼 스튜디오 코드는 깃허브가 개발한 일렉트론 프레임워크를 기반으로 구동된다. 그러나 같은 일렉트론 기반의 편집기 아톰을 포크한 것은 아니며, 비주얼 스튜디오 온라인 에디터(코드명 "모나코")를 기반으로 개발되었다.

Categories

Plugins

Debugging

Docker node.js debugging

우선 디버깅용 Docker 컨테이너를 추가한다. 

#!/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)."

.vscode/launch.json파일에 아래와 같이 추가하면 된다. 

{
    // 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

Brief

Command

MacOSX

Linux

Windows

파일 찾기

Command+P

명령 팔레트

Command+Shift+P

심볼 찾기

Command+Shift+O

자동 포맷팅

Alt+Shift+f

파일로 이동

Command+P

터미널 출력/감추기

Ctrl+`

파라미터 힌트 출력

Shift + Command + Space

Ctrl + Shift + Space

설정

Ctrl+,

키 바인딩 설정 JSON 열기

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.

탭 이동 설정 

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

Settings

settings.json파일은 아래의 위치에 존재한다.

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

명령 팔레트(Ctrl + Shift + P)에서 > Preferences: Open User Settings (JSON)라고 입력하면 된다. UI 모드는 Ctrl + , 숏컷으로 바로 진입 가능)

설정 파일 기본 위치

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

추천 설정

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

자동 브라켓(Brackets) 삽입 끄기 

"editor.autoClosingBrackets": "never"

Editor Settings

공백 문자 그리기 

"editor.renderWhitespace": "all"

자동 닫기 브라켓 끄기 

"editor.autoClosingBrackets": "never"

기본 폰트 크기 

"editor.fontSize": 12

Vim

문서 출력 숏컷(K)을 프리뷰 팝업 출력으로 바인딩 

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

References Code Lens

Vscode-cs-show-references_code_lens.png

위 그림과 같이 레퍼런스 개수가 보이는게 귀찮다면 Settings 화면, Extensions > C# configuration 항목에 들어가서 Csharp > References Code Lens 항목을 Disable 처리하면 된다.

VSCode 및 주요 확장들의 성가신 기능들 비활성화 하기

settings.jsonc 파일에 VSCode 본체 및 각종 확장들의 쓸데없는 기능들을 모두 제거

  • 웰컴 페이지/워크쓰루 보이기
  • 릴리즈 노트 표시
  • Telemetry 전송
  • 뭔가를 추천 하는 기능 
{
    "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

settings.json 설정에 언어별 포멧터 설정은 다음과 같이 추가하면 된다. 

{
    "[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"
    }
}

위 내용은 Prettier를 적용한 것이다.

Launch

Workspace 공간의 .vscode/launch.json파일을 수정하면 된다. 

{
    // 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

OmniSharp#.NETFramework not found in macOS 항목 참조.

macOS에서 길게 누르기 활성화

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# 개발환경

ArchLinux의 기본 Repository 에서 설치하면 OSS 버전으로 설치된다. 이 것 말고 AUR에 있는 Microsoft 배포 버전(visual-studio-code-bin)을 설치하면 아래와 같이 OmniSharp와 같은 것들이 설치된다. 

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 === OmniSharp#.NETFramework,Version=v4.7.2 were not found 항목 참조.

See also

Favorite site

Basic

Online Tools