나는 원래 IntelliJ IDEA를 사용해왔었다.
그러다 개인 사정으로 VSCode를 사용하게 될 일이 있어서 요 근래 VSCode로 계속 코딩을 하다 보니 의외로 IDEA와 못지 않게 정말 좋은 IDE라고 생각이 든다. VSCode는 Editor 이지만 사용자가 어떻게 설정을 하느냐에 따라서 IDEA 못지 않은 훌륭한 개발툴이 될 수 있다고 생각한다.

VS Code에서 settings.json 파일은 개인화된 개발 환경을 구축하기 위한 가장 핵심적인 설정 파일이다. 테마 변경부터 자동 포매팅, 디버깅, 터미널 설정까지 폭넓게 활용되는 settings.json의 구조, 기능, 그리고 작성 방법을 심도 있게 살펴본다.

settings.json이란?

settings.json은 VS Code의 모든 설정을 관리하는 핵심 configuration 파일이다. 이 파일을 통해 에디터의 모든 측면을 사용자가 원하는 대로 커스터마이징할 수 있다.

설정 접근 방법

1. Ctrl + Shift + p
2. settings.json 입력 후 선택
   

기본 구조와 형식

settings.json은 JSON 형식을 따르며, 다음과 같은 기본 구조를 가진다.

{
  "설정.카테고리.속성": 값,
  "다른.설정.속성": 값
}

settings.json은 키와 값의 쌍으로 구성된다. 예를들어 폰트 크기 설정을 바꾸고 싶다면 다음과 같이 설정하면 된다.

{
  "editor.fontSize": 14
}

• "editor": VS Code 에디터 관련 카테고리
• "fontSize": 그 중 폰트 크기를 지정하는 속성

이렇게 세분화된 카테고리(editor, workbench, terminal, files, search 등)가 제공되며, 키워드 뒤에 .을 붙여 하위 설정을 체계적으로 관리한다.

주석은 두가지 방식으로 작성할 수 있다.

{
  // 한 줄 주석
  /*
  여러 줄
  주석
  */
}

주요 설정 살펴보기

나의 settings.json을 가지고 각 기능 별로 살펴보겠다.

테마 & UI 관련 설정

{
  // ===========================
  // =       THEME & UI       =
  // ===========================
  // ▶ VS Code 테마, 아이콘, UI 관련 설정
  //  - "workbench.colorTheme": 에디터 컬러 테마 지정
  //  - "workbench.editor.highlightModifiedTabs": 수정된 파일 탭 하이라이트
  //  - "workbench.colorCustomizations": 특정 색상 커스터마이징
  //  - "workbench.iconTheme": 파일 아이콘 테마 지정
  //  - "window.autoDetectHighContrast": 고대비 모드를 자동 감지할지 여부
  //  - "window.titleBarStyle": 타이틀 바 스타일(custom/native)
  //  - "editor.smoothScrolling": 에디터 스크롤 부드럽게
  //  - "editor.matchBrackets": 괄호 강조 스타일 설정
  //  - "editor.stablePeek": 피크 창(peek)의 위치 고정 여부
  //  - "editor.mouseWheelZoom": 마우스 휠+Ctrl로 폰트 사이즈 확대/축소
  //  - "editor.renderWhitespace": 공백 문자 표시 설정(none, boundary, all 등)
  "workbench.colorTheme": "Monokai Pro (Filter Spectrum)",
  "workbench.editor.highlightModifiedTabs": true,
  "workbench.colorCustomizations": {},
  "workbench.iconTheme": "material-icon-theme",
  "window.autoDetectHighContrast": false,
  "window.titleBarStyle": "native",
  "editor.smoothScrolling": true,
  "editor.matchBrackets": "near",
  "editor.stablePeek": false,
  "editor.mouseWheelZoom": true,
  "editor.renderWhitespace": "none",
}

에디터 동작 관련 설정

