Visual Studio 환경설정 (Extension 종류)

 

 MS사에서 만든 Text Editor (간단한 텍스트 에디터)

 

short cut key

visual studio 단축키보기(왼쪽아래 설정에 바로가기키)

 

command + shift + p,  ctrl + shift + p  (명령 팔레트 실행)

 

 

1.  Material Theme

비쥬얼 스튜디오 테마 색상 설정

 

2.Material Icon Theme

icon 모양이 바뀜(가시성이 좋아짐)

 

3.Prettier 

코드 포맷팅 해줌 

설치후 → (cmd 에서 settings)설정 → save 검색후 format On Save(자동으로 포맷 가능하게 체크)

 

prettier: tabwidth 2로 설정(현업에서)

가독성 좋게 하기 위해

prettier quote 에서 javascript Quote Style 을 single로 바꿔준다. Type Script도

주로 single quote 사용하기 때문에

 

4.Bracket Pair Colorizer

괄호마다 색감을 다르게 주어서 구분하기 편리하게 해준다.

 

5.Indent Rainbow

들여쓰기된 부분이 레인보우 컬러로 색상이 다르게 highlight된다

 

6.Auto Rename Tag

html 편집시 사용

태그 이름 바꿀때 뒤에 </>닫는 태그 이름도 바꿔준다.

 

7.CSS Peek

html 태그에서 ctrl + 마우스 click

정의된 CSS파일로 이동한다

 

8.HTML CSS Support

자동완성기능

8-1 HTML CSS AUTO completion

 html, css연결된 이름까지 바꿀 수 있다

 

 

9.Live Server

프로젝트 실행시 새로고침 안하고

코드내에서 수정 후 저장시 자동으로 업데이트 된다.

 

10.Markdown Preview

git 허브에 markdown 파일 꾸밀 시에

cmd창에 실행 후 오른쪽에 두고 live로 확인하면서 코드 수정 가능하다.

 

 

tip 간단하게 html과 css동작을 확인하는 사이트

http://jsbin.com/?html,output

JS Bin

https://jsfiddle.net/

JSFiddle - Code Playground

https://codesandbox.io/

CodeSandbox: Online Code Editor and IDE for Rapid Web Development

 

 

 

출처

https://www.youtube.com/watch?v=bS9yTI2fC0w