[VS CODE] 설치 및 확장플러그인

** 영상으로 보고 싶으신 분은 아래 링크를 클릭해주세요.

https://www.youtube.com/watch?v=6on6YoXJWiA&t=242s 

 

 

 

 

1. 설치하기

- Visual Studio Code(VS code)는 MS사의 오픈소스 기반의 크로스 플랫폼이다.

- 다양한 개발언어를 지원하고, extension을 통해 쉽게 설치, 삭제가 가능하다.

- 아래 주소에 가서 다운 받는다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

 

 

 

설치가 되면 검색에서 [visual studio code] 검색 혹은 바탕화면에 생성된 아래와 같은 아이콘 클릭

바탕화면 아이콘 클릭

 

처음 설치화면 - 플러그인을 설치해서 사용해보자.

 

 

 

 

 

 

 

 

 

 

 

 

2. Emmet

- 기본적으로 설치되어 있어 플러그인을 깔지 않아도 된다. 

- [tab]키가 emmet의 단축키

 

 

 

 

 

 

 

 

 

728x90

반응형

 

 

 

 

 

 

 

 

 

3. 확장 플러그인

- 확장 플러그인 아이콘을 클릭한다.

캡쳐에서는 한글로 되어 있지만 플러그인을 설치해야 한글로 보임

 

 

 

 

 

 

 

 

1) Korean Language Pack for Visual Studio Code

- 한국어버전으로 VS code를 사용할 수 있도록 해주는 플러그인

- 각국 언어들 버전들이 매우 많이 있다. 

 

앞글자만 사용해서 금방 나오므로 설치버튼 누르기

 

 

 

 

 

2) Prettier - Code formatter

- HTML, 자바스크립트, 타입스크립트, CSS 등 다양한 언어 형식을 잡아줌

- 코드를 보기 좋게 정해진 코딩 컨벤션대로 정렬해주는 도구

https://prettier.io/ - 공식홈페이지

 

 

 

 

 

 

3) Material Icon Theme

- 파일들 아이콘을 변경시켜주는 테마

검색하여 설치

 

 

 

- Material Icon Theme를 설치전 작업화면

 

 

- 설치 후 작업화면

 

 

 

 

 

4) Auto Rename Tag

- html 시작 태그 변경시 자동으로 종료태그 변경

 

시작태그 변경시 종료태그 자동 변경

 

 

 

 

 

5) ESLint

- linter는 소스코드를 분석해서 문법 에러, 버그를 찾고 보고해주는 도구

- ESLint는 ES6까지도 잘 분석해줘서 가장 인기 많은 플러그인

 

 

 

 

 

6) CSS Peek

- HTML파일에서 CSS를 사용한 class의 해당 css파일 위치로 이동

- HTML태그에서 css를 사용한 부분에 [ctrl]마우스 클릭 혹은 [F12]

CSS Peek 플러그인 설치

 

클래스명을 [ctrl]+[클릭]하면 자동으로 변경해주도록 처리

 

 

 

 

 

 

 

7) HTML CSS Support

- CSS파일 속성 자동완성 기능 제공

- HTML에서 CSS에 미리 써있는 class를 가져다 쓸수 있음

- class작성후 [ctrl]+[spacebar]를 누르면 작성 가능

 

 

그냥 치면 안나오고 [ctrl]+[spacebar]를 단축키로 사용

 

 

 

 

 

 

 

8) Live Sass Compiler

- 설치후 바로 사용가능하나, 설정파일(settings.json)을 수정하여 여러가지 활용이 가능

- 하단의 [Watching Sass]를 클릭하여 활성화한다.

- 파일이 저장될때마다 자동 컴파일

- 필수적이진 않지만 Scss문법을 도와주는 플러그인 [Sass lint]

 

 

 

 

 

9) Live Server

- HTML소스등의 내용을 실시간으로 서버를 띄워 화면에 표시

- 설치 후 하단의 GoLive버튼 클릭

단축키 : [alt]+[L]을 눌렀다가 [alt]+[O]를 누르면 됩니다. 

 

 

 

 

 

 

 

 

10) open in browser

- Live server는 단축키가 불편합니다.

- [alt]+[b]를 누르면 브라우저로 바로 띄워주는 플러그인 입니다.

- 하지만 실시간으로 변경은 안되서 매번 새로고침을 눌러줘야 합니다.