본문 바로가기
IT/누구든 가능한 개발

VSCode 설치와 플러그인 설치

by InfopediaBK 2023. 4. 7.
728x90

VSCode는 비주얼스튜디오 코드의 줄임말입니다. 마이크로소프트에서 만들어진 오픈소스 텍스트 에디터로 Windows, Mac, Linux 모두 호환되는 프로그램입니다. 개발자들은 VSCode를 통해 코드를 작성하기 때문에 개발을 시작하는 데 있어 필수적인 프로그램입니다.

 

VSCode 다운로드

 

Visual Studio Code - Code Editing. Redefined

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

code.visualstudio.com

 

위 링크를 들어가셔서 본인에게 해당되는 OS에 맞게 다운로드하시면 됩니다.

 

VSCode 설치

Mac

Mac OS의 경우 위 링크에서 다운로드하시면 zip 파일로 다운로드됩니다. 해당 zip 파일 압축을 풀면 VScode 실행파일이 있고 이를 실행시키면 됩니다.

 

Windows

Windows의 경우 exe 파일을 통해 설치를 진행해주셔야 합니다. 아래 그림 순서대로 따라 하시면 쉽게 설치가능하실 겁니다.

 

동의합니다 선택
바탕화면에 바로가기 만들기도 같이 선택
설치 버튼 클릭

 

728x90

 

플러그인 설치

VSCode에서 몇 가지 플러그인들을 설치해야 합니다. 플러그인은 소프트웨어로서 VSCode를 좀 더 효율적으로 사용하기 위해 취향에 맞게 설치합니다. 많은 종류의 플러그인이 있지만 몇 가지 필수적으로 필요한 플러그인들을 설치하는 것을 추천드립니다.

 

VSCode를 실행하면 왼쪽에 아래 이미지에서 표시해 둔 아이콘이 있습니다. 해당 아이콘을 클릭하면 원하는 플러그인을 검색하고 설치할 수 있습니다.

 

ESLint

- 코딩 컨벤션(코드를 작성하는 규칙)에 위배되는 코드나 안티 패턴(지양되는 패턴의 코드)을 자동 검출하는 도구입니다.

 

Prettier

- ESLint와 주로 같이 사용되는 플러그인으로 ESLint는 코딩 컨벤션에 맞춰 자동으로 바꿔준다면 Prettier는 줄 바꿈이나 한 줄에 몇 자를 넣을지 등을 정해놓으면 이를 자동으로 수정해 주는 도구입니다.
- 이름 그래도 코드를 보기 좋게 이쁘게 만들어주는 도구라고 보시면 됩니다.

 

Korean Language Pack

- 기본적으로 VSCode는 영문 기반입니다. 이를 한글 기반으로 바꿔주는 역할을 합니다.

 

Live Server

 - 현재 내가 작성하고 있는 코드를 브라우저에서 실시간으로 볼 수 있도록 해줍니다. 개발 진행 중에 이를 확인하는데 편리함을 제공해 준다고 생각하시면 될 것 같습니다.

728x90

댓글