{
  // ============================
  // =      EDITOR SETTINGS     =
  // ============================
  // ▶ 에디터 동작 관련 설정
  //  - "editor.autoIndent": 자동 들여쓰기(advanced / full / none)
  //  - "editor.insertSpaces": Tab 키 입력 시 스페이스로 대체할지 여부
  //  - "editor.bracketPairColorization.enabled": 괄호 색상 매칭
  //  - "editor.guides.bracketPairs": 세로선 가이드 표시
  //  - "editor.guides.bracketPairsHorizontal": 수평선 가이드
  //  - "editor.guides.highlightActiveBracketPair": 현재 활성 괄호 가이드 강조
  "editor.autoIndent": "advanced",
  "editor.insertSpaces": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.guides.bracketPairsHorizontal": "active",
  "editor.guides.highlightActiveBracketPair": true,
}

폰트 설정

{
  // ============================
  // =      FONT SETTINGS       =
  // ============================
  // ▶ 폰트, 폰트 두께, 줄 간격 등 에디터 텍스트 렌더링 관련 설정
  //  - "editor.fontFamily": 폰트 패밀리 지정
  //  - "editor.fontLigatures": 합자(ligature) 사용 여부
  //  - "editor.fontSize": 폰트 크기
  //  - "editor.lineHeight": 줄 높이
  //  - "editor.fontWeight": 폰트 두께(400 ~ 900)
  //  - "editor.letterSpacing": 글자 간격(px)
  "editor.fontFamily": "Jetbrains Mono",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.5,
  "editor.fontWeight": "400",
  "editor.letterSpacing": 0,
}

터미널 설정

{
  // ============================
  // =   TERMINAL SETTINGS      =
  // ============================
  // ▶ 통합 터미널 프로필, 폰트, 기본 프로필 설정
  //  - "terminal.integrated.profiles.windows": 윈도우에서 사용할 터미널 프로필들
  //  - "terminal.integrated.defaultProfile.windows": 기본 터미널 프로필 지정
  //  - "terminal.integrated.fontFamily": 통합 터미널 폰트
  "terminal.integrated.profiles.windows": {
    "Cmder": {
      "path": "${env:windir}\\System32\\cmd.exe",
      "args": ["/k", "C:\\cmder\\vendor\\bin\\vscode_init.cmd"]
    }
  },
  "terminal.integrated.defaultProfile.windows": "Cmder",
  "terminal.integrated.fontFamily": "Jetbrains Mono",
}

파일/검색 제외 설정

