[VS코드] 확장 프로그램

 

 

공통

No	확장기능 이름	설명
1	Debugger for Chrome	Chrome과 연계한 디버거
2	Settings Sync	vscode의 설정을 동기 시켜준다
3	Instant Markdown	마크다운 파일을 바로 브라우저에서 확인
4	vscode-icons	가독성 좋은 아이콘을 적용
5	Bracket Pair Colorizer	여는 대괄호와 닫는 대괄호를 같은 색으로 표시
6	Auto Rename Tag	마크업 앞 혹은 뒤를 수정하면 그에 대응하는 부분 자동 수정
7	Prettier — Code formatter	널리 쓰이는 code formatter
8	Prettier - ESLint	ESLint와 Prittier를 함께 쓰고 싶다면 필요한 패키지
9	Babel ES6/ES7	바벨 익스텐션
10	Document This	자동으로 JSDoc 주석을 만들어준다.

HTML

No	확장기능 이름	설명
1	HTML Snippets	HTML5, 태그 색상화, 코드 스니펫 / 개발자 wgenial 것으로 설치
2	HTML CSS Support	CSS 지원
3	vscode-styled-components	styled-components를 코드 하이라이트
4	IntelliSense for CSS class names	CSS 클래스명 자동 완성 기능.
5	Auto Rename Tag	HTML/XML, JSX의 태그를 수정 할 때, 페어(pair) 태그 자동 수정
6	Auto Close Tag	자동으로 HTML/XML, JSX 태그의 close 태그 생성
7	Path Intellisense	디렉토리 경로와 파일명 자동 완성 기능 제공
8	live server	html 파일들을 서버에 실행

깃

No	확장기능 이름	설명
	Git History	Git 로그, 파일의 변경내역 및 커밋
	Project Manager	여러 프로젝트를 진행 하고 있다면 추천하는 익스텐션. workspace를 프로젝트 별로 관리 할 수 있다.
	ftp-sync	FTP/SFTP 전송 및 동기화

테스트 

No	확장기능 이름	설명
1	ESLint
2	Jest	Jest를 실행해서 success / fail을 화면에 표시 / 실패한 스냅샷을 버튼 클릭으로 업데이트 / 스냅샷 문법 하이라이트(syntax highlight)를 제공
3	GraphQL for VSCode	GraphQL에 대해서 코드 하이라이트

노드

No	확장기능 이름	설명
1	Node Exec	Node.js 설치 후 노드 실행 가능
2	Node.js Extension Pack	npm, JavaScript(ES6), node_modules 검색, NPM 인텔리센스 등을 지원
3	Node.js Modules Intellisense	require로 포함된 모듈에 대한 막강한 인텔리센스를 지원
4	npm Intellisense	npm module을 import 할 때 자동완성 기능을 제공

리액트

No	확장기능 이름	설명
1	React Native Tools	리액트 네이티브 코드 자동완성, 디버깅, Packager, iOS, Android, Exponent 실행, 재시작 등의 커맨드를 제공
2	ES7 React/Redux/GraphQL/React-Native snippets	자주 쓰이는 Snippet들을 단축키로 간단히 생성
3	React-Native/React/Redux snippets for es6/es7	리액트, 리액트 네이티브, 리덕스, styled-components의 code snippet
4	Reactjs code snippets	리액트 code snippet