WEB/HTML이론

VSCode) settings.json 파일로 사용자 설정

찐망고 2024. 8. 9. 08:30

 

안녕하세요 찐망고 입니다.

 

settings.json 파일은 VSCode의 사용자 설정을 저장하는 JSON 형식의 파일인데요.

이 파일을 통해 VSCode의 다양한 설정을 커스터마이즈할 수 있습니다.

 

VSCode에서 settings.json 파일을 여는 방법:

 

  1. VSCode 실행: VSCode를 실행
  2. 명령 팔레트 열기: Ctrl + Shift + P (Windows/Linux) 또는 Cmd + Shift + P (Mac)를 눌러 명령 팔레트를 열기
  3. 명령 입력: "Preferences: Open Settings (JSON)"을 입력하고 선택

 

{
    "open-in-browser.default": "firefox",
    "diffEditor.wordWrap": "on",
    "editor.wordWrap": "on",
    "workbench.colorTheme": "Monokai",
    "workbench.iconTheme": "vscode-icons",
    "editor.linkedEditing": true,
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "editor.mouseWheelZoom": true,
    "vsicons.dontShowNewVersionMessage": true,
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.renderWhitespace": "none",
    "editor.minimap.enabled": false,
    "editor.renderControlCharacters": false,
    "workbench.startupEditor": "none",
    "html.hover.references": false,
    "window.zoomLevel": 1,
    "workbench.editor.empty.hint": "hidden",
    "editor.stickyScroll.enabled": false,
}

 

 

  • 브라우저 설정: open-in-browser.default를 통해 기본 브라우저를 Firefox로 설정
  • 에디터 설정: editor.wordWrap, editor.mouseWheelZoom, editor.renderWhitespace, editor.minimap.enabled, editor.renderControlCharacters, editor.stickyScroll.enabled 등의 설정을 통해 에디터의 다양한 동작을 제어
  • 워크벤치 설정: workbench.colorTheme, workbench.iconTheme, workbench.startupEditor, workbench.editor.empty.hint 등의 설정을 통해 VSCode의 테마와 아이콘, 시작 페이지 등을 제어
  • 확장 설정: 특정 확장 기능에 대한 설정 (vsicons.dontShowNewVersionMessage, liveServer.settings.donotShowInfoMsg, [html].editor.defaultFormatter) 등을 포함
  • 기타 설정: window.zoomLevel과 같은 일반적인 설정도 포함

 

 

settings.json 파일에는 다음과 같은 내용을 추가할 수 있습니다.

 

에디터 설정: 줄 번호 표시, 탭 크기, 자동 줄 바꿈 등

{
  "editor.tabSize": 2,
  "editor.wordWrap": "on"
}

 

확장 설정: 특정 확장의 설정

{
  "eslint.enable": true,
  "prettier.singleQuote": true
}

 

테마 및 아이콘 설정: 테마와 아이콘 테마 설정

{
  "workbench.colorTheme": "Default Dark+",
  "workbench.iconTheme": "vscode-icons"
}

 

파일 관련 설정: 파일 인코딩, 파일 종료 시 행동 등

{
  "files.encoding": "utf8",
  "files.autoSave": "onWindowChange"
}