jonbeo 님의 블로그

VS Code 꿀팁 모음 💡 필수 확장 + 설정으로 개발 속도 UP!

VS Code는 가볍고 확장성이 강한 에디터로, 전 세계 개발자들이 애용하고 있죠.하지만 그대로 쓰기에는 아쉬운 부분이 많습니다.확장(Extensions)과 설정(Settings)을 잘 활용하면 코드 작성 속도와 효율을 크게 끌어올릴 수 있어요.이번 포스팅에서는 실무에서 쓰는 VS Code 설정 & 추천 확장을 중심으로 정리해드리겠습니다!🔧 1. 필수 확장 추천 확장명 기능 요약 왜 유용한가 ESLint코드 스타일 & 린팅실수 없는 코드 작성Prettier코드 자동 포매팅일관성 있는 코드 스타일 유지Path Intellisense경로 자동 완성import 할 때 경로 타이핑 줄이기Bracket Pair Colorizer / Rainbow Brackets괄호 색상 구분복잡한 중첩 구조 쉽게 파악Git..

안녕하세요 😊프론트엔드·백엔드 개발자 모두 가장 많이 사용하는 에디터 중 하나가 **Visual Studio Code(이하 VS Code)**입니다.VS Code의 강력한 장점은 바로 **확장 프로그램(Extensions)**을 통해 기능을 무한히 확장할 수 있다는 점이죠. 오늘은 초보 개발자부터 실무자까지 꼭 설치하면 좋은 생산성 확장 프로그램 5가지를 소개합니다.📍 1. Prettier – 코드 포맷터코드를 자동으로 보기 좋게 정리해주는 확장들여쓰기, 세미콜론, 따옴표 스타일 등을 일관되게 맞춰줍니다. // 포맷 전function test(){console.log("Hello")}// 포맷 후function test() { console.log("Hello");} 👉 협업 시 코드 스타일로 싸..

안녕하세요 😊Git을 쓰다 보면 “이 코드 누가, 언제, 왜 변경했지?”라는 궁금증이 생길 때가 많죠.그럴 때 강력한 힘을 발휘하는 VS Code 확장 프로그램이 바로 GitLens입니다.GitLens는 단순한 Git 플러그인이 아니라,코드 히스토리·기여자·변경 이유까지 상세하게 보여주는 Git 슈퍼툴입니다.📍 1. GitLens란?VS Code 전용 Git 확장 프로그램커밋 히스토리, 기여자 정보, 변경 이력 등을 IDE 안에서 바로 확인Blame 주석으로 해당 줄의 마지막 수정자·수정 시점 표시코드 비교, 파일 이력 탐색, 커밋 검색까지 지원📍 2. 설치 방법VS Code 왼쪽 Extensions(확장) 패널 클릭GitLens — Git supercharged 검색설치 후 VS Code 재시작상..

안녕하세요 😊개발하면서 포트폴리오를 만들거나 블로그, 티스토리, 깃허브에코드를 깔끔하게 캡처해서 올리고 싶은 적 있으셨죠? 그럴 때 사용하면 좋은 Visual Studio Code 확장 프로그램이 바로✨ CodeSnap입니다! 이번 글에서는 CodeSnap의 설치 방법부터예쁘게 캡처하는 꿀팁까지 차근차근 알려드릴게요!📍 1. CodeSnap이란?CodeSnap은 VS Code에서 코드 블록을 이미지로 예쁘게 캡처할 수 있는 확장 프로그램입니다.📸 자동 배경 + 그림자 효과🎨 테마 자동 반영✂️ 캡처할 영역 드래그만 하면 끝!디자인 감성 살리면서, 코드 스니펫을 깔끔하게 공유할 수 있는 최고의 도구예요.📍 2. 설치 방법VS Code 좌측 Extensions (확장 프로그램) 아이콘 클릭검색창에 ..

HTML/CSS 파일을 수정할 때마다 파일 → 브라우저 열기 → 새로고침 반복하는 거… 정말 귀찮죠? 😥그럴 땐 Live Server 확장 프로그램을 설치하면 VS Code에서 저장만 해도 브라우저가 자동으로 새로고침됩니다!이번 포스팅에서는 Live Server 설치부터 실습까지 차근차근 안내해드릴게요.HTML을 자주 다루는 분들에겐 필수입니다 💡 1️⃣ Live Server 확장 프로그램 설치하기VS Code 왼쪽 확장 탭(네모 4개 겹친 아이콘) 클릭Live Server 검색 → 설치설치만 해도 바로 사용 가능해요! 2️⃣ HTML 파일 열고 Live Server 실행하기.html 파일을 열기우클릭 → Open with Live Server 클릭또는 우측 하단 Go Live 버튼 클릭이제 브라우저..

