유용한 VS Code 확장 - HTML, CSS, JS, React...

 

 

 

맥시멀리스트이기에 온갖 익스텐션을 다 깔아봤는 데, 사용하고 있거나 사용할 만 해 보이는 확장들을 정리해보려고 한다.

VS Code를 쓰게 된 지 얼마 되지 않아서 계속 사용해 보며 업데이트하게 될 것 같다.

 

개인적으로 필수로 보이는 익스텐션은 👑노란색, 정말정말정말 유용한 익스텐션은 👍초록색으로 구분했다.

 

 

 

 

 

 

👒 테마 관련

 

👑 Priettier : 가장 대중적인 코드 포맷터. 코드 모양을 보기 좋게 정렬해 준다.
    - 저장할 때 코드를 정리하려면 Setting > "format on save" 검색 > 체크박스 체크
    - 복붙할 때 코드를 정리하라면 Setting > "format on paste" 검색 > 체크박스 체크

Material Icon Theme : 파일 확장자 별 아이콘을 우리가 가장 잘 알고 있는 아이콘으로 바꿔줌. 직관적.

 

 

Xcode Default Theme : 에디터 테마. 개인적으로 좋아하는 테만데 JS에서는 그닥인듯... 그래도 기본테마보다는 가독성이 좋아서 쓰고 있다.

 

 

 

 

 

 

😊 공통

 

 

👍 Code Spell Checker : 영어 스펠링 체커. 변수명을 정할 때 창피함을 덜어줌

 

👑 Path Intellisense : 파일 경로를 찾을 때 가능한 경로를 미리 보기 할 수 있음.

 

 

👍 Korean Language Pack for Visual Studio Code : 한글팩. 간지는 떨어지지만 가독성은 up.

 

TODO Highlight : 주석에서 TODO: 와 FIXME: 를 찾아서 눈에 안 띌 수 없게 하이라이팅 해주는 확장.

 

 

Import Cost : 모듈이나 패키지를 import 할 때 용량을 함께 표시해 주는 확장

 

 

Indenticator : 들여 쓰기를 몇 칸 했는지 같은 레벨의 코드들을 표시해 주는 확장

 

Jumpy : 마우스를 안 쓰고도 에디터 내에서 커서 위치를 바꿀 수 있는 다양한 단축키 제공

 

 

 

 

 

 

 

💩 HTML / CSS

 

👑 Auto Close Tag : HTML 태그를 생성하면 자동으로 닫는 태그도 만들어줌. < /> 같은 형식이어도 슬래시를 치면 알아서 닫는 괄호가 완성됨.

 

👑 Auto Rename Tag : 태그의 이름을 수정하면 닫는 태그의 이름도 자동으로 수정해 주는 익스텐션.

 

colorize : CSS 스타일에서 색상을 미리 보기 할 수 있음

 

 

CSS Initial Value : CSS에서 속성이 적용되기 전 초기 값이 얼마였는지 확인할 수 있는 확장

 

👍 CSS Peek : HTML에서 id나 class에 적용된 CSS를 바로 확인 가능(JSX에서는 안 되는 듯)

 

Font Awesome Auto-complete & Preview : Font Awesome 아이콘을 편하게 사용하도록 미리 보기 등을 지원해 주는 툴

 

 

Highlight Mathing Tag : HTML에서 태그를 클릭하면 그에 상응하는 여는/닫는 태그도 하이라이트 되어서 보임

 

👍 HTML CSS Support : HTML에 class를 입력할 때 이미 존재하는 style css 관련 class 목록을 보여줌. 

 

htmltagwrap : 기존 HTML 블록을 감싸는 상위 태그를 만들고 싶을 때 단축키 하나로 바로 도와주는 확장

 

Image preview : CSS 상에서 불러온 이미지를 미리 보여줌

 

 

open in browser : 브라우저에 주소를 직접 치지 않아도 VS Code에서 바로 브라우저를 켜서 해당 HTML 파일을 열어주는 확장

 

👑 Live Server : 브라우저를 새로고침하지 않아도 변경된 저장 사항이 적용되게 해주는 확장 

 

 

 

 

 

 

 

👻 Java Script (JS, React... )

 

👑 Auto import - ES6, TS, JSX, TSX : 컴포넌트나 파일명을 입력하면 자동으로 import 되는 확장

 

👑 ESLint : 문법 오류를 알려줌, JS 계열 linter 중에서 가장 인기 있음

 

👍 JavaScript (ES6) code snippets : ES6 버전의 JS에 대한 자동완성 제공. 자동완성 키워드를 커스텀해서 저장해 놓고 단축키처럼 사용할 수 있는 기능도 있음

 

👍 JavaScript Auto Backticks : JS에서 따옴표(“힝”)로 괄호를 열었는데 backtick을 써야 하는 경우(`${hing}입니다.`) 괄호를 자동으로 바꿔줌

 

JavaScript Booster : JS 코드에 대한 다양한 quick-fix 지원

 

👍 JS HTML <tags/> : JSX에서 HTML 태그를 작성할 때 태그 이름만 작성하고 엔터를 누르면 여는 태그와 닫는 태그까지 한 번에 생성됨. ( ex: div + enter >> <div></div> )

 

👍 REST Client : VS Code 내에서 API test를 해볼 수 있는 확장

 

👍 Reactjs code snippets : 리액트 snippets. 컴포넌트 생성 관련 단축어 포함

 

React Pure To Class : 리액트 함수형 컴포넌트를 클래스형으로 변환해 주는 툴

 

VSCode React Refactor : JSX 리팩토링을 도와주는 툴. 코드의 일부를 새 함수형 컴포넌트로 떼어내서 생성해 주는 기능도 있음.