[Tool][VS Code] 상위 10개 VS Code 확장 플러그인 - vscode extension 추천

출처 :

[VS Code] 상위 10개 VS Code 확장 플러그인 - vscode extension 추천

 

 

 

. Material Theme, Material Icon Theme

• 설명 : VS Code 테마 및 아이콘 변경하는 플러그인
• Material Theme 사용법 : 설치 후 왼쪽 하단 설정 아이콘(톱니바퀴) 클릭 > Color Theme 에서 Material Theme 관련 테마 선택
• Material Icon Theme 사용법 : 설치 후 왼쪽 하단 설정 아이콘(톱니바퀴) 클릭 > File Icon Theme에서 Material Icon Theme 선택

아래 10종의 Material Theme 중 선택 가능

• Material Theme
• Material Theme High Contrast
• Material Theme Darker
• Material Theme Darker High Contrast (추천)
• Material Theme Palenight
• Material Theme Palenight High Contrast
• Material Theme Ocean
• Material Theme Ocean High Contrast
• Material Theme Lighter
• Material Theme Lighter High Contrast

Material Theme

 

Material Icon Theme

- File icons

- Folder icons

 

2. Prettier

• 설명 : 파일 저장 시 알아서 포맷에 맞게 소스 코드가 보기좋게 정렬 됨
• 사용법 : 설치 후 Setting화면 (Ctrl + ,) 에서 "Format on Save" 입력 후 체크해 줌 (사용안 할 경우 다시 체크 해제)

 

3. Bracket Pair Colorizer 2

• 설명 : 소스에 괄호({}) 영역에 색깔을 표시해줘 코딩하기 편하게 해준다.  간단한 소스일 경우 상관없으나 소스가 길어질 경우 아주 유용하다.
• 사용법 : 설치 후 바로 적용 됨

샘플 스크린샷

4. indent-rainbow

• 설명 : 들여쓰기 된 부분에 색깔을 표시 해 줌
• 사용법 : 설치 후 바로 적용 됨

샘플 스크린샷

5. Auto Rename Tag

• 설명 : html Tag 명 변경 시 열림 태그 변경 시 닫힘 태그를 자동으로 변경해줌. 물론 닫힘 태그 변경 시 열림태그가 자동으로 변경 됨
• 사용법 : 설치 후 바로 적용 됨

 

6. REST Client

• 설명 : URL을 입력하여 간단하게 HTTP 요청을 보내고 직접 응답의 소스를 바로 확인가능.
• 사용법

      신규파일을 만들고, 확장자를 http로 합니다.(ex. requestTest.http)

      만든 파일에 URL을 입력 ex. GET https://jsonplaceholder.typicode.com/posts 

      입력 하면 입력한 글 상단에 Send Request라는 글자가 생기고 클릭 시 요청하여 응답의 소스를 보여줌

      여러 URL을 입력할 경우 ### 으로 구분하여 입력 가능하며, header 내용 및 파라메터도 직접입력하여 전송 가능

 

7. CSS Peek

• 설명 : html 파일에 css를 사용한 class의 해당 css 파일의 위치로 이동해줌
• 사용법 : html 태그에서 css를 사용한 부분에 ctrl+마우스 클릭 또는 F12 

 

8. HTML CSS Support

• 설명 : CSS 파일 속성 자동완성 기능 제공, html에서 CSS 파일의 class 자동 완성 기능 제공
• 사용법 : 설치 후 바로 사용 가능

 

9. Live Sass Compiler

• 설명 : sass 라이브 컴파일러
• 사용법

설치 후 바로 사용 가능하나, 설정파일(settings.json)을 수정하여 여러가지 활용이 가능하다.

여기서는 아래와 같이 설정

설명하다

 

 

    "liveSassCompile.settings.formats": [
        {
            "format": "compressed",  // 압축
            "extensionName": ".min.css",  // min.css 파일로
            "savePath": null  // 경로 별도 지정 없음, 지정 시 해당 경로로 min.css 파일이 생김
        }
    ],
    "liveSassCompile.settings.generateMap": false  // map 파일 미생성

하단의 Watching Sass 클릭하여 활성화 한다. 파일이 저장될때마다 자동으로 컴파일 됨.

 

10. Live Server

• 설명 : html 소스등의 내용을 실시간으로 서버로 띄워 화면에 표시해준다. html 소스 수정 시 실시간 반영
• 사용법 : 설치 후 하단의 Go Live 클릭 또는 마우스 오른쪽 버튼 클릭하여 "Open with Live Server" 메뉴 클릭

  

Emmet

• 설명 : html 을 일일이 칠 필요없이 약어등을 사용하여 바로 생성 (익숙해지면 정말 빠르게 html 파일을 작성할 수 있다.)
• 사용법 : 바로 사용가능 (ex. ! 입력 시 자동으로 html 형식에 맞게 내용이 입력 됨.)

 

참고 : https://youtu.be/c5GAS_PMXDs