VSCode Settings : Prettier formatter 코드 자동 정렬
"VSCode, 그냥 쓰기만 하시나요? 제대로 세팅하면 속도와 정확도가 달라집니다!"
안녕하세요, 개발자 여러분! 저는 최근에 팀 프로젝트를 진행하면서 코딩 생산성을 극적으로 높일 수 있는 방법을 찾게 됐어요. 바로 VSCode 설정을 커스터마이징한 덕분이었죠. 이 글에서는 제가 직접 사용한 settings.json 파일을 분석하면서, 왜 이런 설정들이 필요한지 하나하나 풀어볼게요. 특히 D2Coding 폰트, Prettier 포맷터, 그리고 Material Theme의 조합이 얼마나 작업 속도에 영향을 미치는지 실감하실 거예요.
개발자 감성 저격: 폰트와 테마 설정
코드를 얼마나 오래 보시나요? 하루 종일 모니터 앞에 앉아 있다 보면, 글자 하나하나가 눈에 박히죠. 그래서 D2Coding 폰트를 선택한 건 신의 한 수였어요. 가독성이 뛰어나고, 특히 한글과 영문이 함께 쓰일 때 균형감이 좋습니다. 거기에 Material Theme Darker를 입히면? 눈이 편안하면서도 감성적인 분위기를 즐길 수 있죠. 일할 맛 나는 화면, 생각보다 중요하답니다.
Prettier로 코드 스타일 자동화하기
여러분도 코드 정리할 때 손으로 들여쓰기 맞추시나요? 전에는 저도 그랬어요. 하지만 Prettier를 쓰고부터는 세상이 달라졌습니다. formatOnSave과 formatOnPaste를 true로 설정하면, 저장하거나 붙여넣을 때마다 자동으로 코드가 정렬돼요. 이게 진짜 깔끔 그 자체입니다.
| 설정 항목 |
설정값 |
설명 |
| prettier.singleQuote |
true |
작은 따옴표 사용 |
| prettier.trailingComma |
es5 |
가능한 곳에만 쉼표 추가 |
| prettier.tabWidth |
2 |
탭 간격을 2칸으로 |
언어별 포맷터 적용 전략
코드를 작성하는 언어가 다양해지면서, 포맷터도 그에 맞게 설정해야 하죠. 이 설정에서는 javascript는 Prettier, csharp은 ms-dotnettools.csharp 포맷터를 사용하도록 지정했어요.
- 언어별 확장 포맷터 설치
- 해당 언어에 맞는 formatter ID 지정
- 파일 저장 시 자동 포맷 설정
- 코드 일관성 확인 및 PR 전 리뷰 필수
작업 흐름을 바꾸는 기능들
VSCode에는 눈에 잘 띄지 않지만, 제대로 써먹으면 정말 유용한 기능들이 숨어 있어요. codeLens 같은 기능은 테스트 함수 위에 실행 버튼을 띄워주는 등, 일일이 명령어를 입력할 필요 없이 인터페이스에서 바로 실행하게 해주죠. 그리고 renderWhitespace: all을 켜두면 공백을 명확하게 인식할 수 있어서, 팀 단위 작업에서 특히 실수 방지에 도움이 됩니다.
터미널 설정과 윈도우 개발 환경 팁
윈도우 환경에서 터미널을 어떻게 설정하느냐에 따라 생산성이 크게 달라져요. 이 설정에서는 Command Prompt를 기본 터미널로 설정해두었지만, PowerShell이나 Git Bash로 바꾸는 것도 좋은 전략이에요.
| 터미널 옵션 |
설정값 |
특징 |
| Command Prompt |
기본값 |
간단하고 빠르지만 기능 제한 |
| PowerShell |
사용자 설정 가능 |
스크립트 작성과 관리에 유리 |
| Git Bash |
별도 설치 필요 |
유닉스 스타일 명령어 사용 가능 |
알아두면 쓸모있는 설정들
자잘하지만 은근히 도움 되는 설정들, 그냥 넘기지 마세요! 특히 git.autofetch처럼 자동으로 최신 커밋을 확인해주는 기능이나, statusBar.visible을 false로 설정해서 화면을 깔끔하게 만드는 것도 집중력 향상에 좋아요.
- git.autofetch: 원격 커밋 자동 가져오기
- workbench.statusBar.visible: 상태바 숨기기
- aicodehelper.language: GPT 인터페이스 한국어 지정
Q VSCode 설정은 어디에 저장되나요?
설정은 기본적으로 settings.json 파일에 저장되며, 경로는 Windows 기준 %APPDATA%\Code\User입니다.
Q Prettier 설정을 프로젝트마다 다르게 적용할 수 있나요?
네, 각 프로젝트 루트에 .prettierrc 파일을 두면 해당 설정이 우선 적용됩니다.
Q D2Coding 폰트는 어떻게 설치하나요?
D2Coding은 네이버 개발자 센터에서 다운로드 가능하며, 설치 후 VSCode 설정에서 폰트 이름을 추가하면 됩니다.
Q statusBar.visible을 false로 설정하면 뭐가 좋아요?
상태바를 숨기면 화면이 더 넓고 집중이 잘 돼요. 다만 정보 확인은 단축키로 해야 하니 익숙해지는 시간이 필요합니다.
Q AI Code Helper는 어떤 용도로 쓰이나요?
GPT 기반 코딩 보조 플러그인으로, 자동완성이나 주석 생성 등에 도움을 줍니다. 설정에서 키와 언어를 지정할 수 있어요.
Q whitespace 설정을 all로 하면 무슨 차이가 있나요?
공백, 탭, 줄바꿈 등 모든 공백이 시각적으로 표시돼서, 불필요한 스페이스를 쉽게 확인하고 수정할 수 있어요.
여기까지 읽어주셔서 정말 감사해요! VSCode 설정이라는 게 처음엔 살짝 귀찮고 복잡해 보일 수 있지만, 일단 한번 정리해 놓으면 그야말로 신세계가 열립니다. 저도 한동안 기본 설정만 쓰다가, 이번에 설정 파일을 직접 손보면서 생산성이 확 올라갔거든요. 여러분도 자신의 코딩 스타일에 맞게 하나하나 조정해보세요. 단순한 개발 툴이 아니라, 진짜 내 개발실력의 동반자가 되어줄 거예요. 혹시 궁금한 설정이 있다면 댓글로 남겨주세요. 같이 공부하면 더 재밌잖아요?
C:\Users\xxxx\AppData\Roaming\Code\User\settings.json
{
"editor.fontFamily": "D2Coding",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.tokenColorCustomizations": {
"comments": "#d39e9e"
},
"diffEditor.codeLens": true,
"editor.renderWhitespace": "all",
"workbench.colorTheme": "Material Theme Darker",
"workbench.iconTheme": "material-icon-theme",
"tabnine.experimentalAutoImports": true,
"json.schemas": [],
"git.autofetch": true,
"editor.codeLensFontFamily": "D2Coding",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"aicodehelper.gptkey": "****",
"[csharp]": {
"editor.defaultFormatter": "ms-dotnettools.csharp"
},
"aicodehelper.language": "korean",
"terminal.integrated.defaultProfile.windows": "Command Prompt",
"workbench.statusBar.visible": false,
"prettier.printWidth": 120,
"prettier.tabWidth": 2,
"prettier.singleQuote": true,
"prettier.semi": true,
"prettier.trailingComma": "es5",
"prettier.bracketSpacing": true,
"prettier.arrowParens": "always",
"prettier.useTabs": false,
"prettier.endOfLine": "lf",
"prettier.htmlWhitespaceSensitivity": "css",
"prettier.proseWrap": "preserve",
"prettier.quoteProps": "as-needed",
"prettier.embeddedLanguageFormatting": "auto"
}
E:\gitlab\Projects\UnivFISolution\.prettierrc
{
"printWidth": 120,
"tabWidth": 2,
"singleQuote": true,
"semi": true,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "always",
"useTabs": false,
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"proseWrap": "preserve",
"quoteProps": "as-needed",
"embeddedLanguageFormatting": "auto"
}