개요
2019년 VS Code 설치 및 확장 프로그램 추천을 올린적이 있습니다.
아래 이전에 추가한 확장 프로그램에 이어 확장 프로그램을 추가 공유합니다.
확장 프로그램 추천
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
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Prettier – Code formatter
줄 간격 및 행을 자동으로 정렬해주는 프로그램입니다.
Prettier – Code formatter – Visual Studio Marketplace
Extension for Visual Studio Code – Code formatter using prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Auto reanme tag
HTML/XML 태그를 자동으로 닫아주고 이름을 변경 해주는 편리한 확장 프로그램입니다.
이건 HTML/XML을 많이 코딩하는 개발자 및 디자이너에게 좋은 기능입니다.
Auto Rename Tag – Visual Studio Marketplace
Extension for Visual Studio Code – Auto rename paired HTML/XML tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
CSS Peek
HTML에서 class를 Ctrl 키를 누른 채 클릭하면 해당 CSS를 바로 찾아갈 수 있게 해주는 편리한 기능입니다.
CSS Peek – Visual Studio Marketplace
Extension for Visual Studio Code – Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
Bracket Pair Colorizer 2
괄호 {} 색깔으로 구분하게 되어 가속성 좋게 만들어주는 확장 프로그램입니다.
[Deprecated] Bracket Pair Colorizer 2 – Visual Studio Marketplace
Extension for Visual Studio Code – A customizable extension for colorizing matching brackets
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
indent-rainbow
Bracket Pair Colorizer와 다른 가속성을 만들어주는 프로그램입니다.
들여쓰기를 무지개 색상으로 표현되어 코딩에 도움을 주는 프로그램입니다.
indent-rainbow – Visual Studio Marketplace
Extension for Visual Studio Code – Makes indentation easier to read
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
Settings Sync
VS Code 설정 동기화 하여 다른 환경에서도 손 쉽게 본인 환경으로 설정할 수 있도록 도와주는 프로그램입니다.
Settings Sync – Visual Studio Marketplace
Extension for Visual Studio Code – Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
Font-Awesome Auto-complete & Preview
폰트 어썸을 사용할 때 편리한 기능입니다.
폰트 어썸 관련해 미리보기를 가능하게 해주는 프로그램입니다.
Font Awesome Auto-complete & Preview – Visual Studio Marketplace
Extension for Visual Studio Code – Autocomplete & preview Font Awesome icons in any language.
https://marketplace.visualstudio.com/items?itemName=Janne252.fontawesome-autocomplete
GItLens
git을 사용한다면 아주 유용한 확장 프로그램입니다.
코드상에 커서를 올릴 때마다 누가 언제 작성했는지 확인할 수 있습니다.
GitLens — Git supercharged – Visual Studio Marketplace
Extension for Visual Studio Code – Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Multiple cursor case preserve
다중 커서로 특정 단어를 수정할 때 대소문자 구분 없이 수정이 되어서 따로 수정을 해줘야 하는데 아 불편함을 제거해주는 편리한 프로그램입니다.
Multiple cursor case preserve – Visual Studio Marketplace
Extension for Visual Studio Code – Preserves case when editing with multiple cursors
https://marketplace.visualstudio.com/items?itemName=Cardinal90.multi-cursor-case-preserve
CodeSnap
블로그나 다른 사람에게 내 코드를 공유하려고 할 때 색상 하이라이트가 되지 않거나 이상하게 복사가 될 때가 많은데 내 코드 그대로 이쁘게 전달해줄 수 있는 확장프로그램입니다.
커맨드로 CodeSnap을 실행한뒤에 원하는 부분을 코드를 드래그하면 자동으로 스냅이 됩니다.
선택한 코드가 마음에 들었다면 카메라를 누르면 이미지 파일로 저장이 됩니다.
CodeSnap – Visual Studio Marketplace
Extension for Visual Studio Code – 📷 Take beautiful screenshots of your code
https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap
이상 Visual Studio Code 확장 프로그램을 추천드렸습니다.
각 확장 프로그램에 대해 상세 설명은 기회가 되면 올리도록 하겠습니다.
감사합니다.
답글 남기기