본문 바로가기
카테고리 없음

개인저장용 개발환경 스타일 세팅 (Theme, Font 등 )

by 호야호잇 2024. 4. 18.

개요

개발환경의 스타일 일원화를 위한 세팅작업

- Theme : `Dark+`

- Font family : "'Cascadia Mono', D2Coding, Consolas, 'Courier New', monospace"

- Default font : `Cascadia Mono` (ligatures 제거 버전)

- Font size : VS2022(11), VSCode(15), Notepad++(11, Regular), Notepad(11, Regular)

  - Cascadia Mono가 표시 안되는 문제 : CMD(D2Coding, 16), PowerShell(D2Coding, 16)

- Font style : Regular (SemiLight도 괜찮은데 고해상도 모니터에서는 default설정인 Regular가 가독성이 더 높음)

 

Font

개발용 폰트 추천

- cascadia mono : MS에서 배포하는 무료 폰트. `cascadia code`에서 합자(ligatures)가 제외된 버전. 합자에 대한 호불호에 따라 code 또는 mono 버전 설치 (릴리즈 최신버전 zip파일 다운로드 후 ttf 폴더의 CascadiaMono 4종 우클릭 모든사용자용으로 설치)

- D2Coding : Naver에서 배포하는 무료 폰트.

- 압축해제후 우클릭 "모든 사용자용으로 설치"하거나 Winodws의 Fonts에 복사를 통해 설치

VSCode

- 설정 > Font Family(editor.fontFamily) > 'Cascadia Mono', D2Coding, Consolas, 'Courier New', monospace

- 우선순위에 따라 영문의 경우 Cascadia Mono, 한글의 경우 D2Coding이 적용됨

VS2022

- Tools > Options > Environment > Fonts and Colors > `Cascadia Mono` 선택

- FontFamily 미지원으로 한글에 D2Coding 미적용

Notepad++

- "Settings > Style Configurator > Language:Global Styles"의 Global override와 Default Style을 변경

  - Default Style : 모든 언어에 기본으로 적용될 기본 스타일 지정 : Cascadia Mono 11
  - Global override : 전역으로 덮어쓸 스타일 지정 (옵션들은 체크해제) : D2Coding 11

- FontFamily 미지원으로 한글에 D2Coding 미적용

CMD 및 PowerShell

- 타이틀바 우클릭 > 속성 > 폰트 설정

색상값 미세조정

- Notepad++, CMD 등에서 foreground font 밝기가 너무 밝아 눈이 피로할 수 있음. VSCode 또는 VS2022 색상값을 참조하여 색상조절.

  - VSCode/VS2022 기본 Text 색상코드 (dark theme 기준)

    - foreground #D4D4D4 (RGB : 212, 212, 212)

    - backgroud #1E1E1E (30, 30, 30)

    - contrast ratio 11.24

- Notepad++ 다크테마의 경우 plugin 사용시 개별세팅 잡아줘야하는 문제로 인해 default style로 원복 (귀차니즘)

 

Theme

개발용 테마 추천

- Dark+

- Goodnight

VSCode

- 기본적으로 다양한 테마 지원. 기본테마는 `Dark+`

- Visual Studio의 경우 Goodnight테마가 눈이 편한편

VS2022

- Tools > Theme > 테마 선택 (없을시 "Get More Themes"를 통해 설치)

- Visual Studio Theme Pack : Abyss, `Dark+`, Kimbie Dark, Light+, Monokai, Monokai Dimmed, Quiet Light, Red, Solarized Dark, Solarized Light, Tomorrow Night Blue 등 다양한 테마 지원

Notepad++

- 테마 다운로드 및 "%APPDATA%\Notepad++\themes" 폴더에 확장자가 xml로 되어있는 다운로드 받은 테마파일을 복사 후 프로그램 재시작. 이후 "Settings > Style Configurator"에서 해당테마 선택 및 font 설정

- 다크모드의 경우 "Settings > Preferences > Dark Mode > Enable dark mode"를 별도로 체크해줘야함

- VS2019-Dark-Npp : Visual Studio 2019 Dark Theme for Notepad++. Dark+와는 차이가 있어서 세세한 설정은 따로 잡아줘야함. 수동설정시 VSCode에서 "Developer: Inspect Editor Tokens and Scopes" 명령을 통해 색상값 확인 가능

- Notepad++ 다크테마의 경우 plugin 사용시 개별세팅 잡아줘야하는 문제로 인해 default style로 원복 (귀차니즘)

 

Cloud Sync

여러 디바이스에서 환경 동기화

VSCode

- 계정 로그인시 동기화 설정이 default

- 명령팔레트 > Settings Sync: Configure... > 동기화할 목록 체크 후 OK

VS2022

- 계정 로그인시 동기화 설정이 default

- Tools > Options > Environment > Accounts > "Synchronize Visual Studio settings across devices and installs on this machine" 체크

- Theme의 경우 미설치 상태면 설치전까진 적용안됨 (설치시 자동적용)

Notepad++

- 타 클라우드 서비스를 이용한 동기화

- Settings > Preferences > Cloud & Link > "Set your cloud location path here:" 체크

- 클라우드 서비스 폴더 지정(e.g. MS OneDrive, Google Drive, DropBox)

  - e.g. MS OneDrive의 경우 "%ONEDRIVE%" 아래에 환경설정을 저장해줄 sub폴더를 하나 만들어서 설정

 

References

https://github.com/microsoft/cascadia-code

 

GitHub - microsoft/cascadia-code: This is a fun, new monospaced font that includes programming ligatures and is designed to enha

This is a fun, new monospaced font that includes programming ligatures and is designed to enhance the modern look and feel of the Windows Terminal. - GitHub - microsoft/cascadia-code: This is a fun...

github.com

https://github.com/naver/d2codingfont

 

GitHub - naver/d2codingfont: D2 Coding 글꼴

D2 Coding 글꼴. Contribute to naver/d2codingfont development by creating an account on GitHub.

github.com

https://marketplace.visualstudio.com/items?itemName=idex.vsthemepack 

 

Visual Studio Theme Pack - Visual Studio Marketplace

Extension for Visual Studio - Collection of popular themes, now available for Visual Studio.

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=wuoyrd.goodnight

 

Goodnight Theme - Visual Studio Marketplace

Extension for Visual Studio - A dark theme for Visual Studio

marketplace.visualstudio.com

https://docs.microsoft.com/ko-kr/visualstudio/extensibility/ux-guidelines/color-value-reference-for-visual-studio?view=vs-2022

 

색 값 참조 - Visual Studio (Windows)

참조: 새 Visual Studio 색 토큰을 만들기 위한 16진수 코드

docs.microsoft.com

https://www.color-hex.com/

 

Color Hex Color Codes

Color Hex Color Codes Color-hex gives information about colors including color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page. Color-hex.com also generates a simple css code for the selecte

www.color-hex.com

 

출처: https://progrunman.tistory.com/40 [외장뇌모리:티스토리]