VS Code Setup สำหรับ Astro + TypeScript

Extensions ที่จำเป็น

Astro Official

• Astro (astro-build.astro-vscode) — syntax highlighting, autocomplete, TypeScript integration สำหรับ .astro files

TypeScript & Linting

• ESLint (dbaeumer.vscode-eslint) — lint ตามกฎที่ตั้งไว้
• Prettier (esbenp.prettier-vscode) — format code อัตโนมัติ
• Error Lens (usernamehw.errorlens) — แสดง error/warning ที่บรรทัดนั้นๆ เลย

Productivity

• Path Intellisense (christian-kohler.path-intellisense) — autocomplete paths ใน import
• Auto Rename Tag (formulahendry.auto-rename-tag) — rename opening/closing tag พร้อมกัน
• GitLens (eamodio.gitlens) — git blame, history ในบรรทัดเดียวกัน

Markdown

• Markdown All in One (yzhang.markdown-all-in-one) — table formatter, shortcuts, preview

settings.json ที่แนะนำ

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[astro]": {
    "editor.defaultFormatter": "astro-build.astro-vscode"
  },
  "editor.tabSize": 2,
  "editor.rulers": [100],
  "editor.wordWrap": "off",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "explorer.compactFolders": false,
  "files.exclude": {
    "**/.astro": true,
    "**/dist": true
  }
}

.prettierrc สำหรับ Astro

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "plugins": ["prettier-plugin-astro"],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

ติดตั้ง plugin:

npm install --save-dev prettier prettier-plugin-astro

tsconfig.json แนะนำ

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "strictNullChecks": true,
    "noUncheckedIndexedAccess": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

noUncheckedIndexedAccess: true บังคับให้ handle undefined เมื่อ access array โดย index — ป้องกัน runtime error

Snippets สำหรับ Astro

สร้างไฟล์ .vscode/astro.code-snippets:

{
  "Astro Component": {
    "prefix": "acomp",
    "body": [
      "---",
      "export interface Props {",
      "  $1",
      "}",
      "",
      "const { $2 } = Astro.props;",
      "---",
      "",
      "<div>",
      "  $0",
      "</div>"
    ],
    "description": "Astro component with Props interface"
  },
  "Astro Page": {
    "prefix": "apage",
    "body": [
      "---",
      "import Layout from '../layouts/Layout.astro';",
      "---",
      "",
      "<Layout title=\"$1\" description=\"$2\">",
      "  <div class=\"container\">",
      "    <section class=\"section\">",
      "      $0",
      "    </section>",
      "  </div>",
      "</Layout>"
    ],
    "description": "Astro page with Layout"
  }
}

launch.json สำหรับ Debug

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Astro Dev",
      "url": "http://localhost:4321",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

Keyboard Shortcuts ที่ใช้บ่อย