코딩 스트레스를 확 줄여주는 필수 VS Code 설정 5가지

VS Code는 훌륭한 코드 편집기입니다. 하지만 몇 가지 기본 설정은 대부분의 개발자에게 최적화되어 있지 않다는 사실을 깨닫는 순간이 옵니다. 저는 VS Code 설정을 하나씩 조정하며, 코딩 중 발생하는 불편함을 줄이고 더 세련된 편집기로 만드는 방법을 찾아봤습니다. 설정에 걸리는 시간은 단 10분 정도입니다. 한 번만 적용해두면 VS Code가 더 빠르고, 더 차분하며, 훨씬 더 믿음직하게 느껴질 것입니다.

이 글을 따라 하려면 VS Code의 설정 파일인 settings.json을 수정해야 합니다. Windows에서는 Ctrl+Shift+P, Mac에서는 Cmd+Shift+P를 눌러 명령 팔레트(Command Palette)를 연 뒤 검색창에 "JSON"을 입력하고 "Preferences: Open User Settings (JSON)"을 클릭하세요. 이후 소개하는 모든 JSON 코드는 이 파일의 중괄호 { } 안에 붙여 넣으면 됩니다.

1. 자동 저장(Auto Save)

한 줄 입력할 때마다 저장 단축키를 누를 필요가 없습니다

코딩 스트레스를 확 줄여주는 필수 VS Code 설정 5가지

몇 초마다 Ctrl+S를 누르고 있다면 당신만 그런 것이 아닙니다. 어느새 몸에 배어버린 습관이죠. 하지만 이 역시 불필요한 반복 작업일 뿐입니다. 자동 저장 기능은 이런 수고를 완전히 없애줍니다.

"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000

이제 타이핑을 잠시 멈출 때마다 파일이 자동으로 저장됩니다. 사소해 보이지만 코딩하는 느낌 자체가 달라집니다.

저도 규모가 큰 코드베이스에서 파일 저장을 깜빡한 적이 있습니다. 새로 작성한 코드가 테스트에서 계속 실패해서 온갖 방법으로 문제를 해결하려 했는데, 알고 보니 원인은 저장하지 않은 파일이었습니다. 그때 자동 저장이 얼마나 유용한지 절실히 깨달았죠.

조금 더 직접적인 제어를 선호한다면 아래 설정을 사용할 수도 있습니다.

"files.autoSave": "onFocusChange"

이 설정은 탭을 전환하거나 에디터를 벗어날 때 파일을 저장합니다. 실행 타이밍이 중요한 스크립트나 작업을 다룰 때 특히 유용합니다.

2. 저장 시 자동 포맷(Format on Save)

깔끔한 코드가 저절로 완성됩니다

코딩 스트레스를 확 줄여주는 필수 VS Code 설정 5가지

정돈되지 않은 코드 포맷팅은 신경 쓰이지만 매번 고치자니 귀찮은 대표적인 요소입니다. 바로 이럴 때 format on save(저장 시 자동 포맷)가 빛을 발합니다.

"editor.formatOnSave": true

이제 파일을 저장할 때마다 VS Code가 자동으로 포맷을 맞춰줍니다. 들여쓰기, 간격, 정렬까지 스스로 정리되죠. 특히 들여쓰기가 어긋나면 읽기 어려워지는 HTML 페이지 작업 시 큰 도움이 됩니다. 일일이 손으로 고치는 건 시간 낭비일 뿐입니다.

프론트엔드 개발을 한다면 Prettier 사용을 강력히 추천합니다. Prettier를 기본 포매터로 지정하려면 다음과 같이 설정하세요.

"[javascript]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
}

자동 포맷팅 덕분에 스타일을 신경 쓸 필요 없이 일관된 코드를 작성할 수 있습니다. 이제 코드 스타일에 대한 고민은 완전히 내려놔도 됩니다.

3. 워드 래핑(Word Wrap)

더 이상 좌우로 화면을 스크롤하지 마세요

코딩 스트레스를 확 줄여주는 필수 VS Code 설정 5가지

가로 스크롤은 집중력을 가장 빠르게 무너뜨리는 요소 중 하나입니다. 긴 코드 줄을 따라 읽다가 화면 밖으로 내용이 사라지면, 스크롤바를 좌우로 끌면서 흐름을 다시 맞춰야 하죠.

그냥 워드 래핑을 켜두세요.

"editor.wordWrap": "on"

긴 줄이 에디터 창 안에서 자연스럽게 줄바꿈되어 JSON, 로그, 마크다운, JSX 같은 파일을 훨씬 읽기 쉽게 만들어 줍니다. 더 이상 긴 줄을 읽으려고 마우스에 손을 뻗을 필요가 없습니다. 항상 켜두고 싶지 않다면 Alt+Z로 언제든 빠르게 켜고 끌 수 있습니다.

4. 시각적 노이즈 줄이기

코딩 스트레스를 확 줄여주는 필수 VS Code 설정 5가지

VS Code는 미니맵(minimap), 브레드크럼(breadcrumbs), 인라인 힌트 등 각종 정보를 화면에 꽉 채워 보여주려 합니다. 하지만 정보가 많다고 항상 좋은 것은 아니며, 때로는 그저 방해 요소일 뿐입니다. 에디터가 복잡해 보인다면 몇 가지 기능을 꺼보세요.

"editor.minimap.enabled": false,
"breadcrumbs.enabled": false,
"editor.inlayHints.enabled": "off"

이렇게 하면 인터페이스에서 정말 중요한 것, 즉 에디터와 코드만 남게 됩니다. 미니멀한 환경을 선호한다면 게임 체인저가 될 수 있는 설정입니다.

물론 이 부분은 취향의 영역입니다. 미니맵이나 브레드크럼을 사랑하는 사람도 있죠. 하지만 한 번도 의심해본 적이 없다면, 한 번쯤 더 깔끔한 환경을 경험해보길 추천합니다. 생각보다 상쾌함을 느낄 수 있을 겁니다.

5. IntelliSense 제어

자동 완성을 덜 거슬리게 만들기

코딩 스트레스를 확 줄여주는 필수 VS Code 설정 5가지

자동 완성은 분명 유용하지만, 과하면 독이 됩니다. 기본 설정의 VS Code는 다소 과열되어 문자열을 입력하거나 주석을 작성하거나 잠시 생각을 정리하는 순간에도 제안 목록이 나타납니다. 도움보다는 방해로 느껴질 때가 있죠.

다음 설정으로 빈도를 조절할 수 있습니다.

"editor.quickSuggestions": {
 "other": true,
 "comments": false,
 "strings": false
},
"editor.suggestOnTriggerCharacters": false

이렇게 하면 실제 코드처럼 자동 완성이 유용한 곳에는 제안이 유지되고, 주석이나 문자열처럼 방해가 되는 곳에서는 사라집니다. 결과적으로 자동 완성이 훨씬 의도적으로 동작하며, 정말 필요할 때만 나타나게 됩니다.

VS Code를 '나만의 에디터'로 만들기

위 설정들 하나하나가 혁신적인 것은 아닙니다. 원래부터 존재하던 기능들이죠. 하지만 함께 적용하면 놀랄 만큼 많은 불필요한 수고를 덜어줍니다. 흥미롭게도 VS Code에는 이 외에도 코딩을 더 즐겁게 만들고 개발 실력 향상에 도움을 주는 숨은 기능이 아직 많이 남아 있습니다.