[HTML5] - 17 - Visual Studio 추천 확장 프로그램
#주의#
이 글은 강의 글이 아니다.
틀린 부분, 깔끔하지 못한 부분 있을 수 있다.
지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다.
이번에는 Visual Studio를 사용해 코딩을 하면서 같이 쓸만한 확장 프로그램 몇개 추천해려고 한다.
아직까지 많은 확장프로그램을 써보진 않았기 때문에 이게 전부가 아님을 유의하기 바란다.
1. Live Server
Live Server - Visual Studio Marketplace
Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages
marketplace.visualstudio.com
라이브 서버는 코딩의 수정 결과를 새로 고침 없이 실시간으로 브라우저에서 확인할 수 있게 해준다.
라이브서버는 웹서버가 설정되지 않는 컴퓨터에서 가상웹서버의 역할을 해주는 것이다.
로컬 컴퓨터에서 테스트하지 못하는 스크립트를 코딩할 때 필수다.
서버에 업로드 하지 않더라도 로컬에서 결과를 확인 할 수 있게 가상서버의 기능을 제공한다.
서버세팅하지 않고 스크립트 작성하시는 분들에게는 꼭 필요한 확장프로그램이라고 생각한다.
2. Open in browser
https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser
open in browser - Visual Studio Marketplace
Extension for Visual Studio Code - This allows you to open the current file in your default browser or application.
marketplace.visualstudio.com
가상서버 역할을 해주는 Live Server는 편리한 기능을 제공해 준다.
하지만 라이브로 코딩결과를 브라우저에 보여주다보니 1개의 프로젝트만 브라우저에서 확인 할 수 있다.
라이브 서버로 브라우저에서 실시간으로 확인 하는게 두개 이상이 불가하며, 경고 메시지가 나오고 실행되지 않는 경우가 있다.
라이브 서버로 확인하지 않지만 다수의 HTML 페이지를 확인해야 할 때 유용하게 사용할 수 있습니다.
단축키도 제공하여 더 편리하다.
3. Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Prettier - Code formatter - Visual Studio Marketplace
Extension for Visual Studio Code - Code formatter using prettier
marketplace.visualstudio.com
코딩을 수정 유지 보수 하다보면 코드의 들여쓰기 줄바꿈 등이 지저분해지는 경우가 다반사다.
지저분해진 코드를 코드 형식에 맞게 자동으로 정렬해 주는 기능을 제공해준다.
직접 타이핑하는 경우가 아니라면 지저분해지기 쉽다.
또한, 깔끔함을 추구한다면 필수라고 생각된다.
4. Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Auto Rename Tag - Visual Studio Marketplace
Extension for Visual Studio Code - Auto rename paired HTML/XML tag
marketplace.visualstudio.com
HTML/XML 의 여는 태그 ex) <body>나 닫는 태그 ex) </body>를 수정하면 쌍을 이루는 태그를 자동으로 수정해준다.
이 또한 코딩을 할때 시간절약에 도움이 된다.
혹시 추천 할 확장 프로그램이 더 있다면 댓글로 추천 바란다.
'개발 이야기 > [HTML5]' 카테고리의 다른 글
| [HTML5] - 19 - 게시글 삭제 기능 만드는 법 (0) | 2023.05.06 |
|---|---|
| [HTML5] - 18 - 반응형 게시판 만드는 법 (2) | 2023.05.06 |
| [HTML5]- 16 - 작성 시간 표시 기능 만드는 법 (4) | 2023.05.05 |
| [HTML5] - 15 - 게시글 작성 기능 만드는 법 (1) | 2023.05.05 |
| [HTML5] - 14 - 부트스트랩을 이용해서 웹페이지 만드는 법 (1) | 2023.05.05 |
댓글