개발환경의 초기세팅 시, 빼먹는 것 없이 개발하기 위해서 작성한 글입니다.
완성도보다는 빠트리지 않기 위해 작성하는 것이므로, 왜 사용했는지, 어떤 의미가 있는지는 생각나는대로 추가할 예정입니다.
VSCode Setting
[ Font Family ]
Setting - Editor: Font Family (D2Coding)
폰트를 설정하는 기능
여기서 네이버의 "D2Coding"를 사용하는 이유는 각 문자(숫자, 특수문자 포함)의 공간이 동일하기 때문에 가독성이 좋음
특히, 1이나 i, l과 같이 공간을 적게 차지하는 글자의 경우, 폭을 좁혀버리는 폰트도 있지만, 개발자에게는 좋지 않다고 판단
ps. 폰트 사이즈는 맞춰서 수정
[ Word Wrap ]
setting - Editor: Word Wrap (on)
긴 줄글을 줄바꿈 하는 기능
코드 레벨에서 바뀌는 것이 아니라 IDE에서만 바꿔 보여주는 것이므로, 긴 글을 볼 때 유용함
[ Sidebar Location ]
Setting - Sidebar: Location (right)
사이드바 위치를 조정하는 기능
오른쪽으로 사이드바를 위치시킴으로써 사이드바를 켤 때 코드가 움직이는 것을 막음 (좌우로 왔다갔다 X)
그리고 개인적으로 보기도 편함
[ Format On Save ]
Setting - Format On Save (check)
세이브할 때, 자동으로 알아서 포맷을 맞춰주는 기능
팀 작업할 때에는 Fromatting Rule을 팀간 공유해서 사용
VSCode Extension
[ GitLens ]
[ Git Graph ]
[ GitHub Copilot ]
[ GitHub Copilot Chat ]
[ Live Server ]
하고 있는 작업을 서버로 바로 올려서 확인 가능
모바일에서 확인하는 방법 [ Live Server > Settings:Host (자신의 IP) ]
참고자료 : https://blog.naver.com/jibro_steady/223016692905
[ ESLint ]
코드가 항상 최상의 상태를 유지하도록 지원하는 익스텐션입니다.
[ Prettier - Code formatter ]
[ Comment Anchors ]
주석에 todo, fixme 등 태그를 통해 앵커를 배치해 줍니다.
각 앵커는 기본적으로 코드를 볼 때 하이라이트 되어 있으며, 각 앵커를 모아보기도 하는 등 해야할 일을 확인하기 좋은 익스텐션입니다.
처음에 필요성을 조금 의심하며, 시작했지만 이제는 개발할 때, 없으면 많이 아쉬운 익스텐션입니다.
[ Auto Close Tag / Auto Rename Tag ]
태그를 동시에 수정해주는 익스텐션입니다.
HTML을 쓰다보면, 다양한 태그들을 사용하게 되는데, div만을 사용하는 것이 아니라면, 태그명을 변경할 때, 여는 태그와 닫는 태그 모두를 수정해주어야 합니다. 이 익스텐션을 사용하면, 하나로 묶인 태그를 동시에 수정해주어 버그 방지와 번거로움을 줄여줍니다.
[ Image preview ]
[ CSS Peek ]
html파일에서 css파일을 금방 찾을 수 있게 해주는 익스텐션입니다.
[ indent-rainbow ]
코드 앞 공백을 색상으로 구분하기 쉽게해주는 익스텐션입니다.
특히, 파이썬 개발할 때 유용합니다. (물론, 저는 pyCham을 메인으로 쓰기는 합니다.)
[ Material Icon Theme ]
아이콘의 테마를 변경해줍니다.
종류는 원하는 익스텐션으로 설치하면 될 것 같습니다.
[ vscode-styled-components ]
style component 개발 시, 자동완성 기능을 제공한다.
style component를 하며 팀원들이 가장 원성을 냈던 부분이 자동 완성이 안되는 부분이었습니다. 이런 문제를 해결해주는 익스텐션입니다.
[ Quokka.js ]
계산 결과값을 서버를 돌리지 않고도 미리보기 할 수 있게 해줍니다.
[ Figma for VS Code ]
[ Svg Preview ]
Svg 파일을 미리보기 할 수 있습니다.
Svg는 일반적인 이미지처럼 미리보기가 안되는데, 미리보기로 확인할 수 있습니다.
[ Resource Monitor ]
현재 컴퓨터 자원을 확인할 수 있습니다.
[ Code Spell Checker ]
주석 등의 코드 스펠링 체크해주는 익스텐션입니다.
[ Remote - SSH ]
ssh 클라이언트를 vscode에서 쉽게 사용할 수 있도록 제공되는 익스텐션입니다.
이를통해, SSH 서버가 있는 모든 원격 컴퓨터를 개발 환경으로 사용할 수 있습니다.
[ Docker ]
docker를 vscode에서 쉽게 사용할 수 있도록 제공되는 익스텐션입니다.
vscode를 통해서, 빌드 관리 및 배포를 할 수 있습니다.
또한, 컨테이너 내에서 NodeJS, Python과 .Net에 대한 원 클릭 디버깅을 제공합니다.
[ DB(Radis, MongoDB, SQL Server) ]
[ JavaScript(ES6) code snippets ]
ES6 구문으로 된(타입스크립트 포함) JS 용 코드 조각들이 포함된 익스텐션입니다.
일반적인 JS 뿐 아니라 React와 Vue 등도 지원합니다.
(실무 등에서 잘 활용할 예정입니다. 공부하는 중에는 타이핑을 빠르게 하는데는 도움이되나 IDE를 사용하지 못하는 환경에서는 제대로 개발하지 못하는 상황이 발생했었습니다.)
[ Colorize ]
CSS 색상 시각화를 도와주는 익스텐션입니다.
