Crontab 파이썬 스크립트 실행 안될 때 환경변수 PATH 문제 해결 완벽 정리

날짜:
0

VS Code 필수 확장 프로그램 TOP 5 Python Web 개발자 생산성 3배 높이는 설정법

날짜:
VS Code를 설치했지만 기본 상태로만 쓰고 있다면, 생산성의 절반을 포기하고 있는 것과 다름없습니다. 확장 프로그램(Extension)은 단순한 부가 기능이 아니라, 코드 품질·작업 속도·협업 효율을 결정짓는 핵심 인프라입니다. 이 글에서는 Python과 Web 개발 환경에서 실무 투입 즉시 체감할 수 있는 필수 확장 5가지를 선정하고, 설정 방법과 실전 활용 팁까지 제시합니다.


VSCode필수확장프로그램TOP5PythonWeb개발자생산성3배높이는설정법




1. Prettier - 코드 포맷팅 자동화의 정석

Prettier는 들여쓰기, 따옴표, 세미콜론 등 코드 스타일을 저장 시 자동으로 통일해주는 포매터입니다. 팀 프로젝트에서 코드 리뷰 시간을 줄이고, 컨벤션 논쟁을 원천 차단하는 가장 확실한 방법입니다.

설치 및 기본 설정

  1. VS Code Extensions에서 'Prettier - Code formatter' 검색 후 설치
  2. 설정(Windows: Ctrl+, / Mac: Cmd+,) 진입 → 'Editor: Default Formatter'를 'Prettier'로 변경
  3. 'Editor: Format On Save' 활성화 (저장 시 자동 포맷 적용)
  4. 프로젝트 루트에 '.prettierrc' 파일 생성 (팀 컨벤션 강제화)

프로젝트별 설정 예시 (.prettierrc)

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "arrowParens": "avoid"
}

실전 팁

  • npm 설치 필수: npm install --save-dev --save-exact prettier 명령어로 devDependencies에 추가하여 CI/CD 환경에서도 동일한 버전 유지
  • ESLint 충돌 방지: npm i -D eslint-config-prettier 설치 후 ESLint 설정에 'prettier' 추가
  • VSCode setting.json 추가 권장:
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

이 설정으로 저장 시 ESLint 자동 수정 → Prettier 포맷팅이 순차 실행됩니다.

2. ESLint - 코드 품질 검증의 필수 도구

ESLint는 JavaScript/TypeScript 코드의 문법 오류, 안티 패턴, 컨벤션 위반을 실시간으로 검출하고 자동 수정까지 지원합니다. Prettier가 '스타일'을 담당한다면, ESLint는 '로직 품질'을 책임집니다.

주요 기능

  • 변수 미사용, 잘못된 타입 사용 등 잠재적 버그 사전 탐지
  • 프로젝트별 규칙 커스터마이징 (.eslintrc.json)
  • airbnb, standard 등 사전 정의된 컨벤션 세트 적용 가능

Python 개발자를 위한 대안

Python 환경에서는 Pylint 또는 Flake8 확장을 설치하여 동일한 효과를 얻을 수 있습니다. 특히 pylint --generate-rcfile > .pylintrc 명령어로 프로젝트 루트에 설정 파일을 생성하면 팀 단위 규칙 적용이 가능합니다.

3. GitLens & Git Graph - Git 히스토리 가시화

터미널 명령어로만 Git을 다루는 것은 비효율적입니다. GitLens와 Git Graph는 코드 라인별 커밋 정보 표시, 브랜치 타임라인 시각화, GUI 기반 Git 명령 실행을 지원하여 협업 컨텍스트 파악 시간을 90% 단축시킵니다.

GitLens 핵심 기능

  • Blame Annotations: 코드 라인 옆에 작성자·커밋 시간·메시지 자동 표시
  • File History: 특정 파일의 전체 수정 이력을 타임라인으로 조회
  • Compare Branches: 브랜치 간 차이점을 GUI로 비교

Git Graph 활용법

