전 테마는 Atom One Dark Theme 사용중이고,
익스텐션은 아래 쓴것들 사용중입니다:
Auto Rename Tag (HTML 태그 자동 변경)
ChatGPT - Work with Code on macOS
CodeMark+ (주석을 알록달록하게 해줘요)
CSS Peek (HTML 파일에서 CSS 미리보기)
Discord Presence (디스코드에 vscode 플레이중 뛰워줘요)
Highlight Matching Tag (선택한 태그에 밑줄 그어줘요)
indent-rainbow (tab한곳에 색깔 넣어서 직관적이게 해줘요)
Live Preview (이건 html 쓰시면 꼭 설치하세요. 실시간으로 편집한 내용 미리보기로 떠요)
Material Icon Theme (아이콘 예뻐져요)
Prettier (코드 정리해주는건데 최신버전에는 기본적으로 탑제되어있다고 하네요)
여러분들은 어떤 익스텐션들 사용하시나요?
git graph v3 : 깃 그래프를 보여주는건데 얘가 제일 깔끔하고 편하더라구요
change-case : camelCase PascalCase kebab-case snake_case 로 일괄수정 하는 명령 추가
이거 외엔 다 랭귀지 서버 플러그인이네요 react, tailwindcss, yaml, mdx, eslint 등등
Theme은 Dracula Theme사용하는데
혹시 좋아하는 Theme있나요?
저는 파란색 계열이 잘보여서 Atom one dark만 사용중이에요
소개: HTML/XML에서 여는 태그(e.g. <div>)를 수정하면 그와 쌍을 이루는 닫는 태그(e.g. </div>)를 자동으로 변경해주는 익스텐션입니다.
유용한 때: 복잡한 HTML 구조에서 태그를 수정할 때, 닫는 태그를 일일이 찾아 바꿀 필요가 없어 실수를 줄이고 작업 속도를 크게 향상시켜 줍니다.
2. Black Formatter
소개: 파이썬(Python) 코드를 'Black'이라는 정해진 규칙에 따라 자동으로 정렬해주는 포맷터입니다.
유용한 때: 파이썬 코드의 가독성을 높이고 싶을 때, 또는 여러 명의 개발자가 협업할 때 코드 스타일을 일관성 있게 통일해야 할 경우 매우 유용합니다. 저장할 때마다 자동으로 코드를 정리하도록 설정할 수 있습니다.
3. Claude Code for VSCode
소개: Anthropic에서 개발한 AI 어시스턴트 'Claude'를 VS Code 내에서 사용할 수 있게 해주는 익스텐션입니다.
유용한 때: 코드 작성 중 특정 기능 구현 방법에 대한 아이디어가 필요하거나, 코드의 오류를 찾고 수정 제안을 받고 싶을 때, 또는 코드에 대한 설명을 생성하는 등 개발 전반에 걸쳐 AI의 도움을 받고 싶을 때 사용합니다.
4. CSS Peek
소개: HTML 파일에서 사용된 CSS 클래스(class)나 아이디(id)에 마우스를 올리거나 클릭(F12)하면, 해당 스타일이 정의된 CSS 코드를 바로 보여주거나 해당 파일로 이동시켜 줍니다.
유용한 때: HTML 구조를 보면서 연결된 CSS 스타일을 빠르게 확인하고 수정하고 싶을 때, CSS 파일을 여러 번 왕복할 필요 없이 작업 흐름을 유지할 수 있습니다.
5. ES7+ React/Redux/React-Native snippets
소개: 이 익스텐션은 ES7+ 문법 기반의 리액트(React), 리덕스(Redux), 리액트 네이티브(React-Native) 개발 시 자주 사용하는 코드 조각(Snippets)들을 모아놓은 것입니다. 간단한 **접두사(prefix)**를 입력하고 Tab 키를 누르면, 약속된 코드 구조가 자동으로 완성됩니다.
유용한 때: 리액트 생태계에서 개발할 때, 반복적인 코드 작성을 획기적으로 줄여주어 개발 속도를 매우 빠르게 만들어 줍니다. 컴포넌트, 훅(Hook), Redux 보일러플레이트 등을 순식간에 만들 수 있습니다.
6. ESLint
소개: 자바스크립트(JavaScript) 코드의 문법 오류나 잠재적인 문제점을 찾아주고, 정해진 코딩 스타일 규칙을 따르도록 강제하는 린터(Linter) 도구입니다.
유용한 때: 코드의 품질을 높이고 버그를 사전에 방지하고 싶을 때 사용합니다. 특히 팀 프로젝트에서 모든 구성원이 일관된 코드 스타일을 유지하도록 하는 데 필수적입니다.
7. GitLens — Git supercharged
소개: VS Code의 Git 기능을 대폭 강화해주는 익스텐션입니다. 코드 한 줄 한 줄마다 누가, 언제, 왜 수정했는지(blame) 바로 확인할 수 있습니다.
유용한 때: 코드의 변경 이력을 추적하거나, 특정 코드 라인을 수정한 담당자를 빠르게 찾아야 할 때, 브랜치(branch) 간의 변경 사항을 시각적으로 비교하는 등 복잡한 Git 작업을 에디터 내에서 직관적으로 처리하고 싶을 때 매우 강력합니다.
8. Highlight Matching Tag
소개: 현재 커서가 위치한 곳의 태그와 쌍을 이루는 태그에 하이라이트를 줘서 시각적으로 강조해주는 기능입니다.
유용한 때: Auto Rename Tag와 비슷하게, 중첩된 HTML/XML 구조에서 현재 작업 중인 태그의 범위를 명확하게 파악하고 싶을 때 유용합니다.
9. HTML CSS Support
소개: HTML 파일 내에서 CSS 클래스 이름을 입력할 때, 프로젝트 내의 CSS 파일에 정의된 클래스 목록을 자동으로 완성시켜주는 기능입니다.
유용한 때: CSS 클래스 이름을 외우지 않고도 빠르고 정확하게 입력하고 싶을 때 사용합니다. 오타로 인해 스타일이 적용되지 않는 실수를 방지해 줍니다.
10. Import Cost
소개: 자바스크립트에서 import 구문으로 라이브러리나 모듈을 불러올 때, 해당 모듈이 차지하는 용량(kB)을 코드 옆에 바로 표시해 줍니다.
유용한 때: 웹 프론트엔드 개발 시 최종 번들 파일의 크기를 최적화해야 할 때, 어떤 모듈이 용량을 많이 차지하는지 실시간으로 확인하며 개발할 수 있어 성능 관리에 도움이 됩니다.
11. indent-rainbow
소개: 코드의 들여쓰기(indentation) 깊이에 따라 다른 색상을 무지개처럼 입혀주는 익스텐션입니다.
유용한 때: 파이썬이나 YAML처럼 들여쓰기가 문법적으로 매우 중요한 언어를 사용하거나, 코드 블록의 시작과 끝을 시각적으로 쉽게 구분하고 싶을 때 가독성을 크게 향상시켜 줍니다.
12. isort
소개: 파이썬 코드의 import 구문을 정해진 규칙(알파벳 순, 그룹별 정렬 등)에 따라 자동으로 정리해주는 도구입니다.
유용한 때: 여러 import 구문이 뒤죽박죽 섞여 있을 때 코드를 깔끔하게 정리하고 싶을 때 사용합니다. Black Formatter와 함께 사용하면 파이썬 코드 관리가 매우 편해집니다.
14. Jupyter
소개: 데이터 분석, 머신러닝 등에 널리 사용되는 주피터 노트북(.ipynb) 파일을 VS Code 내에서 직접 생성하고 실행할 수 있도록 지원합니다.
유용한 때: 코드, 텍스트 설명, 시각화 자료를 하나의 문서에서 함께 작업해야 하는 데이터 과학 프로젝트를 진행할 때, 별도의 웹 브라우저나 앱 없이 VS Code 환경에서 모든 작업을 할 수 있습니다.
15. Material Icon Theme
소개: VS Code의 탐색기(Explorer) 패널에 있는 파일과 폴더 아이콘을 직관적이고 다채로운 머티리얼 디자인 아이콘으로 바꿔줍니다.
유용한 때: 파일의 종류(.js, .css, .py 등)나 폴더의 역할(src, dist, node_modules 등)을 아이콘 모양만 보고도 빠르게 파악하고 싶을 때 유용하여 탐색 효율을 높여줍니다.
16. Multiple cursor case preserve
소개: VS Code의 다중 커서(Multiple cursors) 기능으로 여러 단어를 동시에 수정할 때, 각 단어의 원래 대소문자 형태(카멜케이스, 파스칼케이스 등)를 유지해주는 기능입니다. (참고: 이 기능은 현재 VS Code에 내장되어 있어 별도 익스텐션 없이도 잘 동작하는 경우가 많습니다.)
유용한 때: 변수명이나 함수명을 여러 곳에서 한 번에 변경할 때, 대소문자 규칙이 깨지지 않도록 자동으로 처리해주어 편리합니다.
17. Path Intellisense
소개: 코드 내에서 파일 경로를 입력할 때, 파일 시스템을 기반으로 경로를 자동으로 완성해 줍니다.
유용한 때: 이미지 파일을 불러오거나 다른 파일을 import 할 때, 파일 경로를 실수 없이 정확하게 입력하고 싶을 때 사용합니다.
18. PostCSS Language Support
소개: 일반 CSS 문법뿐만 아니라 중첩(Nesting) 같은 최신 CSS 문법이나 PostCSS 관련 구문을 VS Code가 이해하고 하이라이팅을 제대로 지원하도록 해줍니다.
유용한 때: Tailwind CSS나 PostCSS 등 최신 CSS 프레임워크나 도구를 사용할 때, 코드 하이라이팅과 자동 완성 기능이 깨지지 않고 원활하게 동작하도록 도와줍니다.
19. Prettier - Code formatter
소개: 자바스크립트, CSS, HTML 등 다양한 언어의 코드를 정해진 규칙에 따라 일관된 스타일로 자동으로 정리해주는 코드 포맷터입니다.
유용한 때: Black Formatter와 마찬가지로, 코드의 가독성을 높이고 팀원 간의 코드 스타일을 통일하고 싶을 때 사용합니다. 가장 대중적인 코드 포맷터 중 하나입니다.
20. Pylance
소개: Microsoft에서 개발한 파이썬 언어 서버(Language Server)로, 코드 자동 완성, 오류 검사, 타입 체킹 등 파이썬 개발에 필요한 핵심 기능들을 매우 빠르고 정확하게 제공합니다.
유용한 때: 파이썬 코드를 작성하는 모든 경우에 생산성을 극대화해줍니다. VS Code에서 파이썬을 사용한다면 사실상 필수적인 익스텐션입니다.
21. PyTorch Snippets
소개: 딥러닝 프레임워크인 파이토치(PyTorch)에서 자주 사용되는 코드 블록(모델 정의, 데이터 로더, 학습 루프 등)을 간단한 키워드 입력으로 빠르게 생성해주는 스니펫 모음입니다.
유용한 때: PyTorch를 사용하여 딥러닝 모델을 구현할 때, 반복적인 상용구를 일일이 타이핑할 필요 없이 빠르게 코드를 완성하고 싶을 때 시간을 절약해 줍니다.
22. Tailwind CSS IntelliSense
소개: Tailwind CSS 프레임워크를 사용할 때 클래스 이름 자동 완성, 구문 하이라이팅, 마우스 오버 시 해당 스타일 미리보기 등 강력한 편의 기능을 제공합니다.
유용한 때: Tailwind CSS를 사용해 웹 디자인을 할 때, 수많은 유틸리티 클래스 이름을 외우지 않고도 빠르고 효율적으로 작업할 수 있게 해주는 필수 익스텐션입니다.
23. YOYO
소개: 서버에서 렌더링된 HTML을 사용하여 동적인 인터페이스를 만드는 PHP 프레임워크입니다. 자바스크립트 없이도 반응형 컴포넌트를 만들 수 있도록 도와줍니다. (이것은 VS Code 익스텐션이 아닌 PHP 프레임워크 자체로 보입니다.)
유용한 때: PHP 개발자가 자바스크립트 코드 작성 부담을 줄이면서도 동적인 웹 페이지를 만들고 싶을 때 사용하는 기술 스택입니다.