본문으로 바로가기

[ VSCode ] Visual Studio Code 설치하기

category 6. 개발도구/6_4 잘쓰면 업무에 유용한 도구 2021. 1. 18. 18:52
반응형

[ VSCode ] Visual Studio Code 설치하기

안녕하세요. 갓대희 입니다. 이번 포스팅에선 Visual Studio Code를 설치 해보려 합니다. :- ) 

 

 

웹개발을 하다보면 어떤 IDE를 사용할지 고민하곤 한다.

 

개발자라면 다음의 에디터들 중 몇가지를 꼭 들어보거나 사용 해보았을 것이다.

 

 - Sublime Text3 - UltraEditor - Notepad++ - Atom - WebStorm - Visual Studio Code

 

선택의 기준은  유/무료 여부, 속도, 한글 지원여부, 다양한 플러그인 지원 여부 등이 있을 것이다.

 

이중 오늘은 Visual Studio Code를 사용하기위해 설치해 보려 한다.간단한 특징은 다음과 같으니 참고 하자. - 윈도우, 맥OS, 리눅스에서 사용가능 - 자바스크립트, 타입스크립트, Node.js 등의 지원 기능 내장 - 닷넷, C++, C#, 자바, 파이썬, PHP, Go 등 여러 언어를 위한 확장프로그램 생태계 풍부 - 타 에디터에 비해 가볍고 빠르다. (기준이 모호하니 참고하자. 위에서 나열한 에디터에서 상대적으로 빠른 편이다.) - 무료로 사용할 수 있으며 대부분 오픈소스다. 

 

0.  설치파일 다운로드 하기

#1. VSCode 설치 파일 다운로드

 - 공식 홈페이지로 접속

    code.visualstudio.com/

 

 

 - 본인의 OS에 맞는 설치 프로그램 다운로드

 - 다운로드가 시작 되면서 안내 페이지로 이동 된다. 시간 나면 참고 하도록 하자.

    itnext.io/settings-sync-with-vs-code-c3d4f126989

 

 

#2. VSCode 설치

 - 다운로드한 VSCode 설치파일을 실행 하자.

 - 라이센스 관련 동의 체크 후 "다음" 클릭.

 

 - 설치할 경로 확인 후 "다음" 클릭.

 

 - 시작 메뉴 관련 설정 후 "다음" 클릭

 

 - 추가 작업 설정 후 "다음" 클릭.

1) 아이콘 추가 : 바탕 화면에 VSCode 아이콘을 만들기
2) 두 번째, 세 번째 "code(으)로 열기" : 폴더나 파일을 VSCode로 바로 열 수 있도록 마우스 우클릭 메뉴에 code(으)로 열기를 표시해 준다.
3) VSCode를 기본 편집기로 사용하고 싶은 경우 체크하자.
4) PATH에 추가 :  명령 창(CMD, 파워셀 등)에서 code를 입력하면 VSCode가 바로 실행 된다.

 

 - "설치" 클릭

 

 - 설치가 완료 되었다. Visual Studio Code를 실행 해보자.

#3. 한글 설정

 - 기본적으로 VSCode는 다음과 같이 영문버전으로 되어 있다. 

 - 사용하기 편하도록 한글 설정이 가능하다.

1) 왼쪽 하단의 익스텐션 아이콘 클릭 (단축키 : Ctrl + Shift + x)

2) 검색창에 "korean" 입력

3) 목록 중 "korean language pack for visual studio code" 의 우측 "Install" 클릭

4) 설치 완료 후 "Restart Now" 클릭

 - 재기동 이후 한글 버전으로 변경된 것을 볼 수 있다.

 

#4. 이외 플러그인 설치 ( React 개발시 편의를 위한 플러그인 )

1) Reactjs code snippets

 - 리액트에서 자주 사용하는 코드  뭉치들을 자동 완성 해주는 플러그인

 

2) Live Server

 - 현재 작성하고 있는 코드를 실시간으로 보여주는 기능.

 - 저장(Ctrl + S || Cmd + S)이 감지되면 자동으로 로컬 서버를 통해 웹브라우저에 수정사항을 반영해 준다.

 

3) Prettier

 - 줄바꿈등의 스타일을 자동으로 변환해준다.

 - 이클립스의 코드 포매터와 비슷하다.

 

반응형

댓글을 달아 주세요

  1. Favicon of https://byul91oh.tistory.com BlogIcon 꼬바리 2021.03.24 02:54 신고

    도움 많이 됐습니다 ! 감사합니다.