[Visual Studio Code] 유용한 확장 프로그램 추천

안녕하세요.
더 나은 개발환경을 만들기 위해 눈물을 머금고 시행착오를 거치며 찾아 설치한 VSCode의 유용한 확장 프로그램
컴퓨터를 포맷하고 다시 찾아서 설치하려니 기억이 나지 않아 이렇게 글을 쓰게 되었습니다. 😏

이제부터 VSCode 확장프로그램을 추천 드겠습니다.

---

코드 정렬 서포트를 위한 확장 프로그램

---

1. Beauty

자동줄맞춤 해주는 코드 포맷터 확장 프로그램입니다.
Prettier의 자동 정렬 시스템이 원하는 스타일로 포맷되지 않을 때, 사용하기 좋은 확장 프로그램입니다.
Ctrl  + Shift + B를  사용하여 정렬할 수 있습니다.

● 지원하는 언어
     javascript, jsx
                                                    css, less,
                                                    python (파이썬은 정렬이 중요하므로 사용 안 하는 것이 좋습니다.)
                                                    markups(html, swig, nunjucks)

 

 

2. Prettier

자동줄맞춤 해주는 코드 포맷터 확장 프로그램입니다.
파일저장을 하면 자동으로 완성해 주며, 설정한 옵션에 맞게 정렬해 줍니다.
세미클론(;), 콤마(,)  등 미적용된 라인에 자동으로 입력해 줍니다.

단, 원하지 않는 형태로 자동 정렬이 될 수 있습니다.

                                               ● 지원하는 언어
                                                    JavaScript · TypeScript · Flow · JSX · JSON
                                                    CSS · SCSS · Less
                                                    HTML · Vue · Angular HANDLEBARS · Ember · Glimmer
                                                    GraphQL · Markdown · YAML

 

3. Indent-rainbow

들여 쓰기를 무지개 색상으로 표현해 주어 코딩할 때 가시성을 높여주는 확장 프로그램입니다.
색상표현은 라인색 형태(light)이나, 마커 형태(classic)가 있으며, 스타일에 맞게 설정하여 사용할 수 있습니다.

 

 

 

---

코딩 서포트를 위한  확장 프로그램

---

1. HTML CSS Support

HTML의 Class, Id 요소에 css에서 선언한 css선택자를 사용할 때 자동완성 기능을 제공합니다. 

 

 

 

2. HTML to CSS autocompletion

HTML CSS Support와 반대로 HTML/php의 Class, Id 요소에서 사용한
선택자를 CSS/SCSS에서 자동완성 기능을 제공합니다.

 

 

 

3. Path Intellisense

파일이나 이미지 등의 경로를 지정할 때, 입력에 대한 해당 경로의 리스트가 자동으로 팝업 되고,
리스트 선택 시 자동입력되는 편리한 기능을 제공합니다.

 

 

 

4. ESLint

코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출해 주는 확장 프로그램입니다.
또한 에러 도출이나, 전반적인 코딩스타일과 규칙을 직접 커스텀하여 사용할 수 있습니다.

 

 

 

5. vscode-styled-components

styled-components를 사용할 때 스타일 코드 리스트를 팝업 및 선택 시 자동입력 해주는 기능을 제공합니다.
styled Component에서 css 코드를 작성 시, 자동완성이 안되어 일일이 코드를 입력할 때,
오타로 인해 에러, 버그가 생겨서 오류를 알기 힘들기 경우도 있기에 오타에 대한 방지도 할 수 있어 좋습니다.

 

---

컴파일 서포트를 위한 확장 프로그램

---

1. Live Sass Compiler

Sass/Scss를 자동으로 css, css.map으로 컴파일시켜 주는 기능을 제공합니다.
css, map파일 경로는 setting.json을 통해 커스텀할 수 있으며, map이 필요 없을 때는 css파일만 생성해 줍니다.
특정 폴더의 scss만 컴파일되도록 설정하기도 편하므로 scss 사용을 위해서는 필수라고 할 수 있을 정도로 중요한 확장 프로그램입니다.

 

 

2. Live Server

퍼블리싱, 웹 개발을 할 때 필수로 설치해야 하는 확장 프로그램입니다.
Tomcat과 같은 별도의 서버 통신 없이 가상서버를 이용하여 웹을 실행할 수 있으며,
크롬에서 일반 HTML파일을 열어 볼 때 json 데이터를 가져오는 경우 CORS 정책에 걸리는 불상사도 막을 수 있습니다..
 또한,  파일 저장을 했을 때, 실시간으로 페이지를 업데이트를 해줘 프론트 화면 작업을 할 때 유용합니다.

 

---

그 외 유용한 확장 프로그램

---

1. Korean Language Pack for Visual Studio Code

한국인이라면 거의 필수라고 할 수 있는 VSCode 한글패치 확장 프로그램입니다.
영어가 익숙하지 않으시다면 설치하여 사용합시다.

 

 

 

2. Git Graph

VSCode에서 intelliJ, eclipse, STS처럼 Git Graph를 보기 위해 사용하는 확장 프로그램입니다. 
Git에 commit 한 타임라인을 확인할 수 있으며, Git 명령어도 GUI로 사용할 수 있는 편리한 기능까지 제공합니다.