설치
VS Code 설치 파일은 아래 링크로 가시면 됩니다.
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
그럼 아래와 같이 화면이 나옵니다.
각자 맞는 OS를 선택하셔 다운로드 하시면 됩니다.
확장 프로그램
확장 프로그램에 설명이 필요한 부분은 따로 기록을 하겠습니다.
Korean Language Pack for Visual Studio Code
기본 영어로 되어 있는 것을 한글로 변경해주는 확장 프로그램입니다.
굳이 한글로 변경 안하시려면 설치를 안해도 됩니다.
Korean Language Pack for Visual Studio Code - Visual Studio Marketplace
Extension for Visual Studio Code - Language pack extension for Korean
marketplace.visualstudio.com
Live Server
서버를 띄우기 위해선 톰캣을 설치하던 npm, gulp등 프레임워크를 이용해서 해야하는데 그런 어려움 없이 손쉽게 서버를 띄울 수 있어 웹 브라우저에서 확인이 가능하고, 저장할 때마다 실시간이 반영되어 개발하는데 편리한 프로그램입니다.
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
Prettier - Code formatter
줄 간격 및 행을 자동으로 정렬해주는 프로그램입니다.
Prettier - Code formatter - Visual Studio Marketplace
Extension for Visual Studio Code - Code formatter using prettier
marketplace.visualstudio.com
IntelliSense for CSS class names in HTML
IntelliSense for CSS class names in HTML - Visual Studio Marketplace
Extension for Visual Studio Code - CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
marketplace.visualstudio.com
Auto rename tag
HTML/XML 태그를 자동으로 닫아주고 이름을 변경 해주는 편리한 확장 프로그램입니다.
이건 HTML/XML을 많이 코딩하는 개발자 및 디자이너에게 좋은 기능입니다.
Auto Rename Tag - Visual Studio Marketplace
Extension for Visual Studio Code - Auto rename paired HTML/XML tag
marketplace.visualstudio.com
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.
marketplace.visualstudio.com
Bracket Pair Colorizer 2
괄호 {} 색깔으로 구분하게 되어 가속성 좋게 만들어주는 프로그램입니다.
[Deprecated] Bracket Pair Colorizer 2 - Visual Studio Marketplace
Extension for Visual Studio Code - A customizable extension for colorizing matching brackets
marketplace.visualstudio.com
indent-rainbow
들여쓰기를 무지개 색상으로 표현을 해줘서 코딩에 도움을 주는 프로그램입니다.
indent-rainbow - Visual Studio Marketplace
Extension for Visual Studio Code - Makes indentation easier to read
marketplace.visualstudio.com
Material Icon Theme
시각적으로 알아보기 쉽게 해주는 확장 프로그램이다. 생각보다 아이콘 디자인이 이뻐 사용할 맛이 나네요.
Material Icon Theme - Visual Studio Marketplace
Extension for Visual Studio Code - Material Design Icons for Visual Studio Code
marketplace.visualstudio.com
Material Theme
테마를 손쉽게 변경을 해주는 확장 프로그램입니다.
Material Theme - Visual Studio Marketplace
Extension for Visual Studio Code - The most epic theme now for Visual Studio Code
marketplace.visualstudio.com
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.
marketplace.visualstudio.com
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.
marketplace.visualstudio.com
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 powerfu
marketplace.visualstudio.com
ESLint
코드를 작성할 때 무언가 잘못되었다면 코드 자체에서 즉각적으로 피드백 받을 수 있습니다.
ESLint - Visual Studio Marketplace
Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.
marketplace.visualstudio.com
Import Cost
라이브러리를 많이 가져오는 사람들에게 유용한 프로그램입니다.
내가 특정한 라이브러리를 가져올 때 얼마나 큰 사이즈를 가져오는지 즉각적으로 확인할 수 있습니다.
사이즈 경각심을 가지고 가져올 수 있게 확인을 해주는 프로그램입니다.
Import Cost - Visual Studio Marketplace
Extension for Visual Studio Code - Display import/require package size in the editor
marketplace.visualstudio.com
Multiple cursor case preserve
다중 커서로 특정 단어를 수정할 때 대소문자 구분 없이 수정이 되어서 따로 수정을 해줘야 하는데 아 불편함을 제거해주는 편리한 프로그램입니다.
Multiple cursor case preserve - Visual Studio Marketplace
Extension for Visual Studio Code - Preserves case when editing with multiple cursors
marketplace.visualstudio.com
CodeSnap
블로그나 다른 사람에게 내 코드를 공유하려고 할 때 색상 하이라이트가 되지 않거나 이상하게 복사가 될 때가 많은데 내 코드 그대로 이쁘게 전달해줄 수 있는 확장프로그램입니다.
커맨드로 CodeSnap을 실행한뒤에 원하는 부분을 코드를 드래그하면 자동으로 스냅이 됩니다.
선택한 코드가 마음에 들었다면 카메라를 누르면 이미지 파일로 저장이 됩니다.
CodeSnap - Visual Studio Marketplace
Extension for Visual Studio Code - 📷 Take beautiful screenshots of your code
marketplace.visualstudio.com