INTRO
LG CNS AM Inspire Camp 과정에 참여하면서 학습용 개인 노트북을 지급받았다.
프론트엔드 개발자라서 그런지 기본 세팅 UI가 맘에 들지 않아서 세팅을 조금 변경했다.
그래서 간단하게 현재 내가 적용하고 있는 세팅을 공유해보려고 한다.
1. 테마 적용
우선 테마부터 적용해보자
1. Extension 접근
우선 다음 사진과 같이 VSCode 좌측에 있는 Extension 탭에 들어가자.
- 해당 탭에 접근하면 VSCode에 여러가지 확장 파일을 적용할 수 있게 된다.
- VSCode에서 사용하는 테마도 여기서 다운로드 받을 수 있다.
2. Theme 검색
사진처럼 원하는 Theme를 검색한다
- 다음으로 내가 적용하고 싶은 Theme를 검색한다.
- 따로 생각한게 없다면 Theme를 검색하고 하나씩 눌러보면 적용된 테마 예시를 확인할 수 있으니 확인해보고 적용하자
3. Theme Install
원하는 테마를 찾았다면 Install 하자
- 테마를 설치하면 자동적으로 적용된다.
[참고] Theme 변경
ctrl+shift+P를 누르고 사진과 같이 Theme를 입력한다.그 다음 Color Theme를 클릭하면 변경가능한 테마들을 확인할 수 있다.
2. Code Formatter (Prettier) 적용
JS 기반 언어로 코드를 작성할 때, 생산성을 빠르게 높여주는 Code Formatter를 적용해보자
(개인적으로는 필수라고 생각한다!)
1. Prettier Extension 설치
이전에 봤던 Extension으로 접근해서 사진과 같이 "prettier"를 검색한다.
- 다음으로 Install까지 진행하자
2. Setting (1)
다음으로 설치한 prettier가 코드를 저장할 때마다 동작하도록 추가 설정이 필요하다.
Window 기준으로ctrl+,단축키를 눌러서 환경설정 창으로 들어가서 "on save"를 검색한다.
- 사진처럼 Format On Save를 체크하자
3. Setting (2)
동일한 Setting창에서 "default formatter"를 검색하자
다음으로는 사진과 같이 Default Formatter를 Prettier로 변경한다.
기본 세팅에서 위처럼 설정하면 설치하면 Formatter가 제대로 동작할 것이다 (아마도..?)
3. 폰트 설정
다음으로는 폰트 설정이다. 필자는 JetBrains Mono를 사용하고 있다.
각자 적용하길 원하는 폰트를 PC에 다운로드를 해야한다.
1. 설치된 폰트 확인
Window 기준으로
제어판 - 모양 및 개인 설정 - 글꼴경로로 접근하면 설치된 폰트를 확인할 수 있다.
경험상 JetBrainsMono-Bold 하나만 설치하면 적용되지 않고 모든 폰트를 설치해야 적용이 된다!
2. Setting - (1)
이전에는 Setting창으로 들어갔지만 이번에는 settings.json으로 접근해서 직접 수정해보자
Window 기준으로ctrl+shift+p단축키를 입력하고 "settings.json"을 검색하자
3. Setting - (2)
다음으로 fontFamily 설정을 변경해주자
- 여기서 JetBrains Mono가 제대로 설치되지 않았다면 D2Coding 폰트가 적용된다.
- 만약, D2Coding 폰트가 없다면 monospace가 적용되는 식으로 동작한다.
"editor.fontFamily": "JetBrains Mono, 'D2Coding', monospace",
- D2Coding도 따로 설치를 해야 적용되는 폰트이다. (기본 한글 폰트가 별로다)
(D2Coding 폰트 다운로드 주소)[참고] 글자 간격 수정
위 사진과 같이 letterSpacing을 수정하면서 글자간 간격을 조정할 수 있으니 원하는 세팅을 찾아보는걸 추천한다!
"editor.letterSpacing": -0.9
OUTRO
자동 줄바꿈이 안되는 문제 떄문에 시작했던건데 VSCode 꾸미기가 되어버렸다..
간단하게 Prettier만 적용해도 생산성은 많이 올라갈 것 같으니 안했다면 적용해보자
코린이가 아니신듯합니당! 잘부탁드려요!