VS Code Extensions 확장프로그램 정리

 

 

visual studio code 확장프로그램 추천

 

 

 

1. Auto Rename Tag

 

이 확장 프로그램은 여는 태그(예: <div>)를 수정하면 자동으로 닫는 태그(예: </div>)도 동일하게 수정해주는 기능을 제공한다.

이는 태그를 쌍으로 인식하고 한 쪽을 수정할 때 다른 쪽도 자동으로 동기화되도록 도와준다.

코드 작성 시 태그를 열고 닫을 때 발생하는 일관성을 유지하고 오타를 방지하는 데 도움이 된다.

 

 

 

2. vscode-icons

 

파일 및 폴더에 아이콘을 추가하여 프로젝트 내 파일 유형을 시각적으로 구별할 수 있도록 도와주는 extension이다.

이 확장 프로그램은 파일 및 폴더 아이콘을 테마별로 지원한다.

이런식으로 나온다.

 

 

 

 

3. Code Spell Checker

 

코드에서의 오타를 식별하고 수정하는 데 도움을 준다.

이 확장 프로그램은 주로 프로그래밍 언어의 키워드와 식별자에 대한 스펠링을 검사해준다.

 

 

 

 

4. HTML CSS Support

HTML 및 CSS 코드 작성을 더욱 편리하게 지원하고 개선하는 데 도움이 된다.

HTML 및 CSS 코드 작성 중에 코드 자동 완성 기능이 있고,

CSS 클래스나 ID를 지정할 때 자동으로 프로젝트 내에서 사용되고 있는 클래스 및 ID 목록을 추천해주고,

HTML 파일에서 CSS 파일을 연결할 때나 이미지 파일을 포함할 때, 파일 경로의 자동 완성을 지원하여 경로를 쉽게 찾을 수 있게 해준다.

 

 

 

5. Live Server

 

로컬 서버를 띄워서 프로젝트를 실시간으로 브라우저에 보여주는 확장 프로그램이다.

실시간 업데이트가 되니까 코드를 수정하면 브라우저가 자동으로 새로 고쳐져서 변경된 내용을 바로 확인할 수 있다.

 

 

 

6. Korean Language Pack for Visual Studio Code

 

한국어 사용자들을 위한 언어 팩으로, 인터페이스와 메뉴 등을 한국어로 변경해주는 확장 프로그램이다.

 

 

 

 

7. Prettier

 

코드 포맷터(Code Formatter) 중 하나.

Prettier는 CSS, HTML, JSON 등 다양한 언어에서도 사용할 수 있는 확장프로그램으로 코드 파일을 자동으로 읽어들여 일관된 코드 스타일로 포맷팅한다.

들여쓰기, 공백, 따옴표 등과 같은 다양한 스타일 규칙을 적용한다.

사용자가 직접 설정할 수 있는 다양한 규칙을 제공한다.

팀 협업시 Prettier를 사용하면 팀 내에서 코드 스타일을 통일하고 일관성을 유지하기 쉽다. 

 

 

 

 

8. Material Theme

 

Visual Studio Code에서 사용할 수 있는 테마(Theme) 중 하나이다.

Material Theme은 두 가지 주요 모드인 밝은(light) 및 어두운(dark) 모드의 여러가지를 제공하여 사용자가 선호하는 스타일을 선택할 수 있다.

설치 후에는 "File > Preferences > Color Theme"을 선택하여 Material Theme을 선택할 수 있다.

 

 

 

 

9. Path Intellisense

 

파일 경로나 모듈의 경로를 입력할 때 자동 완성 기능을 제공한다.

상대 경로(./, ../)나 절대 경로(/, C:/)에 대한 자동 완성을 지원한다.

 

 

 

10. Quokka.js

 

JavaScript 및 TypeScript 개발을 위한 테스트 도구 중 하나로 코드를 작성할 때마다 Quokka.js는 코드의 결과물을 실시간으로 에디터 내에 출력해준다.

이를 통해 코드 작성 중에 발생한 결과를 즉시 확인할 수 있다

Quokka.js는 코드의 각 라인에서 변수의 값을 실시간으로 표시하여 디버깅을 쉽게 만들어준다. 

 

 

 

 

11. Turbo Console log

 

JavaScript 및 TypeScript 코드에서 디버깅을 편리하게 하기 위한 도구 중 하나로 간단한 명령어를 통해 손쉽게 로깅을 추가하고 디버깅 정보를 확인할 수 있다.

tcl 또는 log 등의 단축어를 사용하여 로깅을 간편하게 추가할 수 있다.

 

 

 

 

 

이제부턴 콘솔로그 하나하나 안쳐도 되겠다.....