# vscode + python + jinja

# vscode

---

## lint

* djlint
* ruff

```bash
uv add --dev djlint ruff
uv run ruff check
```

---

```json
//.code-workspace
{
  "folders": [
    {
      "name": "📂 전체 루트",
      "path": ".",
    },
    {
      //사이드바 모습: 탐색기 가장 바깥쪽에 📂 전체 루트와 📦 백엔드 API가 대등한 형제 관계로 깔끔하게 쪼개져서 보입니다.
      //가상환경(.venv) 인식: 완벽하게 자동 인식됩니다. 앞서 설정한 my-api/.vscode/settings.json 규칙이 정확하게 이 구역에만 100% 매핑됩니다. my-api 안의 코드를 열면 우측 하단에 파이썬 가상환경이 알아서 착 잡힙니다.
      //개발 편의성: my-api 터미널을 열거나 소스코드를 검색할 때, 엉뚱한 프런트엔드 폴더나 루트 폴더의 간섭 없이 오직 파이썬 백엔드 코드에만 집중할 수 있습니다.
      "name": "📦 API 서비스 (A)",
      "path": "my-api"
    }, // 💡 파이썬 코드가 있는 폴더
    {
      "name": "⚙️ 백그라운드 워커 (B)",
      "path": "my-app"
    }
  ],
  "settings": {
    // 💡 1. 화면 스타일링 (모든 폴더의 가독성을 위해 통일)
    "editor.fontSize": 15,
    "editor.tabSize": 2,
    "editor.wordWrap": "on", // 줄바꿈 자동 활성화
    "editor.minimap.enabled": false, // 미니맵 제거로 화면 넓게 쓰기
    // 💡 2. 저장 시 자동화 (코딩 표준 맞추기)
    "editor.formatOnSave": true, // 저장할 때마다 코드 정렬 자동 실행
    "files.trimTrailingWhitespace": true, // 줄 끝의 불필요한 공백 자동 제거
    "files.insertFinalNewline": true, // 파일 맨 마지막 줄에 빈 줄 자동 추가
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // 👇 파이썬 에디터에서 탭 키를 누를 때 2칸 공백이 들어가도록 설정
    "editor.insertSpaces": true,
    "editor.detectIndentation": false, // 파일 내 다른 4칸 설정을 감지해서 멋대로 바꾸는 것을 방지
    // 파이썬 파일 타이핑 시 서제스트(추천 팝업) 가로채기 방지
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    // 수동 저장 시 코드 자동 수정 및 임포트 정리 활성화
    "editor.codeActionsOnSave": {
      "source.fixAll": "explicit",
      "source.organizeImports": "explicit" // 저장 시 사용하지 않는 import 구문 자동 정리
    },
    "files.autoSave": "afterDelay",
    // 4. 인코딩 깨짐 방지용 자동 감지 켜기
    "files.autoGuessEncoding": true,
    "files.associations": {
      "*.css": "tailwindcss",
      // ❌ "*.html": "vue" 기기존 코드를 지우고 아래로 변경합니다.
      //"*.html": "jinja"
      //"*.html": "jinja-html",
      // ⭕ jinja-html 대신 기본 html 모드로 둡니다. (djlint가 진자 문법을 어차피 다 해석합니다)
      "*.html": "html",
      // 예: src/styles 폴더 안의 CSS 파일들만 Tailwind로 인식시키기
      //"**/src/styles/*.css": "tailwindcss"
    },
    // 4. 터미널 및 파일 탐색기 제외 설정
    "files.exclude": {
      "**/.git": true,
      "**/node_modules": true,
      "**/__pycache__": true,
      "**/.venv": true, // 파이썬 가상환경 숨기기
      "my-api": true,
      "my-app": true
    },
    // 2️⃣ 마크다운과 텍스트 파일은 저장 시 자동 포맷에서 제외
    "[markdown]": {
      // 💡 1. 저장 시 자동 정렬을 완전히 꺼서 표(Table)나 엔터 구조가 깨지는 오류 방지
      "editor.formatOnSave": false,
      // 💡 2. 마크다운 전용 린터(문법 검사기)가 있다면 백그라운드 에러 진단을 수동으로 무력화
      "editor.codeActionsOnSave": {
        "source.fixAll": "never",
        "source.organizeImports": "never"
      },
      // 💡 3. 글을 쓰는 도중에 변수나 오타라고 판정하며 노란색/빨간색 밑줄 긋는 검사 차단
      "editor.quickSuggestions": {
        "comments": "off",
        "strings": "off",
        "other": "off"
      },
      // 💡 4. 한글 맞춤법이나 텍스트 오타 에러 표시(Squiggles)를 시각적으로 숨김
      "editor.semanticHighlighting.enabled": false
    },
    "[plaintext]": {
      "editor.formatOnSave": false,
      "editor.codeActionsOnSave": {
        "source.fixAll": "never",
        "source.organizeImports": "never"
      },
    },
    // 3. JSON(.json) 공통 설정 (기본 포매터 지정 및 저장 시 자동 정렬)
    "[json]": {
      "editor.defaultFormatter": "vscode.json-language-features",
    },
    "[jsonc]": { // 주석이 허용되는 JSON 파일용 설정
      "editor.defaultFormatter": "vscode.json-language-features",
    },
    // 3. [웹 관련 블록] ESLint 같은 서버들은 원래 자기 구역(JS/TS)에서만 돌도록 명시 (예시)
    "[javascript]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[typescript]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    // [Python 전용 설정] 저장 시 안전하게 자동 정렬 및 검사 실행
    "[python]": {
      // ⚠️ 반드시 이 이름(charliermarsh.ruff)이어야 최신 백엔드 서버를 직접 호출합니다!
      "editor.defaultFormatter": "charliermarsh.ruff",
      //"editor.defaultFormatter": "ms-python.python"
      //"editor.defaultFormatter": "ms-python.black-formatter"
      "editor.formatOnSave": true,
      "editor.codeActionsOnSave": {
        "source.fixAll.ruff": "explicit", // 저장 시 문법 에러 자동 수정
        "source.organizeImports.ruff": "explicit" // 저장 시 안 쓰는 import 구문 자동 삭제 ⚡
      }
    },
    "[rust]": {
      //"editor.defaultFormatter": "rust-analyzer" // 정렬 도구로 rust-analyzer 지정
      "editor.defaultFormatter": "rust-lang.rust-analyzer", // 💡 러스트 폴더에 공식 정렬 엔진 지정
    },
    "[html]": {
      // 🔥 [핵심] HTML 정렬 주체를 완벽하게 작동하는 ruff로 전격 교체합니다!
      //"editor.defaultFormatter": "charliermarsh.ruff",
      // 3️⃣ Jinja2/HTML 템플릿 파일이 깨진다면 전용 포매터(djlint 등)를 쓰거나 끄기
      //"editor.defaultFormatter": "esbenp.prettier-vscode" // 또는 기본 포매터가 마음에 안 들면 false로 지정
      "editor.defaultFormatter": "monosans.djlint", // ⭕ HTML 정렬 주체를 djlint로 세팅
      // 2. HTML 클래스 속성("" 따옴표 안)에서도 자동완성 창이 즉시 뜨도록 설정
      "editor.quickSuggestions": {
        "strings": true,
        "other": true,
        "comments": false
      },
    },
    "[toml]": {
      "editor.codeActionsOnSave": {
        "source.fixAll.ruff": "never",
        "source.organizeImports.ruff": "never"
      }
    },
    // 4. Flatpak 환경을 뚫고 파이썬 분석 엔진(Pylance)이 정상 작동하도록 백엔드 지정
    "python.languageServer": "Pylance",
    // 💡 [핵심 치트키] Pylance에게 정적 분석 엔진을 가동하라고 지시합니다.
    // 이 옵션이 켜지면 잘못된 경로(import 오류)나 오타를 실행 전에 에디터가 실시간으로 잡아냅니다.
    "python.analysis.typeCheckingMode": "basic",
    // 💡 가상환경(venv) 폴더의 이름을 지정합니다. (자동 탐색용)
    //"python.venvFolders": [
    //  ".venv"
    //],
    "python.terminal.activateEnvInCurrentTerminal": true, // 💡 모든 폴더의 터미널이 각자의 .venv를 자동 활성화하도록 고정
    // 터미널을 새로 열 때 프로젝트 내부의 가상환경(.venv)을 자동으로 활성화(Activate)
    "python.terminal.activateEnvironment": true,
    // 💡 가상환경 내의 진짜 파이썬 실행 파일 경로를 직접 고정해 버립니다.
    //.code-workspace
    //실제 매핑되는 파이썬 주소: my-project/./.venv/bin/python (최상위 루트 바로 밑에 있는 가상환경 주소)
    //.vscode/settings.json
    //실제 매핑되는 파이썬 주소: micro-service-A/.venv/bin/python
    //"python.defaultInterpreterPath": "${workspaceFolder}/.venv/bin/python",
    // 🔥 최신 ruff server 버전에서 2칸 설정을 강제 신뢰하도록 만드는 핵심 옵션
    "ruff.configurationPreference": "editorFirst",
    "ruff.enable": true,
    "ruff.lint.enable": true,
    // 💡 만약 파이썬 코딩 중에 자동완성은 필요한데 '알림창'만 끄고 싶다면?
    // ruff.enable을 true로 둘 경우, 아래 VS Code 표준 필터를 먹여서 알림 팝업 창을 강제로 숨깁니다.
    "workbench.notification.collapseAlerts": true,
    "notification.filter": {
      "charliermarsh.ruff": "off",
      "ruff": "off"
    },
    // 💡 [치트키 1] 랭귀지 서버가 어떤 내부 치명적 에러(TOML 파싱 실패 등)를 겪어도 팝업창을 안 띄우게 막습니다.
    "ruff.trace.server": "off",
    // 💡 [치트키 2] Ruff 내부 에러 메시지가 VS Code UI 알림창으로 전달되는 통로를 완전히 차단합니다.
    "ruff.logging.level": "off",
    //"htmlWhitespaceSensitivity": "ignore",
    //"djlint.format.enable": true,
    // (선택사항) djLint가 Jinja2 규칙으로 올바르게 해석하도록 프로필 설정
    "djlint.profile": "jinja",
    // 💡 [핵심 해결책] H030(메타 설명 필요), H031(메타 키워드 필요) 잔소리 규칙을 완전히 잠재웁니다.
    "djlint.compiler.ignore": "H030,H031,H025,H021",
    // 2. [핵심] djLint가 줄을 함부로 붙이지 못하게 속성 단위로 줄바꿈 강제
    "djlint.wrapAttributes": "force", // 속성이 많으면 강제로 줄바꿈(엔터) 처리
    "djlint.maxLineLength": 120, // 한 줄 길이를 표준(120자)으로 되돌림
    "djlint.indent": 2, // 들여쓰기를 스페이스 2칸으로 고정
    // 2. 🔥 [핵심] djlint에게 HTML 주석 대신 진자 주석을 강제로 뱉으라고 명령합니다!
    // (이전 답변 내용 복습) 에러 밑줄 아예 안 나오게 숨기기
    // ❌ 틀린 방식: "djlint.ignore": "T003, H025"
    // ✅ 올바른 방식: 대괄호안에 따옴표로 각각 쪼개서 넣어줍니다.
    "djlint.ignore": [
      "T003", // Jinja 주석 스타일 경고 방지
      "H025", // HTML 속성 순서 강제 방지 (HTMX 가독성 확보)
      "H021", // 인라인 style 사용 제한 방지 (DaisyUI 5 컴포넌트용)
      "H017", // [추천 추가]  태그에 alt 속성 없다고 징징대는 잔소리 끄기
      "H030", // [추천 추가]  밑에  순서 안 맞다고 개기는 잔소리 끄기
      "H023"
    ],
    "djlint.close_void_tags": true, //  이나 
 태그 끝에 /> 안 닫아도 에러 안 나게 해줌
    // ruff 포매터가 내 줄바꿈(엔터) 기록을 훼손하지 못하게 잠그는 옵션
    "html.format.preserveNewLines": true,
    "html.format.wrapLineLength": 0,
    // 💡 러스트 전용 분석 엔진(rust-analyzer) 설정 고정
    //.vscode/settings.json
    //"rust-analyzer.linkedProjects": [
    //  "${workspaceFolder}/Cargo.toml"
    //],
    "rust-analyzer.check.command": "check", // 💡 러스트 코드를 고칠 때 가장 빠른 속도로 에러 검출
    // 1. Tailwind 가 감시하고 자동완성을 제공할 언어 지정
    "tailwindCSS.includeLanguages": {
      "html": "html",
      "javascript": "javascript"
    },
    // 3. Emmet(html 단축키) 사용 시에도 Tailwind 클래스가 추천되도록 허용
    "tailwindCSS.emmetCompletions": true,
    // Tailwind v4 전용 확장 프로그램 실험적 기능 활성화
    //"tailwindCSS.experimental.configFile": "${workspaceFolder}/src/css/layout.css",
    "emmet.includeLanguages": {
      "postcss": "css"
    },
    "css.lint.unknownAtRules": "ignore",
    "scss.lint.unknownAtRules": "ignore",
  },
  // 💡 [핵심 해결책] 여기에 대등한 레벨로 "extensions" 블록을 뚫고 적어줍니다!
  "extensions": {
    "recommendations": [
      "dbaeumer.vscode-eslint",
      "EditorConfig.EditorConfig",
      "wholroyd.jinja",
      "esbenp.prettier-vscode",
      "Continue.continue",
      "usernamehw.errorlens",
      "tamasfe.even-better-toml",
      "charliermarsh.ruff", // 🐍 파이썬 초고속 포매터
      "ms-python.vscode-pylance", // 🧠 파이썬 인공지능 분석 엔진
      "monosans.djlint", // 🎨 HTML/진자/HTMX 문법 정렬기
      "rust-lang.rust-analyzer", // 🦀 러스트 핵심 분석 엔진
      "Vue.volar",
      "bradlc.vscode-tailwindcss",
      "dustypomerleau.rust-syntax",
      "ms-python.python",
      "DrBlury.protobuf-vsc",
      "plex.vscode-protolint",
      "cweijan.vscode-mysql-client2",
      "DavidAnson.vscode-markdownlint",
      "yzhang.markdown-all-in-one",
      "guyskk.language-cython",
      "golang.go",
      "donjayamanne.githistory",
      "cweijan.dbclient-jdbc",
      "moshfeu.compare-folders",
      "vadimcn.vscode-lldb",
      "bufbuild.vscode-buf",
    ]
  }
}
```

---

```json
//.vscode/settings.json
{
  // 💡 가상환경(venv) 폴더의 이름을 지정합니다. (자동 탐색용)
  "python.venvFolders": [
    ".venv"
  ],
  // 💡 가상환경 내의 진짜 파이썬 실행 파일 경로를 직접 고정해 버립니다.
  //.code-workspace
  //실제 매핑되는 파이썬 주소: my-project/./.venv/bin/python (최상위 루트 바로 밑에 있는 가상환경 주소)
  //.vscode/settings.json
  //실제 매핑되는 파이썬 주소: micro-service-A/.venv/bin/python
  "python.defaultInterpreterPath": "${workspaceFolder}/.venv/bin/python",
  // 💡 러스트 전용 분석 엔진(rust-analyzer) 설정 고정
  //.vscode/settings.json
  "rust-analyzer.linkedProjects": [
    "${workspaceFolder}/Cargo.toml"
  ],
  // Tailwind v4 전용 확장 프로그램 실험적 기능 활성화
  //"tailwindCSS.experimental.configFile": "${workspaceFolder}/src/css/layout.css",
}
```