VScode Extensions 추천!

안녕하세요! 이번에는 VScode를 사용할 때 유용하게 쓸 수 있는 익스텐션들을 가져와 보았습니다.

좀 더 쉽고 편리하게 코드를 작성해 보아요~~

1. ESLint

ESLint 는 자바스크립트의 문법 에러가 있는 부분을 표시해주는 확장도구입니다.
소스 코드에 문제가 있는지 검사하여 문제가 있는 부분에 flag를 달아주기때문에 오류있는 부분을 빠르게 알아챌 수 있습니다.

2. Live Server

실시간으로 브라우저에서 확인할 수 있는 확장 프로그램입니다.
밑의 Go Live를 누르면 자동으로 실행됩니다.
html이나 Css를 배울 때 사용하면 편리합니다.
(만약 go live가 실행이 안된다면 버전다운을 해주면 됩니다!)

3. indent-rainbow

들여쓰기 별로 색상을 다르게 표시해 주어 코드의 가독성을 높여줍니다.

4. Highlight Matching Tag

태그를 선택하면 자동으로 매칭되는 태그를 찾아주는 확장기능입니다.
해당 태그 클릭 시 어떤 태그가 매칭되는지 표시해 주어 편리하게 확인할 수 있습니다.

5. Prettier - Code formatter

코드를 자동으로 정렬해 주어 훨씬 가독성 있게 만들어 읽기 편해집니다.
소스 코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주기때문에 다른 사람이 작성하거나 읽기에도 좋습니다.

React 추천 익스텐션

6. ES7+ React/Redux/React-Native 스니펫

Snippet의 장점은 자주 사용되는 코드에 대하여 단축어를 만들 수 있어 코드를 빠르게 생성할 수 있다는 것 입니다.

7. Auto Import - ES6, TS, JSX, TSX

파일명을 입력하면 자동으로 import해주는 편리한 기능입니다.
아직 import하지 않은 모듈의 메소드를 불러오거나 컴포넌트를 불러올 때 유용하게 쓸 수 있습니다.

Vue 추천 익스텐션

8. Vue VSCode Snippets

react와 마찬가지도 vue에서도 자주 사용하는 코드들을 단축키로 만들어 사용할 수 있습니다.

공식 사이트에서 단축키들을 확인할 수 있고 자신의 편의에 맞게 수정할 수도 있습니다!