GitHub

내가 쓰려고 만든 VScode 기본 세팅 꿀팁 with windsurf

hojun lee · 10/20/2025
커버이미지

프로그래밍의 처음은 역시나 세팅이다. VScode, cursor, windsuft를 이동해다니거나 노트북을 바꾸는 경우 새로 IDE를 세팅해야하는 일이 있는데 여간 귀찮은 일이 아니다. 옛날엔 sync 인가 뭐시긴가 세팅 가져오는게 있었는데 섭종했다고 한다. 내가 무엇을 조작해서 사용하는 지 알기 위해 IDE 미세 조정 세팅을 공유한다.

탐색기 파일 먼저 오게 하기 세팅

setting.json

{
"explorer.sortOrder": "fileFirst",
} 

폴더 구조가 이런식으로 파일이 먼저 올라오게 됨

글꼴설정

{
  "editor.fontFamily": "D2Coding, Consolas, 'Courier New', monospace",
} 

사용하고 싶은 글꼴을 설치 후 제일 앞에 적음 그리고 껏다 키면 적용 됨

파일/폴더 단축키로 생성

파일과 폴더 생성이 은근 귀찮다. 특히 초기 세팅할 때는 더욱 그렇다. 확장명까지 입력해야줘야 하므로 꽤나 노고가 들어가는데 익스텐션도 편한게 없다. 근데 keyboard shortcuts를 등록해두면 쉽게 해결된다.

명령 팔레트 열기

Ctrl + Shift + P 또는 F1을 누르고 “Preferences: Open Keyboard Shortcuts (JSON)”을 검색해 keybindings.json 파일을 연다

[
  {
    "key": "ctrl+n",
    "command": "explorer.newFile",
    "when": "explorerViewletFocus"
  },

  {
    "key": "ctrl+shift+n",
    "command": "explorer.newFolder",
    "when": "explorerViewletFocus"
  }
]

이렇게 하면 마우스 클릭된 곳에 폴더를 생성할 수 있고, 그냥 새 파일이 생기는 것이 아닌 이름을 지정해서 만들 수 있다. 엄청 편함

새 파일은 컨트롤 + n

새 폴더는 컨트롤 + shift + n

블록 지정 하고 엘레먼트 래핑하기

갑자기 크게 엘레먼트 레이어를 추가해야할 일이 있다.

하나만들고 그 안에 복붙하는 것도 생각보다 귀찮다. 그래서 쭉 긁어서 특정 단축키를 쓰고 어떤 엘레먼트를 넣을건지 입력하면 자동으로 래핑이 된다.

블록 지정한 후, 특정 단축키를 눌러 커스텀 엘리먼트로 래핑하고, class 속성까지 지정하는 기능을 Emmet의 “Wrap with Abbreviation” 명령

적용방법 Ctrl+ Shift + P 또는 F1을 누르고 “Preferences: Open Keyboard Shortcuts (JSON)”을 검색해 keybindings.json 파일을 연다

  {
    "key": "ctrl+shift+[",
    "command": "editor.emmet.action.wrapWithAbbreviation",
    "when": "editorHasSelection && editorTextFocus"
  }

추가하면 된다.