일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 웹디자인
- 디자인토큰
- design token
- 생성AI
- 한글자동화
- chatGPT
- 에러노트
- three.js
- 에어테이블
- 프론트엔드
- blender
- 디자인 토큰
- sass
- SaaS디자인
- 3d
- 리액트
- UX
- 디자인
- 플랫폼
- scss
- CSS
- CINEMA4D
- Airtable
- 문서자동화
- 파이썬
- frontend
- 업무자동화
- 데이터분석
- angular
- UI
- Today
- Total
이게 무슨 일이야!
VSCode 로 개발 환경 세팅할 때 유용한 Extension 본문
프로젝트에서 유용하게 사용했던 VSCode Extension 을 공유하려고 합니다.
아래 스토어에서 검색해서 볼 수도 있고,
https://marketplace.visualstudio.com/vscode
Visual Studio Marketplace
Extensions for Visual Studio family of products on Visual Studio Marketplace
marketplace.visualstudio.com
VSCode 의 Extension 탭에서 검색해서 추가하는 것이 일반적인듯 합니다.
기본적인 세팅
현재 만드는 페이지를 로컬 웹서버에서 쉽게 띄워서 볼 수 있는 Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
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
화면 미리볼 파일을 우클릭해서 Open with Live Server 를 선택하면 됨
git 을 사용한다면, git history 를 볼 수 있는 Git History
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
Git History - Visual Studio Marketplace
Extension for Visual Studio Code - View git log, file history, compare branches or commits
marketplace.visualstudio.com
퍼블리셔에게 특히 유용한 Extension
태그 닫기를 자동 완성해주는 Auto Close Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Auto Close Tag - Visual Studio Marketplace
Extension for Visual Studio Code - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
marketplace.visualstudio.com
태그 앞부분을 바꾸면 닫기 태그도 자동으로 바꿔서 완성해주는 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
CSS 의 컬러값의 색을 눈으로 미리 확인 가능한 Color Highlight
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
Color Highlight - Visual Studio Marketplace
Extension for Visual Studio Code - Highlight web colors in your editor
marketplace.visualstudio.com
'프로젝트 관리' 카테고리의 다른 글
[프로젝트 관리 툴 세팅] 일반적인 레드마인 같이 Jira 세팅해보기 (0) | 2024.02.19 |
---|---|
Jira 일감 자동 생성시 날짜 넣기 (0) | 2023.03.23 |