Visual Studio Code / 확장 프로그램 추천 및 설치

728x90

Visual Studio Code란?

VS Code는 마이크로소프트에서 개발한 가벼우면서도 강력한 코드 에디터이다. 개발자의 요구에 맞게 커스터마이징할 수 있다. 무료로 제공되며 윈도우, 맥, 리눅스 등 다양한 운영 체제에서 사용할 수 있다.

IDE와 Code Editor

IDE(통합 개발 환경)와 코드 에디터 모두 프로그래밍을 할 때 필수적인 도구로, 둘 다 코드를 작성하는 데 사용되지만 기능과 목적에 차이가 있다.
- IDE(Integrated Development Environment): 코드 작성뿐만 아니라 컴파일, 디버깅, 테스트, 빌드 등의 기능을 포함한 종합적인 개발 도구. IDE는 개발자가 하나의 환경에서 모든 개발 작업을 수행할 수 있도록 도와준다. 대표적으로 Visual Studio, IntelliJ IDEA, PyCharm, Eclipse 등이 있다.
- Code Editor: 코드 작성을 위한 가벼운 텍스트 편집기. IDE보다 실행 속도가 빠르고 가벼우며 필요한 기능만 확장하여 사용할 수 있다. 대표적으로 VC Code, Notepad, Vim 등이 있다.

주요 기능

플러그인(Extensions)으로 기능 확장 가능: 프로그래밍 언어 및 프로젝트에 맞는 기능을 쉽게 추가할 수 있다.
가벼운 실행 속도: IDE보다 가볍고 빠르게 실행된다.
자동 완성 기능 제공: 변수명, 함수명, 라이브러리 API 등을 자동으로 추천해주어 개발 속도를 높일 수 있다.
디버깅 및 터미널 기능 내장: 디버깅 기능을 지원하며 터미널을 통합하여 VS Code 내부에서 명령어를 실행할 수 있다.
Git 연동 및 버전 관리: Git을 내장하고 있어 별도 클라이언트 없이 버전 관리가 가능하다.

플러그인(Extensions) 설치

현재 내 VS Code에 설치된 플러그인이다. 안쓴지 오래된 것들을 정리했더니 6개만 남았다. 위 플러그인들을 차례대로 설명하면 다음과 같다.

Auto Rename Tag: HTML, JSX, XML 등의 태그를 변경할 때 시작 태그와 종료 태그를 각각 수정해야 하는 불편함이 있다. 이 프로그램을 설치하면 시작 태그 변경 시 종료 태그도 자동으로 변경된다. 리액트 시작하면서 설치했는데 편하다.
Code Runner: VS Code에서 다양한 프로그래밍 언어의 코드를 실행할 수 있도록 도와준다. 입력(stdin)을 받을 수 있도록 터미널에서 실행할 수도 있다.
ESLint: JS 및 TS 코드에서 문법 오류, 스타일 문제, 잠재적 버그를 찾아주는 정적 코드 분석 도구이다. 프로그래밍 스타일을 일관되게 유지하고 코드 품질을 향상시키기 위해 사용된다. 개발자가 직접 원하는 규칙을 설정할 수 있다.
Live Server: HTML, CSS, JS 등의 정적 웹 파일을 실시간으로 미리 보기할 수 있다. HTML 파일을 수정하면 자동으로 브라우저가 새로고침되어 변경사항을 즉시 확인할 수 있다.
Reactjs code snippets: 리액트 및 관련 라이브러리를 빠르게 작성할 수 있도록 도와주는 코드 스니펫(단축 코드)모음이다. 이것도 리액트 시작할 때 설치했다. 컴포넌트나 훅 생성할 때 편하다.
vscode-pets: 귀여워서 설치했다. 항상 탭을 열어두진 않는데 집중력 흐트러지거나 할 때 가끔 열어본다. 소소한 힐링..