[VSCode] 애정하는 익스텐션 꾸러미

Visual Studio Code LOGO

 

개인적으로 필수 또는 자주 사용하는 VSCode 익스텐션들

• Auto Rename Tag
• Live Server
• GitLens
• Prettier
• Setting Sync
• Live Sass Compiler

 

 

Auto Rename Tag

html 태그 시작을 수정하면 닫힘 태그도 함께 수정

https://github.com/formulahendry/vscode-auto-rename-tag

GitHub - formulahendry/vscode-auto-rename-tag: Automatically rename paired HTML/XML tag

 

 

Live Server

간단히 서버를 띄워 수정 사항 실시간 적용

https://github.com/ritwickdey/vscode-live-server

GitHub - ritwickdey/vscode-live-server: Launch a development local Server with live reload feature for static & dynamic pages.

 

 

GitLens

Git 협업시 변경점 비교 작업자 시각화 로그

https://github.com/eamodio/vscode-gitlens

GitHub - eamodio/vscode-gitlens: Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at

 

 

Prettier

JS, CSS, HTML 등의 코드를 자동으로 보기 좋게 정렬

https://github.com/prettier/prettier-vscode

GitHub - prettier/prettier-vscode: Visual Studio Code extension for Prettier

 

 

Setting Sync

매번 VSCode 환경을 찾아서 설치는 그만!
VSCode의 익스텐션 설정을 Gist에 저장하고 어디서나 동기화 해서 사용

https://github.com/shanalikhan/code-settings-sync

GitHub - shanalikhan/code-settings-sync: 🌴💪 Synchronize your Visual Studio Code Settings Across Multiple Machines using Gi

* 단축키 :
Shift + Alt + U : 새 설정 업로드
Shift + Alt + D : 저장된 설정 불러와서 동기화

 

 

Live Sass compiler

패키지 의존성 이슈나 번들러 세팅 필요없이 간단히 실시간 Sass 컴파일이 가능한 꿀템.
Vscode 환경 파일 옵션으로 컴파일 결과 css 저장 경로, 압축 옵션, map 파일 옵션등을 제공해줍니다.

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass 

Live Sass Compiler - Visual Studio Marketplace

옵션 설정
setting > 검색창에서 'livesass' > format ('setting.json') 

"liveSassCompile.settings.formats":[
  {
  	"format": "expanded", 		// "compressed", "compact", "nested" - 압축율 설정
  	"extensionName": ".css", 	// 확장명 설정 (ex: ".min.css")
  	"savePath": null			// css 저장경로 (ex: "~/../css/")
  },
],
"liveSassCompile.settings.excludeList": [	// 컴파일 예외 설정
    "**/node_modules/**",
    ".vscode/**"
],
"liveSassCompile.settings.generateMap": false, // map 파일 생성 옵션
"liveSassCompile.settings.autoprefix": [	// 브라우저별 css prefix 옵션
    "> 1%",
    "last 2 versions"
]