하단 상태바의 'Git Graph' 아이콘 클릭 시 IntelliJ/Eclipse 스타일의 커밋 트리가 표시됩니다. 우클릭 메뉴로 cherry-pick, revert, merge 등 명령을 GUI로 실행할 수 있어 Git 초보자도 안전하게 브랜치 관리가 가능합니다.

4. Live Server - 프론트엔드 개발 필수 서버

Live Server는 HTML 파일 저장 시 브라우저를 자동으로 새로고침하는 로컬 개발 서버입니다. Tomcat 같은 무거운 서버 없이 가상 서버를 즉시 구동하며, CORS 정책 우회가 필요한 JSON fetch 테스트에도 필수입니다.

사용법

  1. HTML 파일 우클릭 → 'Open with Live Server' 선택
  2. 기본 포트(5500)로 브라우저 자동 실행
  3. 파일 수정 후 저장(Ctrl+S) 시 실시간 반영

대안: Live Preview

Live Server가 외부 브라우저를 여는 방식이라면, Live Preview는 VS Code 내부 패널에서 프리뷰를 제공합니다. 돋보기 아이콘 클릭만으로 즉시 확인 가능하며, 듀얼 모니터 환경이 아닐 때 화면 전환 없이 작업할 수 있어 유용합니다.

5. 용도별 추가 필수 확장

Python 개발자용

  • Python (Microsoft 공식): IntelliSense, 디버깅, Jupyter 지원
  • Pylance: 타입 체킹 및 자동완성 성능 향상 (Python 확장과 함께 설치 권장)

Web 개발자용

  • Path Intellisense: 파일 경로 자동완성 (이미지/CSS import 시 오타 방지)
  • HTML CSS Support: HTML 클래스명 입력 시 CSS 선택자 자동완성
  • vscode-styled-components: styled-components 작성 시 CSS 자동완성 및 신택스 하이라이팅
  • Auto Close Tag / Auto Rename Tag: 태그 자동 닫기 및 쌍 이름 동시 수정

공통 생산성 도구

  • Code Spell Checker: 변수명·주석 오타 실시간 검출 (camelCase, snake_case 인식)
  • Color Highlight: 색상 코드(#fff, rgb()) 옆에 실제 색상 미리보기 표시
  • CodeSnap: 코드 스크린샷을 그래디언트 배경과 함께 예쁘게 생성 (발표 자료·문서용)

보너스: 실무 환경 최적화 체크리스트

프로젝트 루트에 반드시 포함할 파일

  • .prettierrc: 팀 코드 스타일 강제
  • .eslintrc.json: 린트 규칙 명시
  • .vscode/settings.json: 프로젝트별 에디터 설정 (Format on Save, 탭 크기 등)
  • .editorconfig: IDE 종류와 무관하게 들여쓰기·줄바꿈 통일

VSCode 전역 설정 권장 사항 (setting.json)

{
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.minimap.enabled": false,
  "workbench.startupEditor": "none"
}

마무리: 지금 당장 실행할 Action Item

이 글을 읽은 직후 다음 3가지를 즉시 실행하십시오.

  1. Prettier + ESLint 설치 후 프로젝트 루트에 .prettierrc와 .eslintrc.json 생성
  2. GitLens 설치 후 현재 작업 중인 파일에서 Blame Annotations 확인 (누가 언제 이 코드를 작성했는지 파악)
  3. Live Server로 HTML 파일 열고 실시간 반영 테스트 (CSS 수정 후 자동 새로고침 확인)

확장 프로그램은 '설치'가 아니라 '설정'이 핵심입니다. 기본 옵션 그대로 쓰면 체감 효과가 30%에 불과하지만, 프로젝트 루트에 설정 파일을 배치하고 팀 컨벤션과 연동하면 생산성이 3배 이상 증가합니다. 지금 바로 적용하십시오.


#함께 읽으면 좋은 글

좋은 커밋 메시지 작성법: Semantic Commit Message 가이드 feat fix chore 완벽 정리 : 바로보기

댓글

댓글 쓰기