<p class="d277bc4d-a73e-4b2e-94ed-bbe7c1934b74">에디터</p> <p class="d277bc4d-a73e-4b2e-94ed-bbe7c1934b74">비주얼 스투디오 코드</p> <p class="d277bc4d-a73e-4b2e-94ed-bbe7c1934b74">추가 설치할 프로그램</p> <ul> <li> <a class="auto_link" href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" target="_blank" rel="noopener">Prettier</a>: 코드 포매터 <a class="auto_link" href="https://prettier.io/" target="_blank" rel="noopener">프리티어^Prettier</a>와 VS 코드를 통합하는 확장</li> <li> <a class="auto_link" href="https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome" target="_blank" rel="noopener">Debugger for Chrome</a>: 자바스크립트 코드를 크롬^Chrome 브라우저에서 바로 디버깅할 수 있는 확장</li> <li> <a class="auto_link" href="https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons" target="_blank" rel="noopener">vscode-icons</a>: VS 내부의 파일 탐색기에 확장자 별로 나타나는 아이콘을 추가하는 확장</li> <li> <a class="auto_link" href="https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify" target="_blank" rel="noopener">Beautify</a>: <a class="auto_link" href="https://beautifier.io/" target="_blank" rel="noopener">자바스크립트 뷰티파이어^{JavaScript Beautifier}</a>와 VS 코드를 통합하는 확장</li> <li> <a class="auto_link" href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens" target="_blank" rel="noopener">GitLens</a>: VS 코드의 깃^Git 지원을 강화</li> <li> <a class="auto_link" href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank" rel="noopener">Live Server</a>: VS 코드에서 웹 개발시에 변경사항을 바로 반영해주는 라이브 리로드 서버 지원 확장</li> <li> <a class="auto_link" href="https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner" target="_blank" rel="noopener">Code Runner</a>: 바로 에디터 상의 코드를 실행할 수 있게 도와주는 확장</li> <li> <a class="auto_link" href="https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets" target="_blank" rel="noopener">HTML Snippets</a>: HTML 스니펫을 모아놓은 확장</li> <li> <a class="auto_link" href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer" target="_blank" rel="noopener">Bracket Pair Colorizer</a>: 매칭되는 괄호들을 구분하기 쉽도록 적절한 색을 입혀주는 확장</li> <li> <a class="auto_link" href="https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory" target="_blank" rel="noopener">Git History</a>: 깃 히스토리를 보여주고 검색할 수 있게 해주는 확장</li> </ul> <p class="d277bc4d-a73e-4b2e-94ed-bbe7c1934b74">테마</p> <p class="d277bc4d-a73e-4b2e-94ed-bbe7c1934b74"> <a href="https://marketplace.visualstudio.com/items?itemName=ginfuru.ginfuru-better-solarized-dark-theme" target="_blank" class="auto_link">Solarized Dark</a>, <a href="https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula" target="_blank" class="auto_link">Dracula</a>, <a href="https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme" target="_blank" class="auto_link">Material</a>, <a href="https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2" target="_blank" class="auto_link">Cobalt2</a></p> <p class="d277bc4d-a73e-4b2e-94ed-bbe7c1934b74">비주얼 스투디오 코드 온라인 <a href="https://online.visualstudio.com/login" target="_blank" class="auto_link">https://online.visualstudio.com/login</a></p>

<p class="d277bc4d-a73e-4b2e-94ed-bbe7c1934b74">에디터</p> <p class="d277bc4d-a73e-4b2e-94ed-bbe7c1934b74">비주얼 스투디오 코드</p> <p class="d277bc4d-a73e-4b2e-94ed-bbe7c1934b74">추가 설치할 프로그램</p> <ul> <li> <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" target="_blank" class="auto_link">Prettier</a>: 코드 포매터 <a href="https://prettier.io/" target="_blank" class="auto_link">프리티어^Prettier</a>와 VS 코드를 통합하는 확장</li> <li> <a href="https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome" target="_blank" class="auto_link">Debugger for Chrome</a>: 자바스크립트 코드를 크롬^Chrome 브라우저에서 바로 디버깅할 수 있는 확장</li> <li> <a href="https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons" target="_blank" class="auto_link">vscode-icons</a>: VS 내부의 파일 탐색기에 확장자 별로 나타나는 아이콘을 추가하는 확장</li> <li> <a href="https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify" target="_blank" class="auto_link">Beautify</a>: <a href="https://beautifier.io/" target="_blank" class="auto_link">자바스크립트 뷰티파이어^{JavaScript Beautifier}</a>와 VS 코드를 통합하는 확장</li> <li> <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens" target="_blank" class="auto_link">GitLens</a>: VS 코드의 깃^Git 지원을 강화</li> <li> <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank" class="auto_link">Live Server</a>: VS 코드에서 웹 개발시에 변경사항을 바로 반영해주는 라이브 리로드 서버 지원 확장</li> <li> <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner" target="_blank" class="auto_link">Code Runner</a>: 바로 에디터 상의 코드를 실행할 수 있게 도와주는 확장</li> <li> <a href="https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets" target="_blank" class="auto_link">HTML Snippets</a>: HTML 스니펫을 모아놓은 확장</li> <li> <a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer" target="_blank" class="auto_link">Bracket Pair Colorizer</a>: 매칭되는 괄호들을 구분하기 쉽도록 적절한 색을 입혀주는 확장</li> <li> <a href="https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory" target="_blank" class="auto_link">Git History</a>: 깃 히스토리를 보여주고 검색할 수 있게 해주는 확장</li> </ul>