VScode | 확장 프로그램 (Extension) 추천

비주얼 스튜디오 코드 확장 프로그램들 중 자주 쓰는 것들을 카테고리별로 정리해 봤습니다.

 

 

목차

 

 

프로그래밍

 

코드

1.  IntelliCode  - 전체 줄 자동 완성. AI를 지원해 지금까지 작성한 코드를 기반으로 내용을 예측해 자동 줄 완성을 지원합니다.

2.  ESLint  - 소스코드를 분석해 문법 에러, 버그 등을 찾아서 알려줍니다.

 

Git

1.  Git History  - git log, 파일 히스토리, 브랜치와 커밋을 VScode에서 비교할 수 있게 해줍니다.

2.  GitLens  - 코드에 커서를 올리면 해당 커밋을 누가 언제했는지까지 알려주는 기능을 제공합니다.

3.  git-open  - 터미널에 git open을 입력하면 git-repository 창으로 바로 이동할 수 있습니다.

 

HTML / CSS

1.  Auto Rename Tag  - HTML에서 여는 태그나 닫는 태그 하나만 수정해도 동시에 수정됩니다.

2.  Auto Close Tag  - 여는 태그만 입력해도 닫는 태그가 자동으로 입력됩니다.

4.  CSS Variable Autocomplete  - CSS 변수에 대한 자동 완성 기능을 제공합니다.

5.  SCSS IntelliSense  - SCSS 코딩 완성 리스트 기능을 제공합니다.

 

라이브 (실시간)

1.  Live Server  - 개발 중인 홈페이지를 확인할 수 있는 실시간 서버로 웹 개발시 필수적인 확장 프로그램입니다.

2.  Live Preview  - HTML을 코딩 중이라면 확인하기 위해 브라우저를 열 필요 없이 VScode 자체에서 라이브 화면을 볼 수 있습니다.

3.  Live Sass Compiler  - Sass나 SCSS를 자동으로 css로 컴파일시켜주는 확장 프로그램입니다.

4.  Live Share  - 프로그래밍 언어나 빌드 중인 앱 유형과 관계없이 실시간 편집 및 디버깅이 가능합니다.

 

 

가독성 / 편의성

 

가독성

1.  Bracket Pair Colorize DLW  - 괄호가 겹쳐있으면 어디가 쌍인지 확인하기가 힘든데요. 이럴 때 괄호를 컬러로 찾을 수 있게 해주는 확장 프로그램입니다.

2.  Color Highlight  - 색을 입력할 경우 해당색을 배경색으로 보여줘 바로 확인할 수 있습니다.

3.  indent-rainbow  - 들여쓰기를 무지개 색상으로 표현해서 코드의 가독성을 높여줍니다.

4.  Material Theme  - 배경, 폰트, 테마 등을 선택해 가독성을 높입니다.

 

편의성

1.  Project Manager  - 자주 사용하는 프로젝트를 저장해 편집기 내에서 목록으로 관리하고 스위칭할 수 있게 지원하는 확장 프로그램입니다. 

 

 

 

 

자동완성

 

자동완성

1.  Path Intellisense  - 파일이나 이미지 등의 경로를 지정할 때 자동으로 경로를 보여주고 선택해서 지정할 수 있는 확장 프로그램.

 

 

기타

 

언어 

1.  Korean Language Pack for Visual Studio Code  - 영어가 한 눈에 안들어는 경우 한국어 팩을 설치하면 도움이 될 수 있습니다.

 

관련포스트

VScode | 비주얼 스튜디오 코드 PHP 개발환경 설정

유니티에디터 | VScode

유니티에디터 | VScode 사용법

JAVA | 자바 개발 환경 설정 (비주얼 스튜디오 코드)