Visual Studio Code
다른 의미는 (동음이의어) Code 참조 |
비주얼 스튜디오 코드(영어: Visual Studio Code)는 마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기이다. 디버깅 지원과 Git 제어, 구문 강조 기능등이 포함되어 있으며, 사용자가 편집기의 테마와 단축키, 설정 등을 수정할 수 있다.
비주얼 스튜디오 코드는 깃허브가 개발한 일렉트론 프레임워크를 기반으로 구동된다. 그러나 같은 일렉트론 기반의 편집기 아톰을 포크한 것은 아니며, 비주얼 스튜디오 온라인 에디터(코드명 "모나코")를 기반으로 개발되었다.
Categories
- Debug Adapter Protocol (DAP)
- Language Server Protocol (LSP)
- OmniSharp
- Monaco 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
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:
- MacOS:
명령 팔레트(Ctrl + Shift + P)에서 > Preferences: Open User Settings (JSON)
라고 입력하면 된다. UI 모드는 Ctrl + , 숏컷으로 바로 진입 가능)
설정 파일 기본 위치
-
~/.config/Code
-
~/.vscode
추천 설정
- Text Editor
- Font
- Font Size:
14-> 12 (on Ubuntu)
- Font Size:
- Font
자동 브라켓(Brackets) 삽입 끄기
Editor Settings
공백 문자 그리기
자동 닫기 브라켓 끄기
기본 폰트 크기
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:
Then restart VSCode.
To re-enable, run this command in a terminal:
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
- Visual Studio
- code-server
- xtermjs
- Atom
- Zed
- Daytona - 오픈소스 개발환경 관리자
- Gitpod - 오픈소스 원격 개발 플랫폼이다.