내가 사용하는 VS Code 추천 익스텐션

 

Project Manager : 여러 프로젝트를 관리하여야 할 때, 새로운 창을 열어서 작업하기 보다는 사용중인 에디터에서 바로 이동을 할 수 있도록 즐겨찾기하여 바로 이동하는 듯한 느낌을 주는 익스텐션이다.
 
Error Lens : 코드에 에러가 있을 경우 해당 줄에 오버레이 형식으로 보여준다. 나중에 컴파일을 실행 하기 전에 미리 에러를 발견할 수 있어 유용하다. 
 
Bracket Select : 문자열을 선택할 때 마우스로 드래그를 하여 사용했을 것이다. 화면 분할을 하는 등 긴 문자일 경우에는 여러번 하다보면 상당히 귀찮다. (모든 문자가 연결 되어 있다면 더블 클릭으로 가능하지만 띄어쓰기가 있는경우는.. )
이럴때, 커맨드로 한번에 문자열을 선택할 수 있는 익스텐션이다. 

win : alt + a
mac : opt + a
 
Colorize : css에서의 색상 코드에 배경색을 입혀서 어떤 색상을 가지는지 미리 볼 수 있다. 
 
Random Everything : 더미데이터를 만들때 해당 익스텐션을 사용하면, random으로 값을 뽑아올 수 있다. 
vs code에서 다중커서를 같이 사용하면 더 효과적이다.
 
Project-tree : 프로젝트 폴더 트리를 마크다운 텍스트로 저장하는 익스텐션. 프로젝트 구조를 한 눈에 파악하는데 도움된다.
 
Auto Rename Tag : 태그 이름을 수정할 때 여는 태그와 닫는 태그를 동시에 수정하게 해준다. 
 
htmltagwrap : 리액트같은 경우 하나의 최상위 태그 혹은 프래그먼트를 사용해야하는데 이럴 때 한번에 하나의 wrapper로 감싸게 도와주는 익스텐션이다.
 
Font Awesome Gallery : 에디터 안에서  Font Awesome 아이콘을 검색해서 바로 사용할 수 있게 해준다. 
 
CSS Initial Value : css 속성 기본값을 보여주는 기능. 마우스 오버 시 기본값을 확인 할 수 있다. 
 
Dot Log : console.log 스니펫. 변수 + .log를 통해 console.log에 변수 맵핑까지 해주는 익스텐션.
 
Material Theme, Material Icon Theme, one dark pro: 에디터를 다른 테마로 변경한다.
 
prettier (필수) : 코드 포맷터. 
 
ESLint (필수) : 문법 에러를 표시해준다.  
 
Highlight Matching Tag : 열고 닫는 태그에 밑줄을 그어준다.
 
Code Spell Checker : 오타를 방지하는 익스텐션.
 
Auto Import, Auto Import - ES6, TS, JSX, TSX : 자동 임포트!

indent-rainbow : 인덴트에 색상을 넣어서 depth를 구분한다.

CSS peek : HTML 파일에서 만약 해당 태그의 클래스나 아이디 같은곳에 CSS가 들어가있다면 손쉽게 찾아가게 도와주는 플러그인이다.
 
 

---

 
https://www.youtube.com/watch?v=M9uf7uWg8LI

💽 개발하는데 유용한 VSCode 확장팩 - 유료 IDE 못지않게 ❗