[VSCode]⚡ Visual Studio Code 확장프로그램(extension) 추천 !

---

vscode 확장프로그램(extension)

---

 

내가 써본 유용한 vscode 익스텐션 리스트

 

✅ VSCode(Visual Studio Code) 다운로드 및 설치

Visual Studio Code - Code Editing. Redefined

✅ Extension 탭 들어가기

 

✅ Auto Rename Tag

: HTML에서 여는 태그나 닫는 태그 중 한 가지만 수정을 해도 두 개가 짝으로 동시에 수정됨.

✅ Auto Close Tag

: 해당 익스텐션은 vscode 1.6버전 이후부터는 html에 대해서는 포함되어 있다. 하지만 나머지 파일에서는 작동을 하지 않기 때문에 다운로드 해 주자. 여는 태그만 입력하면 자동으로 닫는 태그가 생성된다. 

 

✅ Material Icon Theme

: 파일 아이템을 해당 아이콘으로 보기 좋게 변경해 준다.(js, html, css)

 

✅ Live Server

: HTML, CSS, JavaScript 파일을 로컬 서버에서 실시간으로 제공하여 브라우저에서 즉시 변경 사항을 확인할 수 있도록 도와주는 도구. 이 확장은 특히 웹 개발 중에 유용하며, 페이지를 수동으로 새로 고칠 필요 없이 실시간 미리 보기를 제공해 준다. 

 

 

✅ Live Preview

: HTML, CSS, JavaScript 파일을 로컬 서버에서 실시간으로 제공하여 브라우저에서 즉시 변경 사항을 확인할 수 있도록 도와주는 도구로 Live Server와 비슷하나 두 가지 차이가 있다.

 

 

	Live Server	Live Server Preview
실행 방식	하단 status bar 버튼을 클릭하여 실행 Ctrl+Shift+P -> open with live server 명령어 입력	Ctrl+Shift+P -> Show Live Server Preview 명령어 입력
보여주는 방식	브라우저	VS Code 내 탭(돋보기 버튼 클릭)

✅Prettier

: 소스 코드 스타일을 정리해주는 도구로 사용자가 규칙을 커스텀 할 수 있다. 탭 간격도 지정 가능하고, format on save 옵션을 활성화하면 파일을 저장할 때마다 자동으로 포맷팅이 이루어진다. 

 

예) 파일 저장 시 포맷팅: 설정에서 editor.formatOnSave를 true로 설정하면 파일을 저장할 때마다 자동으로 포맷팅이 적용

{
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 4,
  "prettier.useTabs": false
}

✅Bracket Pair Colorizer DLW

: 괄호가 많거나 코드가 복잡한 경우 어디가 어디로 연결되어 있는지 한 눈에 알아보기 힘들다. 이 플러그인을 사용하면 괄호 쌍을 같은 색상으로 표시 해 주고 현재 커서의 위치가 어느 괄호 안에 있는지 색으로 표시해준다.

 

괄호에 색상을 지정해 주는 비슷한 익스텐션으로 Bracket Pair Colorization Toggler 이 있다.

 

✅indent-rainbow

: 들여쓰기를 색상으로 표시해 줌.

 

✅Color Highlight

: CSS에서 색상을 지정할 때 rgb나 16진수(#F699CC)에 해당하는 색상코드를 입력하면, 해당 색상을 코드의 배경색으로 보여준다.

 

✅Highlight Matching Tag

: 페어 태그를 하이라이트 해준다.

 

✅CSS Peek

: html에서 css 선택 시 찾기 기능

 

✅HTML CSS Support

: html에서 css 자동완성 기능

 

✅TabOut

: 이클립스(Eclipse)에서 탭(Tab)을 이용해서 커서 이동하는 것과 같은 기능

- 코드 블록이나 괄호 등의 구조 자동 탈출: 닫는 괄호, 따옴표, 백틱 등의 구조에서 탭 키를 눌러 자동으로 벗어나게 해줌

 

✅Error Lens

: 즉각적으로 에러를 알려줌. 코드 작성 중 오류나 경고가 발생하면, 해당 라인에 인라인 메시지가 표시됨. 오류나 경고가 있는 라인은 배경색이 강조되어 시각적으로 쉽게 구분가능. 라인 끝에 요약 메시지가 표시되어 문제를 한눈에 파악 가능. 인라인 메시지의 스타일이나 표시 방식을 설정도 가능(settings.json 파일을 직접 수정해서 설정하는 것도 OK)

{
  "errorLens.errorForeground": "#ff0000",
  "errorLens.warningForeground": "#ffa500",
  "errorLens.infoForeground": "#0000ff",
  "errorLens.hintForeground": "#008000",
  "errorLens.errorBackground": "#ff000030",
  "errorLens.warningBackground": "#ffa50030",
  "errorLens.infoBackground": "#0000ff30",
  "errorLens.hintBackground": "#00800030",
  "errorLens.fontStyle": "italic",
  "errorLens.fontWeight": "bold"
}

 

✅Korean Language Pack for Visual Studio Code

: vscode 설치하면 언어설정은 기본적으로 영어로 세팅되어 있으나, 한국어 팩을 설치해주면 vscode를 한국어로 사용할 수 있다. 이건 개인의 취향이다. 나는 영어로 보는게 편하다.

 

✅Image Preview

: 이미지 URL 코드에 마우스를 올려놓으면 미리보기 이미지를 보여줌

 

비슷한 기능을 제공하는 익스텐션으로 Svg Preview도 있다.

svg 파일 및 svg의 내부 파일 라이브 편집/ 미리보기나 확대 축소를 지원한다.

✅Active File In StatusBar

: 현재 작업중인 파일의 경로를 상태표시줄에 출력

✅Git Lens

: 코드의 특정 단락이나 라인에 해당 내용이 언제, 어떤 사람에 의해 작성된 내역인지 커밋 정보를 표시. 코드에 커서를 올리면 확인 가능.

 

✅Code Spell Checker

: 오타를 방지하는 에디터 플러그인

 

✅Path Intellisense

: 파일명 자동완성 & 파일이나 이미지 등의 경로를 지정할 때 자동으로 경로를 보여주므로 이미지 태그 경로나 CSS 배경 이미지 경로를 쉽게 찾아갈 수 있음.

 

✅IntelliCode

: 코드 추천 완성. 코드를 입력하면 해당 행에 가장 알맞은 어플리케이션 프로그램 인터페이스 (API) 를 추천해줌. 쉽게 바꾸어 말하면 스마트폰 사용 할 때 키보드에서 자동완성 단어를 띄워주는 것과 비슷한 기능