본문 바로가기
Apps

Visual Studio Code의 유용한 설정 세팅방법 총정리

by 혀코 2022. 8. 29.

 

안녕하세요. 혀코입니다.

이번 시간에는 Visual Studio Code의 유용한 설정 세팅방법에 대해서 총정리 해보겠습니다.

우선 Visual Studio Code에서 Setting 값을 변경하려면, File > Preferences > Settings 에서 변경하실 수 있습니다.

 

# 자동 저장 기능 설정 (Auto Save)

소스코드를 거의 다 완성했는데 저장을 하지않고 프로그램을 종료했다면 어떻게 될까요. 몇시간 동안의 노력이 수포로 돌아가고 그 만큼의 시간동안 더 일을해야하고 야근을 하게되는 불상사가 일어나겠죠. 이런 불상사가 일어나지 않도록 자동 저장 기능 설정을 사용하는 것을 추천 드립니다.

해당 설정은 File > Preferences > Settings > Commonly Used 에서 찾으실 수 있습니다.

Auto Save 옵션에는 off, afterDelay, onFocusChange, onWindowChange  이 있는데, afterDelay를 선택하고, Auto Save Delay 로는 1000을 설정해서 소스코드를 중단하고 1초가 지나면 자동 저장이 될 수 있도록 설정하는 것을 추천 드립니다.

 


 

# 탭 사이즈 설정 (Tab Size)

소스 코드를 작성하다 보면, 들여쓰기를 해야하는데 들여쓰기를 많이 하게 되는 경우, 탭 사이즈를 4로 설정해 놓으면 보기가 어려울 수 있습니다. 이 경우, 탭 사이즈를 2로 설정해서 보기 쉽게 변경할 수 있습니다.

해당 설정은 File > Preferences > Settings > Commonly Used 에서 찾으실 수 있습니다.

 


 

# 소스 코드를 저장 할때 포맷을 자동으로 정리해주는 설정 방법 (Format On Save)

저장할때 소스코드 포맷 자동 정리 기능

코딩할때 소스 코드의 포맷을 일정하게 유지해야 분석하기가 쉽기에 유지보수가 용이합니다. 그래야 다른 개발자도 해당 소스 코드를 보고 분석해야 협업도 가능하기 때문이죠. 그래서 매번 모든 코드를 리뷰하고 코드 포맷을 수동으로 업데이트 하게 되는데 때때로 엄청난 시간과 에너지를 필요로 합니다. 소요되는 시간을 줄여보고 싶다면 다음 세팅을 활용해 보는 것을 추천 드립니다. Format On Save 기능을 체크하고 사용하면, 저장할 때마다 전체 소스 코드의 포맷을 한번에 자동으로 정리해 줍니다. 

해당 설정은 File > Preferences > Setting > Text Editor > Formatting 에서 Format On Save 항목을 찾으실 수 있습니다.

Format on Save Mode에는 두가지 옵션 file 과 modification이 있는데, file을 선택하면, 파일을 저장할 때 모든 소스코드의 포맷을 정리해 주고, modifications을 선택하면 변경된 부분의 소스코드의 포맷을 정리해 줍니다.

단, 플러그인으로 formatter를 사용하고 있어야 가능합니다. 추천드리는 formatter 플러그인으로는 Prettier를 추천드립니다.

 


 

# 줄바꿈 설정

Visual Studio Code의 줄바꿈 기본 값이 off 로 설정되어 있어서 아주 긴 텍스트를 복사해서 붙여넣으면 하단에 스크롤 바가 생기면서 한 줄로 들어가게 됩니다. 그래서 메뉴에서 View > Toggle Word Wrap 기능을 실행해서 한 화면에서 볼 수 있도록 줄바꿈을 적용하곤 합니다. 항상 줄바꿈을 적용하려면, 설정에서 Word Wrap 옵션을 체크하고 사용하시는 것을 추천 드립니다.

해당 설정은 File > Preferences > Settings > Commonly Used > Word Wrap 에서 찾으실 수 있습니다.

 


 

# 시작 태그와 종료태그 한번에 업데이트 하기

Visual Studio 기본 값으로 html의 시작태그와 종료태그를 한번에 못바꾸도록 설정되어 있습니다.

Linked Editing 옵션을 찾아서 체크 해제하고 html 파일의 시작태그를 업데이트 하면 종료태그도 함께 업데이트 되는 것을 확인하실 수 있습니다.

 


이렇게 Visual Studio Code의 유용한 설정 세팅방법에 대해서 총정리 해봤습니다.

유용하셨다면, 공감과 구독 부탁 드립니다.

감사합니다. :)

댓글