Visual Studio Code(이하 VS Code)는 가볍고 빠르면서도 자유롭게 커스터마이징할 수 있는 게 최대 장점입니다.자주 쓰는 단축키를 바꾸거나, 나만의 코드 스니펫을 만들어두면 개발 생산성이 확 올라가요!이번 포스팅에서는 다음 세 가지를 초보자도 따라하기 쉽게 설명드릴게요:테마 변경단축키 바꾸기나만의 코드 스니펫 만들기 🎨 1. VS Code 테마 바꾸기 (다크 모드부터 레트로 테마까지!)Ctrl + K → Ctrl + T 누르기 (또는 상단 메뉴 → 보기 → 명령 팔레트)Color Theme 입력 후 선택기본 테마 또는 확장 프로그램으로 테마 설치 가능✅ 인기 테마 추천:One Dark Pro (모던하고 세련됨)Dracula Official (감성 다크 테마)Night Owl (눈에 편한..

코딩을 하다 보면, 들쑥날쑥한 들여쓰기나 일관성 없는 따옴표 때문에 코드가 지저분해지는 경우가 많습니다.이럴 때 Prettier와 ESLint를 함께 설정하면, 저장만 해도 자동으로 코드가 예쁘게 정리됩니다.이번 글에서는 Prettier + ESLint를 VS Code에 통합 설정하는 방법을 단계별로 차근차근 알려드릴게요.웹 개발자라면 무조건 세팅해두면 좋은 조합입니다! ✅ Prettier vs ESLint? 차이점 먼저 짚고 가요!Prettier: 들여쓰기, 줄바꿈, 세미콜론 등 “코드 스타일”을 정리해줌ESLint: 문법 오류, 불필요한 변수 등 “문법 검사와 규칙 위반”을 알려줌이 둘을 함께 쓰면 예쁘고 안정적인 코드를 작성할 수 있어요. 1️⃣ 확장 프로그램 설치하기 VS Code 좌측 확장 탭에..

Visual Studio Code(이하 VS Code)의 가장 큰 장점 중 하나는 **확장 프로그램(Extensions)**을 설치해서 내 개발 환경을 마음껏 꾸밀 수 있다는 점입니다.하지만 확장 프로그램이 너무 많아서 어떤 걸 써야 할지 모르겠는 경우도 많죠.그래서 오늘은 2025년 기준으로 많은 개발자들이 실제로 사용하는 인기 확장 프로그램 TOP 10을 소개해드릴게요!웹 개발, 코드 정리, 생산성 향상까지 전방위로 도움을 줄 확장 프로그램만 골랐습니다 💡 ✅ 1. Prettier – Code formatter역할: 코드 정리 자동화 (자동 줄맞춤, 들여쓰기 등)특히 HTML/CSS/JS 작성할 때 강력 추천! ✅ 2. ESLint역할: 자바스크립트 문법 오류 및 스타일 검사Prettier와 같이 ..

Visual Studio Code(이하 VS Code)는 단순한 코드 편집기를 넘어서, Git과 GitHub도 통합해서 쓸 수 있는 강력한 툴입니다.특히 Git 명령어가 아직 익숙하지 않은 초보자 분들에게는 VS Code에서 버튼 클릭만으로 GitHub에 연결하고 푸시하는 과정이 정말 편리하죠.이 글에서는 Git과 GitHub 계정이 이미 준비된 상태에서, VS Code로 어떤 설정을 하면 바로 버전 관리를 시작할 수 있는지 단계별로 알려드릴게요! 1️⃣ VS Code에 Git이 연동되어 있는지 확인하기VS Code는 설치만 하면 자동으로 Git을 감지하지만, Git이 PC에 먼저 설치되어 있어야 합니다. ✅ Git이 설치되어 있는지 확인하는 방법:VS Code 왼쪽 하단에 소스 제어 아이콘이 보이는지 ..

1. 자주 묻는 질문 (FAQ)Q1. VS Code는 무료인가요?👉 완전히 무료입니다! 오픈소스 기반이라 기업에서도 사용 가능해요.Q2. 터미널이 안 열려요.👉 Ctrl + ~ 단축키 확인!메뉴에서 [터미널 > 새 터미널] 클릭해보세요.그래도 안 될 땐 VS Code 재시작 또는 설정 초기화.Q3. 확장 프로그램이 설치가 안 돼요.👉 인터넷 연결 확인 → 좌측 메뉴의 Extensions 아이콘 클릭 → 로그 확인경우에 따라 방화벽이 막고 있을 수도 있어요.Q4. 테마가 갑자기 바뀌었어요.👉 [파일 > 기본 설정 > 테마]에서 확인 및 재설정 가능Q5. 디버깅 시작했는데 멈추질 않아요.👉 Breakpoint가 없는 경우 전체 코드가 실행됨디버깅 중지: Shift + F5 2. VS Code 실전 ..