[devtool] Visual Studio Code(vscode) 초기 설정 및 팁
기본 설정
Suggestions 기능 설정 변경
Suggestions(IntelliSense)는 매우 좋은 기능이긴 하지만, 기본값 그대로 사용하기엔 약간 번거로운 면이 있다.
- Settingsctrl + ,에서 'Accept Suggestion On Commit Character'를 체크해제하면 세미콜론
;
이나 소괄호()
등의 입력에 반응하지 않는다. - Settingsctrl + ,에서 'Accept Suggestion On Enter'를
off
로 변경하면 오직 Tab키에 의해서만 추천단어가 선택된다. - 자동으로 나타나는 추천창이 귀찮으면 Show All Commandsctrl + shift + p에서 'Preferences: Open User Settings (JSON)' 입력 후 열리는 setting.json에 아래를 추가한다:
"editor.quickSuggestions": {
"other": false,
"comments": false,
"strings": false
}
타이틀에 파일 전체 경로 표시
Settingsctrl + ,에서 'window.title' 검색 후 입력란에 아래 추가:
${activeEditorLong}${separator}${rootName}
들여쓰기 설정 변경
Settingsctrl + ,에서 'indentation'검색 후:
Detect Indentation
은 체크 해제Insert Spaces
나Tab Size
는 취향껏…Editor: Auto Indent
는… 뭘로 바꾸긴 해야 하는데 일단Full
은 아님
파일 제외하기
Settingsctrl + ,에서 'exclude' 검색 후 추가하면 된다. Files: Exclude
는 Explorer에서 표시 제외, Search: Exclude
는 빠른 열기와 검색에서 제외임.
팁
코드 스니펫 추가하기
Show All Commandsctrl + shift + p에서 Snippets: Configure User Snippets
입력 후 원하는 영역(전역인지, 현재 파일 전용인지, 특정 언어 전용인지…)을 선택하면 json 파일이 하나 열리는데, 여기에 다음처럼 작성하면:
{
"console.log": {
"prefix": "cl",
"body": [
"console.log('${1:msg}:', $2);"
],
"description": "Log output to console"
}
}
prefix
'cl'에 자동 완성이 반응한다. 'console.log'는 자동 완성 창에 보여질 설명이다.
body
의 내용은 여러 줄일 수 있으며, $1
와 $2
는 탭으로 이동가능한 위치를 의미한다. 위에는 없지만 $0
이 있는데 이것은 탭으로 이동할 최종 위치다. 탭 이동 순서는 $1 > $2 > $0
순인데, 이럴 거면 그냥 3으로 하지 왜 0인지는 몲. ${1:msg}
에서 msg
는 문자 그대로 출력되는 일종의 placeholder다.
작성자 저장용 JavaScript User Snippet
{
"console.log": {
"prefix": "cl",
"body": [
"console.log(${1});"
],
"description": "Log output to console"
},
"console.log 2": {
"prefix": "cl2",
"body": [
"console.log('${1:selectme}:', ${2:selectme});"
],
"description": "Log output to console"
},
"console.debug": {
"prefix": "cd",
"body": [
"console.debug(${1});"
],
"description": "Log output to console"
},
"console.debug 2": {
"prefix": "cd2",
"body": [
"console.debug('${1:selectme}:', ${2:selectme});"
],
"description": "Log output to console"
},
"JS Doc: author and since": {
"prefix": "@auto",
"body": [
"@author fixalot",
"* @since $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE$1"
]
},
"current time": {
"prefix": "!now",
"body": [
"$CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND$1"
]
}
}
추천 확장 기능(플러그인)
- ESLint
dbaeumer.vscode-eslint
: JS 분석 도구. 문법 오류 검출 같은 기능이 있음. - Prettier - Code formatter
esbenp.prettier-vscode
: code formatter임. JS, JSON, CSS, HTML, Markdown 등을 지원 - change-case
wmaurer.change-case
- Java Server Pages (JSP)
pthorsson.vscode-jsp
- open in browser
techer.open-in-browser
- Open file
fr43nk.seito-openfile
- Bookmarks
alefragnani.bookmarks
- Auto Close Tag
formulahendry.auto-close-tag
- Go to Next/Previous Member
mishkinf.goto-next-previous-member
: 전과 후의 멤버(함수, 메서드, 프로퍼티, 지역변수 등)로 이동하는 기능을 추가한다. 윈도우일 경우 기본 단축키는 ctrl + 방향키 위/아래임. - Highlight Matching Tag
vincaslt.highlight-matching-tag
- Bracket Pair Colorizer 2
coenraads.bracket-pair-colorizer-2
- indent-rainbow
oderwat.indent-rainbow
- Remote - WSL
ms-vscode-remote.remote-wsl
: WSL을 사용한다면 필요한 플러그인. 요거 설치하면 WSL 내의 프로젝트를 VSCODE로 열 수 있음. - Naming-Shiba
fredkeemhaus.Naming-Shiba
: 한국어 문장을 영문변수명으로 바꿔주는 플러그인. 노매드코더 슬랙 참가자 중 한 명이 말듦. 단축키는 ctrl + shift + a와 ctrl + shift + s인데 다른 거랑 겹치니까 딴 걸로 바꿔야 함. - GitHub Copilot
github.copilot
: AI가 코드를 작성해주는 쩌는 플러그인. 단축키는 발동 alt + \ , 제안 선택 tab, 자동 완성 제안 창 보기 ctrl + enter, 코파일럿 빠른 채팅 열기 ctrl + shift + i, GitHub Copilot View 포커싱 alt + shift + p가 있다(마지막은 없어서 추가한 거). - Auto Import
steoates.autoimport
: import 구문을 자동으로 작성해주는 개꿀 익스텐션. - ERD Editor
dineug.vuerd-vscode
: 간단하게 쓸 수 있는 ERD 에디터. 컬럼 속성, 테이블 속성, 관계설정 등 필요한 건 다 있음
작성자 저장용 단축키 설정
Show All Commands에서 'Preferences: Open Keyboard Shortcuts (JSON)' 입력하면 keybindings.json이 열리는데, 내용을 아래처럼 변경한다:
[
{
"key": "ctrl+shift+d",
"command": "-workbench.view.debug"
},
{
"key": "ctrl+shift+d",
"command": "editor.action.deleteLines",
"when": "textInputFocus && !editorReadonly"
},
{
"key": "ctrl+shift+k",
"command": "-editor.action.deleteLines",
"when": "textInputFocus && !editorReadonly"
},
{
"key": "ctrl+k s",
"command": "-workbench.action.files.saveAll"
},
{
"key": "ctrl+shift+s",
"command": "-workbench.action.files.saveAs"
},
{
"key": "ctrl+shift+s",
"command": "workbench.action.files.saveAll"
},
{
"key": "ctrl+j",
"command": "-workbench.action.togglePanel"
},
{
"key": "ctrl+shift+j",
"command": "editor.action.joinLines"
},
{
"key": "ctrl+shift+down",
"command": "-cursorDownSelect",
"when": "textInputFocus"
},
{
"key": "ctrl+shift+up",
"command": "-cursorUpSelect",
"when": "textInputFocus"
},
{
"key": "ctrl+shift+down",
"command": "gotoNextPreviousMember.nextMember"
},
{
"key": "ctrl+down",
"command": "-gotoNextPreviousMember.nextMember"
},
{
"key": "ctrl+shift+up",
"command": "gotoNextPreviousMember.previousMember"
},
{
"key": "ctrl+up",
"command": "-gotoNextPreviousMember.previousMember"
},
{
"key": "ctrl+alt+o",
"command": "workbench.action.openWorkspace"
},
{
"key": "alt+oem_3",
"command": "workbench.action.compareEditor.focusOtherSide"
},
{
"key": "shift+alt+p",
"command": "workbench.panel.chat.view.copilot.focus"
},
{
"key": "ctrl+shift+oem_2",
"command": "editor.action.blockComment",
"when": "editorTextFocus && !editorReadonly"
},
{
"key": "shift+alt+a",
"command": "-editor.action.blockComment",
"when": "editorTextFocus && !editorReadonly"
}
]
oem_3
는 사용자의 키보드 레이아웃에 따라 다를 수 있는데 작성자의 경우 백틱`
에 해당함.
기본 단축키
파일 에디터
- ctrl + .: Quick Fix…
- ctrl + k, ctrl + q: Go to Last Edit Location
- ctrl + k, ctrl + i: Show Hover. documentation popup 띄우기(함수의 JS Doc 같은거 보기)
- f12: Go To Definition. 선언부로 이동
- shift + f12: Go To References. 함수 등을 참조하고 있는 코드로 이동(혹은 작은 팝업으로 보여줌)
- ctrl + shift + r: Refactor… 현재 캐럿이 위치에 따라 가능한 코드 리팩터링 옵션을 보여준다.
- ctrl + shift + left/right: 단어(words) 단위의 선택 영역을 좌우로 확장한다. 단어란 언더바
_
를 포함한 연속적인 단어 구성 문자를 의미한다. (abc, abcDef, ABC_DEF, …) - alt + shift + left/right: Expand/Shrink Selection. 단어보다 더 넓은 범위로 선택 영역을 확장하거나 좁힌다. (서브라임 텍스트에서는 보조 단어(subwords) 단위의 선택 영역을 좌우로 확장하는 단축키임)
멀티 캐럿
Add Selection
- ctrl + d: 선택한 단어와 동일한 다음 단어에 캐럿 추가
- ctrl + u: 캐럿 추가 되돌리기
- ctrl + alt + 방향키 위/아래: 위나 아래로 멀티 캐럿
- ctrl + shift + l: Select All Occurrences of Find Match. 현재 파일에서 선택한 단어와 같은 모든 단어에 멀티 캐럿
- alt + shift + i: add cursors to line ends 선택한 영역에서 각 라인마다 캐럿 분리
Code Folding
- ctrl + shift + [: Fold. 코드 접기
- ctrl + shift + ]: Unfold. 펼치기
- ctrl + k, ctrl + 0: Fold All. 모두 접기
- ctrl + k, ctrl + j: Unfold All. 모두 펼치기
그 외
- ctrl + k, m: Change Language Mode. Syntax 변경
- ctrl + k, ctrl + s: Open Keyboard Shortcuts 단축키 목록 열기
- shift + alt + .: Auto Fix… 에러가 발생했을 때 어떻게 수정할 지 선택지를 제시해 준다.
- ctrl + shift + space: Trigger Parameter Hints
- ctrl + m: Toggle Tab Key Moves Focus 탭 키의 들여쓰기/내어쓰기 기능을 비활성화하고 포커스 이동만 가능하도록 변환.