jonbeo 님의 블로그

코딩을 하다 보면, 들쑥날쑥한 들여쓰기나 일관성 없는 따옴표 때문에 코드가 지저분해지는 경우가 많습니다.이럴 때 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와 같이 ..

1. 확장 프로그램(Extensions)이란?VS Code는 기본도 강력하지만, 확장 프로그램을 설치하면 코드 자동완성, 디자인 예쁘게 정리, Git 도구 연동 등더 다양한 기능을 사용할 수 있어요!말 그대로 내가 원하는 기능을 ‘플러그인’처럼 끼워 넣는 느낌이에요.2. 확장 프로그램 설치 방법방법 ① 사이드바에서 설치하기왼쪽 사이드바에서 확장(Extensions) 아이콘 클릭 (블럭처럼 생긴 아이콘)검색창에 설치하고 싶은 확장 프로그램 이름 입력결과에서 클릭 → Install 버튼 클릭방법 ② 명령 팔레트 사용Ctrl + Shift + P (Mac: Cmd + Shift + P)Extensions: Install Extensions 입력 후 Enter동일하게 검색 후 설치 진행3. 초보자 추천 확장 프..