{
  // =====================================
  // =   FILE EXCLUSION & SEARCH SETTING  =
  // =====================================
  // ▶ 파일 검색/탐색 시 제외할 폴더/파일 패턴
  //  - "search.exclude": 검색(ctrl+shift+f)시 특정 폴더/파일을 제외해
  //    검색 속도를 향상시키고 불필요한 결과를 제거
  //  - "file.exclude": 탐색기에서 보이지 않도록 숨길 디렉토리/파일 패턴.
  "search.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/vendor/**": true
  },
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/vendor/**": true
  },
  "files.trimTrailingWhitespace": false,
}

코드 하이라이트 색상 설정

이거 은근 개꿀이다. 테마는 맘에 들어도 Syntax Highlight는 마음에 들지 않은 경우가 있는데 이런식으로 전역으로 설정하여 내가 원하는 형식과 색으로 박아놓을 수 있다.

{
  // ============================================
  // =   CUSTOM TOKEN COLOR (SYNTAX HIGHLIGHT)  =
  // ============================================
  // ▶ 특정 토큰 범위에 맞춰 색상 지정 가능 (TextMate 스코프)
  //  - "punctuation.definition.string.begin", "punctuation.definition.string.end" 등
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": [
          "punctuation.definition.string.begin",
          "punctuation.definition.string.end"
        ],
        "settings": {
          "foreground": "#98C379" // 문자열 따옴표 색상(Atom One Dark 스타일)
        }
      }
    ]
  }
}

기타 꿀 설정들

{
  // ==========================
  // =    Editor Convenience  =
  // ==========================

  // 1) 자동 줄바꿈 설정: 긴 줄을 자동으로 개행해줌 ("on", "off", "wordWrapColumn", "bounded" 중 선택)
  "editor.wordWrap": "on",
  
  // 2) 자동 저장: "off", "afterDelay", "onFocusChange", "onWindowChange" 중 택일
  "files.autoSave": "onWindowChange",
  //   - 딜레이(ms) 설정 (기본 1000ms)
  "files.autoSaveDelay": 1000,

  // 3) 연결 편집(Linked Editing): HTML/JSX 태그의 닫는 부분도 같이 수정
  //    (몇몇 언어/확장에서는 기본 지원되지 않을 수도 있음)
  "editor.linkedEditing": true,

  // 4) 선택 강조(Selection Highlight): 동일 단어/토큰을 선택했을 때 다른 곳도 강조 표시
  "editor.selectionHighlight": true,

  // 5) 세미항목 표시(Inlay Hints): 파라미터 이름, 타입 정보 등을 인라인 표시(언어별 지원 여부 다름)
  "editor.inlayHints.enabled": "on",

  // ==========================
  // =   UI & Minimap Setting =
  // ==========================

  // 1) Minimap(미니맵) 켜기/끄기
  "editor.minimap.enabled": true,

  // 2) 미니맵 크기 조절(기본 1)
  "editor.minimap.scale": 1,

  // 3) 탐색기에서 계층 폴더 간소화 (Compact Folders)
  "explorer.compactFolders": false,

  // 4) 탐색기에서 드래그앤드롭 시 확인 여부
  "explorer.confirmDragAndDrop": true,

  // 5) 작업 표시줄(액티비티 바) 위치 (기본 "left")
  // "workbench.sideBar.location": "right",

  // 6) 에디터 미리보기 탭 비활성화:
  //    파일을 클릭할 때마다 새로운 탭으로 열림(한 탭에서 재사용 X)
  "workbench.editor.enablePreview": false,

  // 7) 화면 확대/축소 (기본 0)
  //    정수값(1 단위)으로 설정, 2면 200% 확대, -1이면 90% 축소 정도 느낌
  // "window.zoomLevel": 1

  // ==========================
  // =  TypeScript / JS Tips  =
  // ==========================
  
  // 1) 파일 이동 시 import 경로 자동 업데이트
  "typescript.updateImportsOnFileMove.enabled": "always",

  // 2) 함수 자동 완성 시 인자까지 생성할지 여부 (true이면 완성 후 함수 파라미터도 자동삽입)
  "typescript.suggest.completeFunctionCalls": true,

  // 3) import 경로 작성 스타일 (상대 경로/절대 경로/짧은 경로 등)
  //    "shortest", "relative", "non-relative", "project-relative" 중 택1
  "typescript.preferences.importModuleSpecifier": "shortest",

  // ==============================
  // =  Semantic & Hover Setting  =
  // ==============================

  // 1) 시맨틱 하이라이팅: 변수, 함수, 클래스를 문맥에 따라 더 세밀하게 색상화
  //    (테마가 이를 지원해야 효과가 보임)
  "editor.semanticHighlighting.enabled": true,

  // 2) 호버 지연 시간(ms): 마우스 커서를 올렸을 때 툴팁(hover) 표시 지연
  "editor.hover.delay": 300,

  // 3) 호버 스티키: 마우스가 움직여도 툴팁이 유지될지 여부
  "editor.hover.sticky": false,
}

마무리🏁

VS Code의 가장 큰 장점 중 하나는 방대한 커스터마이징 옵션인것 같다.
물론, IntelliJ는 그냥 가만히 있어도 완벽한 툴이지만 VSCode가 커스텀 설정 하는것이 더 맛이 있고 훨씬 쉽게 느껴진다.
settings.json에서 에디터 UI부터 확장 기능 설정, 언어별 옵션, 보안/개인 정보 보호까지 폭넓게 제어할 수 있다.

• 조금이라도 불편한 점이 있다면 settings.json을 먼저 확인해 보자.
• 자신의 개발 환경에 딱 맞는 설정을 해두면, 코드 품질과 생산성이 확연히 향상될것이다.
• 설정 → 테스트 → 조정을 반복하며, “나만의 개발 환경”을 정교하게 가꾸어 나가면 시간가는 줄 모르게 재밌다..

Happy Coding! 💻✨