Visual Studio Code - 마이크로소프트에서 제공하는 코드 편집 도구

 Extensions

Auto Rename Tag 태그를 변경할 때 여는 태그 또는 닫는 태그 중 하나만 변경해도 두 태그를 동시에 자동으로 변경해 줌.

Auto Close Tag 여는 태그 <OOO> 를 입력하면 닫는 태그 </OOO> 를 자동으로 완성해 줌. vs code 1.6 버전 부터는 기본으로 포함되어 있으나 html 만 작동하므로 다른 언어에 적용하기 위해서는 설치해 주는 것이 좋음.  Auto Rename Tag와 함께 사용하면 Good!

Bracket Pair Colorizer 2 프로그래밍 언어는 대부분 괄호로 구분하여 명령이 입력되거나 구분이 변경됩니다. 다수의 괄호가 중첩으로 사용되는 경우 관련된 괄호 쌍을 구분하기가 어려운데, { 괄호 쌍에 맞춰 ( 색상 ) 을 구분해 줌 } 으로 구분이 편해 집니다. 

Korea Language Pack for Visual Studio Code 한국어 언어 팩

Color Highlight 색상값을 실제 색상과 함께 보여줌

CSS Peek html 태그 상에서 클릭스를 찾아 CSS 상의 클래스 정의 위치로 이동할 수 있음.
Ctrl 키를 누른 채 id 또는 class 에 마우스를 클릭하면 CSS 정의 내용을 보여주고, 수정하면 CSS 에 반영됨. CSS 정의 내용을 보여주는 창의 상단 파일명을 클릭하면 해당 위치로 이동함.

indent-rainbow 들여쓰기 단계별로 색상 음영을 주어 구분하기 편하도록 함.

IntelliSense for CSS class names in HTML 태그 작성시 class 부분의 적용가능한 클래스 목록을 지능적으로 보여줌.

Path Intellisense 태그 작성시 이미지의 경로를 자동으로 보여줌

Live Server 코드 변경시 실시간으로 결과를 확인할 수 있음. 아직 어떻게 사용하는지는 모르겠음.

Error Lens 코드에 오류가 있는 경우 알려줌.

Prettier 언어별 양식에 맞게 코드를 정렬해 줌. Code formatter 의 일종

Prettier php 플러그인 - Prettier 를 이용하여 PHP도 정렬할 수 있는 플러그인
-- 설치방법 ① Node.js 설치(이 때 npm이 같이 설치됨)  ② VCCode 재시작  ③ VCCode 화면에서 Ctrl + ` 하여 터미널 열기  ④ 터미널에서 CD 명령으로 C:\Users\사용자명\.vscode\extensions\esbenp.prettier-vscode-버전번호 폴더(prettier 설치 경로)로 이동  ⑤ npm 으로 Prettier php 플러그인 설치 → npm install @prettier/plugin-php   ⑥ VCCode 설정에 가서 아래 내용을 setting.json 에 추가해 줌. 

Format HTML in PHP HTML과 PHP가 섞여 쓰이고 있을 때는 Prettier가 작동하지 않음. 이 플러그인은 HTML과 PHP가 섞여 쓰이고 있는 경우에도 Prettier가 정상 작동하도록 해줌.

Highlight Matching Tag 편집중인 태그 또는 태그 범위 내에 커서가 있을 때 해당 태그의 시작과 끝을 알려줌.

ESLint  코드의 오류를 바로 확인할 수 있도록 오류사항을 보여줌.

todo highlight // TODO : // FIXME : 등 주석을 눈에 잘 띄이도록 색상을 입혀줌. 

Peacock 프로젝트마다 VSC의 창 색상을 다르게 표현하여 프로젝트간 구분을 쉽게 할 수 있도록 만들어줌.

AICodeHelper  ChatGPT를 이용해서 코딩을 도와 주는 도구입니다. 유료이므로 OpenAI API키가 필요합니다. 

사용량은 https://platform.openai.com/account/usage 에서 확인할 수 있습니다. 사용법은 오른쪽 배너를 클릭하면 유튜브에서 확인 할 수 있습니다. 

Print  인쇄할 수 있음. 코드 범위잡고, 마우스 오른쪽 버튼하면 맨 위에 Print