개발 환경이 바뀌면 VS code 확장프로그램을 다시 설치해야 하는데, 이전에 설치했던 프로그램들이 기억이 나질 않아 지속적으로 활용하고자 이렇게 글을 작성하게 되었다.
😃그럼 웹 개발에 유용한 VScode 추천 익스텐션을 소개하겠습니다.
VScode 확장프로그램(extension)
⬜ 1. Auto Rename Tag
HTML에서 여는 태그나 닫는 태그 중 한 가지만 수정을 해도 두 가지 동시에 수정이 된다.
⬜ 2. Auto Close Tag
Auto Rename Tag와 함께 사용하는 유용한 플러그인이다. vs code 1.6버전 이후부터는 html에 대해서는 포함되어 있다고 한다. 그러나 나머지 파일에서는 작동을 하지 않아서 결국 설치를 하는 것이 편의성이 증가한다.
여는 태그와 닫는 태그를 일일이 입력해야 하던 것을 입력태그만 입력하게 해 준다.
⬜ 3. Bracket Pair Colorizer DLW
괄호 여러개가 겹쳐있는 경우에 어디가 어디로 연결되어 있는지 알기 힘들다. 그럴 때 사용하는 확장 플러그인으로 쌍이 되는 괄호에 맞춰서 색이 변하게 된다.
현재 커서의 위치가 어느 괄호 안에 있는지도 색으로 표시해준다.
⬜ 4. Color Highlight
색을 지정할 때 rgb나 16진수(#F699CC) 등 색상코드로 입력하면 해당하는 색을 코드의 배경색으로 보여준다.
CSS를 입히는 과정에서 현재 무슨 색으로 적용하였는지 바로바로 볼 수 있다.
⬜ 5. indent-rainbow
들여쓰기를 무지개 색상으로 표현되어 코딩에 도움을 주는 프로그램이다.
⬜ 6. Highlight Matching Tag
페어 태그를 하이라이트 해주는 확장프로그램이다.
중첩되어 있거나 복잡한 태그 지옥을 분석할 때 유용하다.
⬜ 7. Korean Language Pack for Visual Studio Code
개인의 취향에 따라 영어 버전을 그대로 사용할 수 있겠으나, 필요시 한국어 팩을 설치해 한국어로 설정할 수 있다.
⬜ 8. Material Icon Theme
아이콘 테마를 설정할수 있다. 머티리얼 외에도 많은 테마가 있으니 취향에 맞게 선택하면 된다.
⬜ 9. Image Preview
이미지 URL 코드에 마우스를 올려놓으면 미리보기 이미지를 제공하는 확장 프로그램이다.
⬜ 10. Live Server
웹 개발을 한다면 정말 필수적으로 설치해야하는 확장프로그램으로, 코딩하고 있는 홈페이지를 확인할 수 있는 실시간 서버가 열린다.
⬜ 11. Live Preview
HTML을 작성하며 확인하기 위해 빈번하게 브라우저를 켜지 않고 VScode 프로그램 자체에서 라이브 화면을 볼수 있다.
⬜ 12. Live Sass Compiler
Sass나 SCSS를 자동으로 css로 컴파일시켜주는 확장 프로그램이다.
자세한 사용 방법은 다른 작성글에서 볼 수 있다.
그 외
⬜ 13. Active File In StatusBar
현재 작업중인 파일의 경로를 상태표시줄에 출력
⬜ 14. CSS Variable Autocomplete
CSS 변수에 대한 자동 완성 기능을 제공, 모든 css와 유사한 파일(SASS, LESS, CSS 지원)을 스캔하고 모든 변수에 대해 자동 완성 시킨다.
⬜ 15. Git Lens
코드의 특정 단락이나 라인에 해당 내용이 언제, 어떤 사람에 의해 작성된 내역인지 커밋 정보를 흐린 글씨로 자동 표시.(코드상에 커서를 올릴때 마다 확인 가능)
또한, 코드 작성 중 바로 저장소를 탐색 및 비교도 할 수 있다.
⬜ 16. IntelliCode
코드 추천 완성 기능
개발자가 IDE 에디터에 코드를 입력 중인 해당 행에 가장 알맞은 어플리케이션 프로그램 인터페이스 (API) 를 추천해줍니다. 스마트폰 키보드 앱의 자동완성 단어 추천기능과 흡사한 기능
⬜ 17. Live Share
코드 동시 편집/ 웹 프로그래밍 시 편집된 내용을 내 PC에서 url로 접속하여 확인 가능/ 커뮤니케이션 툴 ( 채팅, 음성통화 )
⬜ 18. Path Intellisense
파일명 자동완성을 지원하는 익스텐션.
파일이나 이미지 등의 경로를 지정할 때 자동으로 경로를 보여주며, 이를 선택해서 지정할 수 있는 확장 플러그인
이미지 태그 경로나 CSS 배경 이미지 경로를 찾아갈 때 매우 편리하다.
⬜ 19. SCSS IntelliSense
scss 코딩하는데 있어 코드 완성 리스트 기능을 제공
⬜ 20. Svg Preview
svg 파일 및 svg의 내부 파일 라이브 편집/ 미리보기 패닝 및 확대, 축소
⬜ 21. Project Manager
자주 사용하는 프로젝트들을 저장해 편집기 내에서 목록으로 쉽게 관리하고 간편하게 스위칭 해주는 기능을 제공
저장을 원하는 폴더에 들어가 cmd(ctrl) + shift + p 누르고 save Project 하면 폴더 생성됨
⬜ 22. Code Spell Checker
code spell checker 란 코딩 할 때 오타를 방지하는 에디터 플러그인이다.
2024 추가 - [Code Runner, Color Info, HTMLHint, JavaScript (ES6) code snippets, ESLint, Thunder Client, Prettier, Stylelint]
감사합니다.