- 현재 Java 개발로는 IntelliJ IDEA, JavaScript 개발은 VSCode를 사용하고 있습니다.
- VSCode를 사용하면서 유용한 단축키 및 환경설정, 플러그인(Plug-in)들은 이후 로컬 환경이 변했을 때도 그대로 유지 및 기억해 두기 위해 따로 정리하고자 합니다.
- 해당 포스팅은 현재 Windows 기준으로 작성되었습니다.
1. 환경 설정(Environment settings)
1-1. Editor : Wordwrap Off
(1) Wordwrap 속성을 끄게 되면 코드 라인이 스크롤을 넘어 길어지더라도 한 화면에 모두 표시되지 않고 스크롤을 움직여야 볼 수 있습니다.
(2) 디폴트 값으로는 해당 속성이 OFF로 되어 있지만 모든 화면에서 소스 코드 라인 전체를 보고 싶으시다면 ON으로 설정하시면 됩니다.
(3) 설정 경로 : File → Preference → Settings → wordwrap 검색 → Edit : Word Wrap 영역 ON 또는 OFF
1-2. Mouse wheel로 Font Size 제어
(1) 해당 설정을 통해 Ctrl + Mouse Wheel 조합으로 Code Font size를 조절할 수 있습니다.
(2) 설정 경로 : File → Preference → Settings → wheel 검색 → Editor : Mouse Wheel Zoom Check 또는 Uncheck
2. 플러그인(Plug-in)
2-1. One Dark Pro, Red One Dark Pro
(1) One Dark Pro, Red One Dark Pro의 경우 VSCode의 전역적인 테마를 변경할 수 있는 플러그인입니다.
(2) 저는 이 2개의 테마가 코드의 가독성이 좋고 테마의 색상이 전체적으로 안정적이라고 생각해서 사용하는 테마 플러그인입니다.
(3) 이외에도 여러 가지 테마가 존재하니 Market place에서 테마들을 한 번 찾아보셔도 됩니다.
(4) 설정 경로 : Ctrl + Shift + X 또는 좌측 메뉴의 Extend : Market place → One Dark Pro 또는 Red One Dark Pro 검색 후 설치하여 테마 적용
(5) One Dark Pro 테마 적용
(6) Red One Dark Pro 테마 적용
2-2. 탐색기 파일 리스트들의 아이콘 변경하기 : Material Icon Theme
(1) 탐색기에 존재하는 파일들의 아이콘에 테마를 주는 플러그인입니다.
(2) 설정 경로 : Ctrl + Shift + X 또는 좌측 메뉴의 Extend : Market place → Material Icon Theme 검색 후 설치하여 테마 적용
(3) Material Icon Theme 플러그인 적용 시 탐색기의 파일 아이콘들이 확장자 유형에 맞게 좀 더 직관적으로 바뀐 것을 확인할 수 있습니다.
2-3. Code indent : indent-rainbow
(1) 코드 라인이 들여쓰기될 때 색상을 부여해 들여쓰기(indent) 가독성을 향상시켜주는 플러그인입니다.
(2) 설정 경로 : Ctrl + Shift + X 또는 좌측 메뉴의 Extend : Market place → indent rainbow 검색 후 설치하여 테마 적용
(3) 테마 적용 이후
2-4. Terminal 영역 테마 적용하기
(1) Windows 기준으로 Ctrl + Shift + P 단축키를 통해 Settings.json을 입력해서 사용자 설정 JSON 파일을 열 수 있습니다.
(2) 터미널에 테마를 적용시키기 위해 JSON 파일에 "workbench.colorCustomizations" 항목을 추가해야 합니다.
(3) 아래의 URL로 접속하여 원하는 테마를 선택한 뒤, Copy to clipboard 버튼으로 관련 코드를 복사합니다.
URL : https://glitchbone.github.io/vscode-base16-term/#/
Base16 Terminal Colors for Visual Studio Code
glitchbone.github.io
(4) 복사한 속성 코드를 settings.json 파일에 추가합니다. 저는 3024 테마를 사용하고 있으므로 해당 테마의 JSON 속성을 Copy to clipboard 버튼을 통해 복사해서 settings.json 파일에 다음과 같은 속성을 추가하였습니다.
"workbench.colorCustomizations": {
"terminal.background": "#090300",
"terminal.foreground": "#A5A2A2",
"terminalCursor.background": "#A5A2A2",
"terminalCursor.foreground": "#A5A2A2",
"terminal.ansiBlack": "#090300",
"terminal.ansiBlue": "#01A0E4",
"terminal.ansiBrightBlack": "#5C5855",
"terminal.ansiBrightBlue": "#01A0E4",
"terminal.ansiBrightCyan": "#B5E4F4",
"terminal.ansiBrightGreen": "#01A252",
"terminal.ansiBrightMagenta": "#A16A94",
"terminal.ansiBrightRed": "#DB2D20",
"terminal.ansiBrightWhite": "#F7F7F7",
"terminal.ansiBrightYellow": "#FDED02",
"terminal.ansiCyan": "#B5E4F4",
"terminal.ansiGreen": "#01A252",
"terminal.ansiMagenta": "#A16A94",
"terminal.ansiRed": "#DB2D20",
"terminal.ansiWhite": "#A5A2A2",
"terminal.ansiYellow": "#FDED02"
}
(5) settings.json 파일의 변경사항을 저장하면 터미널 테마가 변경된 것을 확인할 수 있습니다.
- 이후에 추가적으로 학습한 유용한 단축키 및 환경설정, 플러그인이 있다면, 해당 포스팅을 지속적으로 업데이트하여 수정하겠습니다.
댓글