프론트엔드 개발 시 유용한 VS Code Extensions 5가지

이 블로그에서 Visual Studio Code를 소개한 것이 불과 2년 전이었는데 어느덧 대세 Editor가 되었네요. VS Code는 여러가지 장점이 있지만, 다양한 Extensions을 통해 내 입맛에 맞게 커스터마이징을 할 수 있다는 점도 큰 장점이죠. 오늘 포스팅에서는 제가 프론트엔드 개발할 때 잘 쓰고 있고 추천할 만 한 VS Code Extensions 5가지를 한 번 정리해봤습니다. 

 

1. Javascript (ES6) Code Snippets

유명한 프로그래밍 격언으로 바퀴를 다시 발명하지 말라는 말이 있죠. 개인적으로 "그냥 가져다 쓰자"라는 말을 그다지 좋아하지는 않지만, 이 Javascript Code Snippets 확장을 쓰면 확실히 생산성이 늘어나는데요. ES6 문법을 지원하며, React나 Vue로 작업할 때도 편리합니다.

 

VS Code Extension #1 - Javascript code snippets

2. Prettier

가독성을 높여주는 Extensions 중에는 Prettier가 가장 좋은 것 같습니다. 코드 포맷을 깔끔하게 정리해줄 뿐 만 아니라 키워드 색을 가독성 있게 보여주죠. 비슷한 Extension으로 Beautify가 있지만 저는 개인적으로 Prettier를 더 선호합니다.

 

VS Code Extension #2 - Prettier

3. ESLint

자바스크립트 작업을 한다면 빼놓지 않는 Extensions 중 하나입니다. Linting 작업은 클린코드를 작성할 때 많은 도움이 되는데요. 가끔 싫어하시는 분도 있더라고요.

 

VS Code Extension #3 - ESLint

4. Live Sass Compiler

Sass는 CSS Pre-compiler이죠. 우리말로 전처리기(?)라고도 하는데요. 저는 CSS 작업을 할 때 Sass를 사용하고 있어서 이 Visual Studio Code Extensions은 꼭 설치합니다. .sass나 .scss 파일을 수정할 때마다 실시간으로 브라우저에 반영을 해줘서 시간을 많이 아낄 수 있는 Extensions입니다. 참고로 Sass에 대해서 잘 모르시는 분들은 아래 글을 꼭 한 번 읽어보세요.

 

참고글 : Sass 사용법 및 Sass 문법 공부 방법 정리

 

VS Code Extension #4 - Live Sass Compiler

5. Debugger for Chrome

프론트엔드 작업할 때 브라우져는 대부분 크롬으로 디버깅을 하죠. 이 VS Code Extensions은 크롬의 공식 Extensions으로 Visual Studio Code와 크롬을 직접 연결해주는 역할을 하고 있습니다. 크롬 디버깅할 때는 필수 Extensions이라고 할 수 있죠.

 

VS Code Extension #5 - Debugger for Chrome

이상 오늘은 프론트엔드 개발할 때 제가 직접 사용하고 있고 추천할 만한 VS Code Extensions를 정리해봤는데요. 앞으로도 사용하다가 괜찮은 Extensions가 나오면 이 글을 통해서 소개드려볼까 합니다.

 

** 336x280 **