visual studio code 유용한 확장 기능 모음 7가지

비주얼 스튜디오 코드에서

유용한 확장 기능 몇 가지를 소개해드릴게요.

 

---

1. Korean(사용법) Language Pack for Visual Studio Code

visual studio code를 처음 설치하면 영어가 기본 언어인데요 확장 기능을 이용해 한글로 변경할 수 있습니다.

 

한글 패치

① Korean(사용법) Language Pack for Visual Studio Code 설치

② 설치 방법

[coding/editor] - [vs code] 비주얼 스튜디오 코드 한글 패치 하기

[vs code] 비주얼 스튜디오 코드 한글 패치 하기

 

반응형

---

2. php intellisense for codeigniter

visual studio code에서 php를 사용할 때 좋은 확장 기능입니다.

 

php 개발환경 설정

① php intellisense for codeigniter 설치

② 설치 방법

[coding/editor] - [vs code] 비주얼 스튜디오 코드 php 개발환경 설정하기

[vs code] 비주얼 스튜디오 코드 php 개발환경 설정하기

 

---

3. Bracket Pair Colorizer 2

코드 중 괄호의 색을 바꿔주는 기능입니다. 괄호 안에 괄호 안에... 이런 식으로 여러 겹이 겹쳐져있을 때 알아보기 쉬워집니다.

 

괄호 색 넣기

① bracket pair colorizer 2 설치

② 설치 방법

[coding/editor] - vs code 괄호 색 넣어주는 확장 기능 설치해보자

vs code 괄호 색 넣어주는 확장 기능 설치해보자

 

---

4. indent-rainbow

들여 쓰기를 했을때 앞쪽의 공백에 색을 채워주는 기능입니다. 라인을 맞춰서 보기 좋습니다.

 

들여쓰기 색 넣기

① indent-rainbow 설치

② 설치 방법

[coding/editor] - 들여쓰기 색 넣기 VS code

들여쓰기 색 넣기 VS code

 

---

 

5. HTML to CSS autocompletion

css 파일에서 html에 작성한 class명을 보여주는 기능입니다. css와 html 문서를 왔다 갔다 할 필요가 없어져서 좋습니다.

 

css에서 class명 보기

① html to css autocompletion 설치

② 설치 방법

[coding/editor] - css에서 html class 보기

css에서 html class 보기

 

---

 

6. Auto Rename Tag

html에서 여는 태그의 이름을 수정하면 닫는 태그의 이름도 수정해줍니다. 반대의 경우도 마찬가지입니다.

 

태그 이름 자동 수정하기

① auto rename tag 설치

② 설치 방법

[coding/editor] - 비주얼 스튜디오 코드 html 태그 자동으로 바꾸기

비주얼 스튜디오 코드 html 태그 자동으로 바꾸기

---

7. Prettier

코드의 전체적인 형식을 조절할 수 있습니다.

 

코드 형식 정하기

① prettier 설치

② 설치 및 설정 방법

[coding/editor] - 비주얼 스튜디오 코드 prettier

비주얼 스튜디오 코드 prettier

---

이 모든 확장 기능은 본인의 개발 환경 편의를 위해서 설치하는 것이지

의무는 아니기 때문에 꼭 설치하실 필요는 없습니다.

먼저 겪어보시고 불편함을 느끼시면 다시 돌아와서 설치해보세요.

 

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

[같이 보면 좋은 포스팅]

[coding/editor] - 비주얼 스튜디오 코드에서 찾아서 바꾸기

비주얼 스튜디오 코드에서 찾아서 바꾸기

[coding/editor] - vs code에서 코드 한 번에 주석처리하기

vs code에서 코드 한 번에 주석처리하기

 

 

그럼 이만.

총총.