시나브로

Visual Studio Code 설치 및 EXTENSIONS 설치 본문

web

Visual Studio Code 설치 및 EXTENSIONS 설치

혬혬 2020. 12. 21. 15:28
728x90

 

다양한 개발에 사용되는 Visual Studio Code 설치 및 Extensions 설치를 알아보도록 하겠습니다.  

설치는 아래의 링크로 가서 각자의 운영체제에 맞춰서 설치하시면 됩니다. 

code.visualstudio.com/download

 

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

저는 윈도우 운영체제를 가지고 있어 windows 버전을 다운 받았습니다. 따로 설치에 유의사항이 없기 때문에 설치부분을 생략하도록 하겠습니다. 그냥 계속 다음을 누르고 install 해주시면 됩니다. 

 

 

설치 완료 후 실행 시키면, 위의 사진 처럼 프로그램이 실행 됩니다. 

여기서 바로 파일을 생성해서 시작하기 전, 개발을 편한게 해주는 extensions들을 설치하겠습니다. [ 유용하니 설치하는 것을 강추합니다 ]

파란색으로 표시한 것을 선택하시면, 아래의 사진처럼 왼쪽 창이 변경됩니다. 

 

위의 검색창에서 아래의 extension 들을 검색하여 install 해주세요! 

1. Live Server : web을 저장할 때마다 새로고침을 자동으로 실행하여, 웹페이지를 따로 새로고침하지 않고 확인할 수 있습니다.
2. Path Intellisense : 이미지/파일 위치를 가져올 때, 자동 완성을 지원합니다. 
3. IntelliSense for CSS class names in HTML : CSS 자동 완성을 지원합니다.
4. Auto Close Tag : HTML 태그를 자동으로 닫아줍니다.
5. Auto Rename Tag : HTML 태그를 수정할 때, 짝인 HTML 태그를 자동으로 변경을 지원합니다.
6. Bracket Pair Colorizer : 짝이 되는 괄호끼리 색을 칠해줍니다. (함수 괄호 등)

 

extension들을 다 설치하면 setting은 완료하였습니다 !!

728x90
Comments