vsc 유용한 확장 프로그램 추천!

 

1. JavaScript(ES6) Code Snippets (자바스크립트 코드 스니펫) 

 

자바스크립트 코드 스니펫은 대중적으로 많이 쓰는 자바스크립트 코드조각에 대한 스니펫을 제공하고 사용자가 따로 정의해서 쓸 수 있게 지원해준다. 자바스크립트뿐 아니라 타입스크립트 리액트, 뷰까지도 지원을 해준다. 

 

 

2. ES7 React / Redux / GraphQL / React-Native snippets

리액트 개발자라면 반드시 써야할 확장 프로그램 중 하나이다. 키워드를 사용해서 간편하게 코드작성을 할 수 있다. 

 

 

3. ESLint

코드를 자동으로 형식화하고 오류가 날 경우 경고 메세지로 개발자를 지원한다. 만약 여러 개발자가 협업을 하는 경우라면 일관된 서식으로 마치 한사람이 코딩한 것과 같은 결과를 얻을 수도 있다.

 

 

4. Auto Close Tag

태그를 작성할 때 자동으로 </>를 넣은 태그를 완성해준다! 생각보다 편한다!

 

 

5. Bracket Pair Colorizer 2

코드를 쓰다보면 괄호가 계속해서 생겨나는데, 이때 어느 괄호가 서로 짝인지 확인시켜주는 기능이다. 커서의 위치가 어느 괄호 안에 있는지도 색으로 표시를 해주기 때문에 우리의 눈을 작게나마 편안하게~ 도와준다!

 

 

6. Prettier

코드가 길어질 수록 읽기 불편해지고 지저분해 질 수 있는데 이 때 코드를 깔끔하게 양식에 맞게 자동으로 정리해주는 기능이다. 

 

 

7. Highlight Matching Tag

커서 위치에 해당하는 태그를 표시해준다. 태그의 시작과 끝을 컬러로 표시해준다! 

 

 

8. vscode-styled-components

리액트에서 css 쓸 때 제일 편하게 쓰는 style-components! 이 패키지 스타일을 하이라이트해서 편하게 볼 수 있게 해주고 제일 중요한!!! 자동완성기능이 된다!! css쓰면서 자동완성 기능이 없으면 생각보다 불편할 때가 있다 ㅠㅠ 이거 진짜 중요!

 

 

9. npm Intellisense

프로젝트를 구현하다보면 추가되는 라이브러리들이 많아집니다. 내가 추가하려는 라이브러리 이름의 앞부분만 적어도

코드를 자동으로 완성해주는 역할을 합니다.