VS useful extexsions

BenKim·2020년 7월 28일
0

VS(Visual Studio Code)는 IDE ( Intergrated Development Enviroment)의 하나
MS에서 만든 텍스트편집기이며 typescript로 만들어졌다.

설정

keyboard short cut 메뉴에서 다양한 단축키들 확인
command palette - VS에서 실행가능한부분을 검색해준다.
word wrap - 보여지는 화면크기에 맞게 줄바꿈된다.

1. Material Theme

눈에 편안한 색, 테마 설정가능

2.Material Icon Theme

아이콘들이 세련되게 변한다.

3.Prettier (Code formatter)

코드를 포매팅해주는 툴
format on save
Tab Width :2
Quote Style : single(JS, TS)

4.Bracket Pair Colorizer

괄호마다 색이 다르게 지정된다.

5.Indent Rainbow

들여쓰기부분이 무지개처럼 보여서 코드를 읽기 편해진다.

6.Auto Rename Tag

HTML에서 태그를 바꾸고 싶을 때 앞의 태그를 바꾸면 뒤의 태그도 바뀐다.

7.CSS peek

HTML에서 CSS부분을 클릭하면 바로 해당부분 CSS부분으로 이동한다.

8.HTML CSS support

HTML에서 CSS속성의 자동완성

9.HTML to CSS autocompletion

html에서 만들어진 클래스가 css파일에서 자동완성된다.

10.Live Server

저장만하면 바로 적용된다. 새로고침을 할 필요가 없다.
command palette에서 on/off가능하다.

11.Markdown Preview (VS 내장)

REAME.md 파일이 어떻게 보이는지 확인하며 작성할 수 있다.
md파일 생성후 command palette에 markdown preview 실행

12.open in browser

HTML파일을 브라우저에서 볼수있게 한다. default값을 크롬으로 설정해주어야 한다.

13. draw.io

vscode 내부에 순서도를 그릴 수 있는 파일을 만들어준다.

14. reactjs code snippets

리액트 컴포넌트 틀을 쉽게 만들어준다. rcc만 입력해도 자동완성

15. git graph

깃 상황을 그림으로 보여준다.

profile
연습과 자신감

0개의 댓글