{
    "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
    "editor.fontLigatures": true,
    "editor.fontSize": 14,
    "editor.fontWeight": "400"
}

# 基礎工具
code --install-extension MS-CEINTL.vscode-language-pack-zh-hant
code --install-extension eamodio.gitlens
code --install-extension GitHub.vscode-pull-request-github
code --install-extension gitlab.gitlab-workflow
code --install-extension formulahendry.auto-rename-tag
code --install-extension oderwat.indent-rainbow
code --install-extension christian-kohler.path-intellisense
code --install-extension usernamehw.errorlens
code --install-extension GitHub.copilot-chat

# 前端開發
code --install-extension Vue.volar
code --install-extension pmneo.tsimporter
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss
code --install-extension formulahendry.auto-close-tag
code --install-extension ecmel.vscode-html-css

# 後端開發
code --install-extension vscjava.vscode-java-pack
code --install-extension vmware.vscode-boot-dev-pack
code --install-extension vscjava.vscode-maven
code --install-extension shengchen.vscode-checkstyle
code --install-extension SonarSource.sonarlint-vscode

# Python 開發
code --install-extension ms-python.python
code --install-extension ms-python.vscode-pylance
code --install-extension charliermarsh.ruff
code --install-extension njpwerner.autodocstring
code --install-extension ms-toolsai.jupyter
code --install-extension ms-python.debugpy

{
  "settingsSync.ignoredSettings": ["editor.fontSize"],
  "settingsSync.ignoredExtensions": ["some.extension-id"]
}

code ~/projects/web-sample --profile "Web Development"

# 在專案根目錄執行
cd d:\developer\repos\your-project
code .

your-project/
├── frontend/          # Vue 3 前端專案
│   ├── src/
│   ├── package.json
│   └── vite.config.ts
├── backend/           # Spring Boot 後端專案
│   ├── src/
│   ├── pom.xml
│   └── application.yml
├── .vscode/           # VS Code 工作區設定
├── README.md
└── .gitignore

{
  // 編輯器設定
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  
  // 檔案設定
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.exclude": {
    "**/node_modules": true,
    "**/target": true,
    "**/.git": true,
    "**/.DS_Store": true
  },
  
  // 前端專案設定
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  
  // 後端專案設定
  "[java]": {
    "editor.defaultFormatter": "redhat.java",
    "editor.tabSize": 4
  },
  "[xml]": {
    "editor.defaultFormatter": "redhat.vscode-xml"
  },
  "[yaml]": {
    "editor.defaultFormatter": "redhat.vscode-yaml"
  },
  
  // Java 相關設定
  "java.configuration.updateBuildConfiguration": "automatic",
  "java.compile.nullAnalysis.mode": "automatic",
  "java.format.settings.url": ".vscode/eclipse-formatter.xml",
  "java.checkstyle.configuration": ".vscode/checkstyle.xml",
  
  // Maven 相關設定 (獨立安裝)
  "maven.executable.path": "D:\\apache-maven-3.9.4\\bin\\mvn.cmd",
  "maven.terminal.useJavaHome": true,
  "maven.terminal.customEnv": [
    {
      "environmentVariable": "JAVA_HOME",
      "value": "C:\\Program Files\\Java\\jdk-17"
    },
    {
      "environmentVariable": "M2_HOME", 
      "value": "D:\\apache-maven-3.9.4"
    }
  ],
  "maven.view": "hierarchical",
  "maven.pomfile.autoUpdateEffectivePOM": true,
  "maven.pomfile.globalSettings": "D:\\apache-maven-3.9.4\\conf\\settings.xml",
  "maven.pomfile.userSettings": "${env:USERPROFILE}\\.m2\\settings.xml",
  "maven.offline": false,
  "maven.updateSnapshots": false,
  "maven.showDependencies": "all",
  
  // Python 相關設定（注意：python.linting.* 和 python.formatting.* 已棄用，請使用獨立擴充功能）
  "python.defaultInterpreterPath": "python",
  "python.analysis.typeCheckingMode": "basic",
  "python.analysis.autoImportCompletions": true,
  "python.testing.pytestEnabled": true,
  "python.testing.unittestEnabled": false,
  "jupyter.askForKernelRestart": false,
  "jupyter.alwaysTrustNotebooks": true,
  "[python]": {
    "editor.defaultFormatter": "charliermarsh.ruff",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit"
    },
    "editor.tabSize": 4
  },
  
  // ESLint 設定
  "eslint.workingDirectories": ["frontend"],
  "eslint.validate": [
    "javascript",
    "typescript",
    "vue"
  ],
  
  // Prettier 設定
  "prettier.configPath": "frontend/.prettierrc",
  
  // 搜尋設定
  "search.exclude": {
    "**/node_modules": true,
    "**/target": true,
    "**/dist": true,
    "**/.git": true
  }
}

{
  "recommendations": [
    // 基礎工具
    "ms-ceintl.vscode-language-pack-zh-hant",
    "eamodio.gitlens",
    "formulahendry.auto-rename-tag",
    "oderwat.indent-rainbow",
    "christian-kohler.path-intellisense",
    "usernamehw.errorlens",
    "github.copilot-chat",
    
    // 前端開發
    "vue.volar",
    "pmneo.tsimporter",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "formulahendry.auto-close-tag",
    "ecmel.vscode-html-css",
    
    // 後端開發
    "vscjava.vscode-java-pack",
    "vmware.vscode-boot-dev-pack",
    "vscjava.vscode-maven",
    "shengchen.vscode-checkstyle",
    "sonarsource.sonarlint-vscode"
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Vue App",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/frontend",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"]
    },
    {
      "name": "Launch Spring Boot",
      "type": "java",
      "request": "launch",
      "mainClass": "com.yourcompany.Application",
      "projectName": "your-backend-project",
      "args": "--spring.profiles.active=dev"
    },
    {
      "name": "Debug Vue Tests",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/frontend",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "test:debug"]
    },
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal",
      "justMyCode": true
    },
    {
      "name": "Python: FastAPI",
      "type": "python",
      "request": "launch",
      "program": "${workspaceFolder}/src/main.py",
      "console": "integratedTerminal",
      "args": ["--reload"]
    },
    {
      "name": "Python: Flask",
      "type": "python",
      "request": "launch",
      "module": "flask",
      "env": {
        "FLASK_APP": "app.py",
        "FLASK_ENV": "development"
      },
      "args": ["run", "--host=0.0.0.0", "--port=5000"],
      "jinja": true,
      "justMyCode": true
    },
    {
      "name": "Python: Django",
      "type": "python",
      "request": "launch",
      "program": "${workspaceFolder}/manage.py",
      "args": ["runserver"],
      "console": "integratedTerminal",
      "justMyCode": true
    }
  ]
}

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Frontend: Install Dependencies",
      "type": "shell",
      "command": "npm",
      "args": ["install"],
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      },
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    },
    {
      "label": "Frontend: Dev Server",
      "type": "shell",
      "command": "npm",
      "args": ["run", "dev"],
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      },
      "group": "build",
      "isBackground": true,
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "new"
      }
    },
    {
      "label": "Frontend: Build",
      "type": "shell",
      "command": "npm",
      "args": ["run", "build"],
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      },
      "group": "build"
    },
    {
      "label": "Frontend: Test",
      "type": "shell",
      "command": "npm",
      "args": ["run", "test"],
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      },
      "group": "test"
    },
    {
      "label": "Backend: Maven Clean Install",
      "type": "shell",
      "command": "mvn",
      "args": ["clean", "install"],
      "options": {
        "cwd": "${workspaceFolder}/backend"
      },
      "group": "build"
    },
    {
      "label": "Backend: Maven Spring Boot Run",
      "type": "shell",
      "command": "mvn",
      "args": ["spring-boot:run"],
      "options": {
        "cwd": "${workspaceFolder}/backend"
      },
      "group": "build",
      "isBackground": true
    },
    {
      "label": "Backend: Maven Test",
      "type": "shell",
      "command": "mvn",
      "args": ["test"],
      "options": {
        "cwd": "${workspaceFolder}/backend"
      },
      "group": "test"
    }
  ]
}

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    '@vue/typescript/recommended',
    'prettier'
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 2021,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    '@typescript-eslint',
    'vue'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/no-unused-vars': 'error',
    'vue/multi-word-component-names': 'off',
    'vue/no-v-html': 'warn'
  }
}

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "endOfLine": "lf"
}

<?xml version="1.0"?>
<!DOCTYPE module PUBLIC "-//Checkstyle//DTD Checkstyle Configuration 1.3//EN"
    "https://checkstyle.org/dtds/configuration_1_3.dtd">
<module name="Checker">
  <property name="charset" value="UTF-8"/>
  <property name="severity" value="warning"/>
  
  <module name="TreeWalker">
    <!-- 命名規則 -->
    <module name="TypeName"/>
    <module name="MethodName"/>
    <module name="PackageName"/>
    <module name="ParameterName"/>
    <module name="LocalVariableName"/>
    
    <!-- 程式碼風格 -->
    <module name="LineLength">
      <property name="max" value="120"/>
    </module>
    <module name="Indentation">
      <property name="basicOffset" value="4"/>
    </module>
    
    <!-- 匯入規則 -->
    <module name="UnusedImports"/>
    <module name="RedundantImport"/>
    <module name="IllegalImport"/>
    
    <!-- 空白規則 -->
    <module name="WhitespaceAfter"/>
    <module name="WhitespaceAround"/>
  </module>
</module>

// .vscode/settings.json
{
  // Maven 執行檔路徑設定
  "maven.executable.path": "D:\\apache-maven-3.9.4\\bin\\mvn.cmd",
  
  // 使用 JAVA_HOME 環境變數
  "maven.terminal.useJavaHome": true,
  
  // 自訂環境變數
  "maven.terminal.customEnv": [
    {
      "environmentVariable": "JAVA_HOME",
      "value": "C:\\Program Files\\Java\\jdk-17"
    },
    {
      "environmentVariable": "M2_HOME", 
      "value": "D:\\apache-maven-3.9.4"
    },
    {
      "environmentVariable": "MAVEN_OPTS",
      "value": "-Xmx1024m -XX:MaxPermSize=256m"
    }
  ],
  
  // Maven 檢視設定
  "maven.view": "hierarchical",
  "maven.pomfile.autoUpdateEffectivePOM": true,
  
  // Maven 設定檔路徑
  "maven.pomfile.globalSettings": "D:\\apache-maven-3.9.4\\conf\\settings.xml",
  "maven.pomfile.userSettings": "${env:USERPROFILE}\\.m2\\settings.xml",
  
  // Maven 操作設定
  "maven.offline": false,
  "maven.updateSnapshots": false,
  "maven.showDependencies": "all",
  "maven.excludedFolders": [
    "**/.*",
    "**/node_modules",
    "**/target",
    "**/bin",
    "**/archetype-resources"
  ],
  
  // Maven 編譯設定
  "maven.runtime.settings": "${env:USERPROFILE}\\.m2\\settings.xml",
  "maven.multiModuleProjectDirectory": "${workspaceFolder}",
  "maven.projectOpenBehavior": "Interactive"
}

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Maven: Clean",
      "type": "shell",
      "command": "${config:maven.executable.path}",
      "args": ["clean"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": []
    },
    {
      "label": "Maven: Compile",
      "type": "shell",
      "command": "${config:maven.executable.path}",
      "args": ["compile"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": ["$maven-compiler-java"]
    },
    {
      "label": "Maven: Test",
      "type": "shell",
      "command": "${config:maven.executable.path}",
      "args": ["test"],
      "group": "test",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": ["$maven-compiler-java"]
    },
    {
      "label": "Maven: Package",
      "type": "shell",
      "command": "${config:maven.executable.path}",
      "args": ["package", "-DskipTests"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": ["$maven-compiler-java"]
    },
    {
      "label": "Maven: Install",
      "type": "shell",
      "command": "${config:maven.executable.path}",
      "args": ["install"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": ["$maven-compiler-java"]
    },
    {
      "label": "Maven: Spring Boot Run",
      "type": "shell",
      "command": "${config:maven.executable.path}",
      "args": ["spring-boot:run"],
      "group": "build",
      "isBackground": true,
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": "\\b\\B",
              "file": 1,
              "location": 2,
              "message": 3
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": "^.*Restarting due to",
            "endsPattern": "^.*Started .* in .* seconds.*"
          }
        }
      ]
    }
  ]
}

// .vscode/settings.json
{
  "maven.executable.path": "${workspaceFolder}/mvnw.cmd",
  "maven.executable.preferMavenWrapper": true
}

code --install-extension ms-vscode-remote.remote-containers

.devcontainer/
├── devcontainer.json
├── Dockerfile
└── docker-compose.yml

{
  "name": "Full Stack Development",
  "dockerComposeFile": "docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace",
  "shutdownAction": "stopCompose",
  
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-vscode.vscode-typescript-next",
        "vue.volar",
        "vscjava.vscode-java-pack",
        "pivotal.vscode-boot-dev-pack"
      ],
      "settings": {
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true
        }
      }
    }
  },
  
  "forwardPorts": [3000, 8080, 3306],
  "postCreateCommand": "npm install && mvn install"
}

version: '3.8'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ..:/workspace:cached
      - /var/run/docker.sock:/var/run/docker.sock
    ports:
      - "3000:3000"
      - "8080:8080"
    environment:
      - NODE_ENV=development
    depends_on:
      - database
  
  database:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: rootpassword
      MYSQL_DATABASE: devdb
      MYSQL_USER: devuser
      MYSQL_PASSWORD: devpassword
    ports:
      - "3306:3306"
    volumes:
      - mysql_data:/var/lib/mysql

volumes:
  mysql_data:

Ctrl + Shift + P：
- Dev Containers: Rebuild Container
- Dev Containers: Reopen Locally
- Dev Containers: Show Container Log

Ctrl + Shift + P：
- GitLens: Show File History
- GitLens: Compare with Previous
- GitLens: Show Line History
- GitLens: Toggle File Blame

Ctrl + Shift + P：
- GitLab: Create Merge Request
- GitLab: Show Issues
- GitLab: Show Merge Requests
- GitLab: Open in GitLab
- GitLab: Compare with Base

{
  "name": "Vue App Debug",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/frontend/src",
  "sourceMaps": true
}

{
  "name": "Spring Boot Debug",
  "type": "java",
  "request": "launch",
  "mainClass": "com.yourcompany.Application",
  "projectName": "your-backend-project",
  "args": "--spring.profiles.active=dev",
  "vmArgs": "-Dspring.profiles.active=dev"
}

# 進入前端目錄
cd frontend

# 安裝相依套件
npm install

# 啟動開發伺服器
npm run dev

# 執行測試
npm run test

# 建置專案
npm run build

# 檢查程式碼
npm run lint

# 進入後端目錄
cd backend

# Maven 編譯
mvn compile

# 執行應用程式
mvn spring-boot:run

# 執行測試
mvn test

# 打包專案
mvn package

# 清理專案
mvn clean

// 輸入 "for" 然後按 Tab
for (let index = 0; index < array.length; index++) {
    const element = array[index];
}

// 輸入 "fof" 然後按 Tab
for (const iterator of object) {
}

// 輸入 "func" 然後按 Tab
function name(params: type) {
    
}

// 輸入 "cl" 然後按 Tab
console.log();

// 輸入 "main" 然後按 Tab
public static void main(String[] args) {
    
}

// 輸入 "sysout" 然後按 Tab
System.out.println();

// 輸入 "for" 然後按 Tab
for (int i = 0; i < args.length; i++) {
    
}

// 輸入 "try" 然後按 Tab
try {
    
} catch (Exception e) {
    // TODO: handle exception
}

{
  "Vue 3 Composition API Component": {
    "prefix": "vue3-comp",
    "body": [
      "<template>",
      "  <div class=\"${1:component-name}\">",
      "    ${2:<!-- Component content -->}",
      "  </div>",
      "</template>",
      "",
      "<script setup lang=\"ts\">",
      "import { ref, reactive, computed, onMounted } from 'vue'",
      "",
      "// Reactive data",
      "const ${3:data} = ref(${4:''})",
      "",
      "// Computed properties",
      "const ${5:computedValue} = computed(() => {",
      "  return ${6:// computation}",
      "})",
      "",
      "// Lifecycle hooks",
      "onMounted(() => {",
      "  ${7:// mounted logic}",
      "})",
      "</script>",
      "",
      "<style scoped>",
      ".${1:component-name} {",
      "  ${8:/* styles */}",
      "}",
      "</style>"
    ],
    "description": "Vue 3 Composition API component template"
  }
}

{
  "Spring Boot REST Controller": {
    "prefix": "spring-controller",
    "body": [
      "@RestController",
      "@RequestMapping(\"/api/${1:resource}\")",
      "@Validated",
      "public class ${2:Resource}Controller {",
      "",
      "    private final ${2:Resource}Service ${3:service};",
      "",
      "    public ${2:Resource}Controller(${2:Resource}Service ${3:service}) {",
      "        this.${3:service} = ${3:service};",
      "    }",
      "",
      "    @GetMapping",
      "    public ResponseEntity<List<${2:Resource}>> getAll() {",
      "        List<${2:Resource}> ${4:resources} = ${3:service}.findAll();",
      "        return ResponseEntity.ok(${4:resources});",
      "    }",
      "",
      "    @GetMapping(\"/{id}\")",
      "    public ResponseEntity<${2:Resource}> getById(@PathVariable Long id) {",
      "        ${2:Resource} ${5:resource} = ${3:service}.findById(id);",
      "        return ResponseEntity.ok(${5:resource});",
      "    }",
      "",
      "    @PostMapping",
      "    public ResponseEntity<${2:Resource}> create(@Valid @RequestBody ${2:Resource} ${5:resource}) {",
      "        ${2:Resource} created = ${3:service}.create(${5:resource});",
      "        return ResponseEntity.status(HttpStatus.CREATED).body(created);",
      "    }",
      "}"
    ],
    "description": "Spring Boot REST Controller template"
  }
}

{
  "Project API Response": {
    "prefix": "api-response",
    "body": [
      "interface ${1:ResponseName} {",
      "  success: boolean;",
      "  message: string;",
      "  data?: ${2:any};",
      "  errors?: string[];",
      "  timestamp: string;",
      "}"
    ],
    "description": "Standard API response interface"
  },
  
  "Project Test Case": {
    "prefix": "test-case",
    "body": [
      "describe('${1:Test Suite}', () => {",
      "  beforeEach(() => {",
      "    ${2:// Setup}",
      "  });",
      "",
      "  it('should ${3:test description}', () => {",
      "    // Arrange",
      "    ${4:// Setup test data}",
      "",
      "    // Act",
      "    ${5:// Execute test action}",
      "",
      "    // Assert",
      "    ${6:// Verify results}",
      "  });",
      "});"
    ],
    "description": "Standard test case template"
  }
}

cd frontend
npm run dev
# 或
yarn dev

{
  "name": "Debug Vue App",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/frontend/src",
  "breakOnLoad": true,
  "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
  }
}

# 執行所有測試
npm run test

# 監視模式執行測試
npm run test:watch

# 產生測試覆蓋率報告
npm run test:coverage

# 開啟 Cypress 測試介面
npm run test:e2e

# 無介面執行 E2E 測試
npm run test:e2e:headless

npm run build:dev

npm run build

npm run preview

java -version     # 建議使用 Java 17+
mvn -version      # 檢查 Maven 版本

cd backend
mvn spring-boot:run

{
  "name": "Debug Spring Boot",
  "type": "java",
  "request": "launch",
  "mainClass": "com.yourcompany.YourApplication",
  "projectName": "your-backend-project",
  "args": "--spring.profiles.active=dev",
  "vmArgs": [
    "-Dspring.profiles.active=dev",
    "-Dserver.port=8080"
  ],
  "console": "internalConsole",
  "stopOnEntry": false
}

### 測試用戶登入
POST http://localhost:8080/api/auth/login
Content-Type: application/json

{
  "username": "admin",
  "password": "password123"
}

### 取得用戶清單
GET http://localhost:8080/api/users
Authorization: Bearer {{token}}

### 建立新用戶
POST http://localhost:8080/api/users
Content-Type: application/json
Authorization: Bearer {{token}}

{
  "username": "newuser",
  "email": "newuser@example.com",
  "role": "USER"
}

# 執行所有單元測試
mvn test

# 執行特定測試類別
mvn test -Dtest=UserServiceTest

# 執行特定測試方法
mvn test -Dtest=UserServiceTest#testCreateUser

# 執行整合測試
mvn verify

# 包含測試覆蓋率報告
mvn clean verify jacoco:report

{
  "label": "Start Full Stack",
  "dependsOn": [
    "Backend: Maven Spring Boot Run",
    "Frontend: Dev Server"
  ],
  "dependsOrder": "parallel"
}

const API_BASE_URL = process.env.NODE_ENV === 'production' 
  ? 'https://api.yourcompany.com' 
  : 'http://localhost:8080';

export const apiClient = axios.create({
  baseURL: API_BASE_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

# application-dev.yml
spring:
  datasource:
    url: jdbc:h2:mem:testdb
    driver-class-name: org.h2.Driver
    username: sa
    password: 
  h2:
    console:
      enabled: true
      path: /h2-console

# application-prod.yml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/yourdb
    username: ${DB_USERNAME}
    password: ${DB_PASSWORD}
    driver-class-name: com.mysql.cj.jdbc.Driver

# 檢查所有檔案
npm run lint

# 自動修正可修正的問題
npm run lint:fix

# 檢查特定檔案
npx eslint src/components/UserForm.vue

# 格式化所有檔案
npm run format

# 檢查格式化狀態
npm run format:check

# 執行 Checkstyle 檢查
mvn checkstyle:check

# 產生 Checkstyle 報告
mvn checkstyle:checkstyle

# 執行 SpotBugs 分析
mvn spotbugs:check

# 產生 SpotBugs 報告
mvn spotbugs:spotbugs

my-python-project/
├── .vscode/                 # VS Code 設定檔
│   ├── settings.json
│   ├── launch.json
│   └── tasks.json
├── src/                     # 原始碼目錄
│   ├── __init__.py
│   └── main.py
├── tests/                   # 測試目錄
│   ├── __init__.py
│   └── test_main.py
├── docs/                    # 文件目錄
├── requirements.txt         # 套件依賴
├── setup.py                # 安裝設定
├── README.md               # 專案說明
├── .gitignore              # Git 忽略檔案
├── .pylintrc               # Pylint 設定
└── pyproject.toml          # 專案設定（Python 3.6+）

# 使用 venv（Python 3.3+）
python -m venv venv

# 啟動虛擬環境（Windows）
.\venv\Scripts\Activate.ps1

# 啟動虛擬環境（Linux/macOS）
source venv/bin/activate

# 安裝套件
pip install -r requirements.txt

# 凍結當前套件版本
pip freeze > requirements.txt

# 建立新環境
conda create -n myproject python=3.11

# 啟動環境
conda activate myproject

# 安裝套件
conda install pandas numpy matplotlib

# 匯出環境
conda env export > environment.yml

{
  "python.defaultInterpreterPath": "./venv/Scripts/python.exe",
  "python.analysis.typeCheckingMode": "basic",
  "python.analysis.autoImportCompletions": true,
  "python.testing.pytestEnabled": true,
  "python.testing.pytestArgs": [
    "tests",
    "--verbose"
  ],
  "python.testing.unittestEnabled": false,
  "[python]": {
    "editor.defaultFormatter": "charliermarsh.ruff",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit"
    },
    "editor.tabSize": 4
  }
}

[MASTER]
disable=
    C0114, # missing-module-docstring
    C0115, # missing-class-docstring
    C0116, # missing-function-docstring
    R0903, # too-few-public-methods

[FORMAT]
max-line-length=88

[VARIABLES]
good-names=i,j,k,ex,Run,_,x,y,z

[tool.black]
line-length = 88
target-version = ['py311']
include = '\.pyi?$'
exclude = '''
/(
    \.eggs
  | \.git
  | \.hg
  | \.mypy_cache
  | \.tox
  | \.venv
  | _build
  | buck-out
  | build
  | dist
)/
'''

[tool:pytest]
testpaths = tests
python_files = test_*.py
python_classes = Test*
python_functions = test_*
addopts = 
    --verbose
    --tb=short
    --strict-markers
    --disable-warnings
    --cov=src
    --cov-report=html
    --cov-report=term-missing

# tests/test_main.py
import unittest
from src.main import Calculator

class TestCalculator(unittest.TestCase):
    def setUp(self):
        self.calc = Calculator()
    
    def test_add(self):
        """測試加法功能"""
        result = self.calc.add(2, 3)
        self.assertEqual(result, 5)
    
    def test_divide_by_zero(self):
        """測試除零例外"""
        with self.assertRaises(ValueError):
            self.calc.divide(5, 0)

if __name__ == '__main__':
    unittest.main()

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal",
      "justMyCode": true
    },
    {
      "name": "Python: FastAPI",
      "type": "python",
      "request": "launch",
      "program": "${workspaceFolder}/src/main.py",
      "console": "integratedTerminal",
      "args": ["--reload"],
      "env": {
        "PYTHONPATH": "${workspaceFolder}"
      }
    },
    {
      "name": "Python: Flask",
      "type": "python",
      "request": "launch",
      "module": "flask",
      "env": {
        "FLASK_APP": "src/app.py",
        "FLASK_ENV": "development",
        "PYTHONPATH": "${workspaceFolder}"
      },
      "args": ["run", "--host=0.0.0.0", "--port=5000"],
      "jinja": true
    },
    {
      "name": "Python: Django",
      "type": "python",
      "request": "launch",
      "program": "${workspaceFolder}/manage.py",
      "args": ["runserver"],
      "django": true,
      "justMyCode": true
    },
    {
      "name": "Python: Pytest",
      "type": "python",
      "request": "launch",
      "module": "pytest",
      "args": ["tests", "-v"],
      "console": "integratedTerminal",
      "justMyCode": false
    }
  ]
}

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Python: Install Dependencies",
      "type": "shell",
      "command": "pip",
      "args": ["install", "-r", "requirements.txt"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always"
      }
    },
    {
      "label": "Python: Run Tests",
      "type": "shell",
      "command": "python",
      "args": ["-m", "pytest", "tests", "-v"],
      "group": "test",
      "presentation": {
        "echo": true,
        "reveal": "always"
      }
    },
    {
      "label": "Python: Format Code",
      "type": "shell",
      "command": "black",
      "args": ["src", "tests"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always"
      }
    },
    {
      "label": "Python: Lint Code",
      "type": "shell",
      "command": "pylint",
      "args": ["src"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always"
      }
    },
    {
      "label": "Python: Generate Documentation",
      "type": "shell",
      "command": "sphinx-build",
      "args": ["-b", "html", "docs", "docs/_build/html"],
      "group": "build"
    }
  ]
}

"""
FastAPI 應用程式主檔案
提供 RESTful API 服務
"""

from fastapi import FastAPI, HTTPException
from pydantic import BaseModel
from typing import List, Optional
import uvicorn

app = FastAPI(
    title="Python Tutorial API",
    description="Python 開發教學 API",
    version="1.0.0"
)

class Item(BaseModel):
    """項目模型"""
    id: Optional[int] = None
    name: str
    description: Optional[str] = None
    price: float

# 模擬資料庫
items_db: List[Item] = []

@app.get("/")
async def root():
    """根路徑"""
    return {"message": "Hello Python World!"}

@app.get("/items/", response_model=List[Item])
async def get_items():
    """取得所有項目"""
    return items_db

@app.post("/items/", response_model=Item)
async def create_item(item: Item):
    """建立新項目"""
    item.id = len(items_db) + 1
    items_db.append(item)
    return item

@app.get("/items/{item_id}", response_model=Item)
async def get_item(item_id: int):
    """取得特定項目"""
    for item in items_db:
        if item.id == item_id:
            return item
    raise HTTPException(status_code=404, detail="Item not found")

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=8000, reload=True)

fastapi==0.104.1
uvicorn[standard]==0.24.0
pydantic==2.5.0
pytest==7.4.3
pytest-cov==4.1.0
black==23.11.0
pylint==3.0.3
mypy==1.7.1

# 格式化程式碼
black src tests

# 靜態分析
pylint src
mypy src

# 執行測試
pytest tests --cov=src --cov-report=html

# 安全性檢查
bandit -r src

# 安裝 pip-tools
pip install pip-tools

# 編譯需求檔案
pip-compile requirements.in

# 同步環境
pip-sync requirements.txt

# Web 框架
fastapi
uvicorn[standard]

# 資料處理
pandas
numpy

# 開發工具
pytest
black
pylint

// 在 main.ts 中啟用效能追蹤
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 開發環境啟用效能追蹤
if (process.env.NODE_ENV === 'development') {
  app.config.performance = true
}

app.mount('#app')

# application.yml
management:
  endpoints:
    web:
      exposure:
        include: health,info,metrics,prometheus
  endpoint:
    health:
      show-details: always
    metrics:
      enabled: true

@RestController
public class MetricsController {
    
    @Autowired
    private MeterRegistry meterRegistry;
    
    @GetMapping("/api/metrics/custom")
    public Map<String, Double> getCustomMetrics() {
        Map<String, Double> metrics = new HashMap<>();
        
        // JVM 記憶體使用量
        metrics.put("jvm.memory.used", 
            meterRegistry.get("jvm.memory.used").gauge().value());
        
        // HTTP 請求計數
        metrics.put("http.requests.total", 
            meterRegistry.get("http.server.requests").counter().count());
        
        return metrics;
    }
}

Ctrl + Shift + P：
- Developer: Show Running Extensions
- Developer: Restart Extension Host
- Developer: Toggle Developer Tools
- Performance: Startup Performance

// 在 VS Code 開發者工具 Console 中執行
// 查看擴充功能啟動時間
console.table(
  vscode.extensions.all
    .filter(ext => ext.isActive)
    .map(ext => ({
      id: ext.id,
      activationTime: ext.activationTime || 'Unknown'
    }))
    .sort((a, b) => (b.activationTime || 0) - (a.activationTime || 0))
)

code --install-extension ms-vsliveshare.vsliveshare

// .vscode/settings.json
{
  "liveshare.guestApprovalRequired": true,
  "liveshare.shareExternalFiles": false,
  "liveshare.shareTerminal": false
}

// .vscode/settings.json (專案層級)
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  
  // 統一擴充功能設定
  "eslint.workingDirectories": ["frontend"],
  "prettier.configPath": "frontend/.prettierrc",
  
  // Git 設定
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true
}

// .vscode/extensions.json
{
  "recommendations": [
    "ms-ceintl.vscode-language-pack-zh-hant",
    "eamodio.gitlens",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ],
  "unwantedRecommendations": [
    "ms-vscode.vscode-typescript"
  ]
}

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Git: Sync with Main",
      "type": "shell",
      "command": "git",
      "args": ["pull", "origin", "main"],
      "group": "build"
    },
    {
      "label": "Git: Create Feature Branch",
      "type": "shell",
      "command": "git",
      "args": ["checkout", "-b", "feature/${input:featureName}"],
      "group": "build"
    }
  ],
  "inputs": [
    {
      "id": "featureName",
      "description": "Feature branch name",
      "default": "new-feature",
      "type": "promptString"
    }
  ]
}

code --install-extension github.vscode-pull-request-github

code --install-extension gitlab.gitlab-workflow

{
  "Current Date": {
    "prefix": "date",
    "body": [
      "// Created on: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
      "// Author: $1",
      "$0"
    ],
    "description": "Insert current date and author"
  }
}

{
  "React Component": {
    "prefix": "rfc",
    "body": [
      "import React${1:, { useState \\}} from 'react';",
      "",
      "interface ${2:ComponentName}Props {",
      "  ${3:// props}",
      "}",
      "",
      "const ${2:ComponentName}: React.FC<${2:ComponentName}Props> = (${4:props}) => {",
      "  ${5:const [state, setState] = useState();}",
      "",
      "  return (",
      "    <div>",
      "      ${0:// Component content}",
      "    </div>",
      "  );",
      "};",
      "",
      "export default ${2:ComponentName};"
    ],
    "description": "React functional component with TypeScript"
  }
}

npm install -g yo generator-code
yo code

my-extension/
├── .vscode/
│   ├── launch.json        # 除錯配置
│   └── tasks.json         # 建置任務
├── src/
│   └── extension.ts       # 主進入點
├── package.json           # 擴充功能清單
├── tsconfig.json          # TypeScript 設定
└── README.md

{
  "name": "my-extension",
  "displayName": "My Extension",
  "version": "0.0.1",
  "engines": { "vscode": "^1.96.0" },
  "activationEvents": [],
  "contributes": {
    "commands": [
      {
        "command": "myExtension.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "main": "./out/extension.js"
}

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // 註冊命令
  const disposable = vscode.commands.registerCommand(
    'myExtension.helloWorld',
    () => {
      vscode.window.showInformationMessage('Hello from My Extension!');
    }
  );
  context.subscriptions.push(disposable);
}

export function deactivate() {}

# 安裝打包工具
npm install -g @vscode/vsce

# 打包成 .vsix 檔案
vsce package

# 發佈到 Marketplace（需先建立 Publisher）
vsce publish

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build Project",
      "type": "shell",
      "command": "mvn",
      "args": ["clean", "compile"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": ["$maven-compiler-java"]
    }
  ]
}

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Frontend: Install Dependencies",
      "type": "shell",
      "command": "npm",
      "args": ["install"],
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      },
      "group": "build"
    },
    {
      "label": "Frontend: Build",
      "type": "shell",
      "command": "npm",
      "args": ["run", "build"],
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      },
      "group": "build",
      "dependsOn": "Frontend: Install Dependencies"
    },
    {
      "label": "Backend: Test",
      "type": "shell",
      "command": "mvn",
      "args": ["test"],
      "options": {
        "cwd": "${workspaceFolder}/backend"
      },
      "group": "test"
    },
    {
      "label": "Full Build Pipeline",
      "dependsOrder": "sequence",
      "dependsOn": [
        "Frontend: Build",
        "Backend: Test"
      ],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Deploy to Environment",
      "type": "shell",
      "command": "deploy",
      "args": ["--env", "${input:environment}"],
      "group": "build"
    }
  ],
  "inputs": [
    {
      "id": "environment",
      "description": "Select deployment environment",
      "type": "pickString",
      "options": [
        "development",
        "staging", 
        "production"
      ],
      "default": "development"
    }
  ]
}

{
  "label": "Watch Mode",
  "type": "shell",
  "command": "npm",
  "args": ["run", "watch"],
  "isBackground": true,
  "group": "build",
  "presentation": {
    "echo": true,
    "reveal": "always",
    "focus": false,
    "panel": "new"
  },
  "problemMatcher": {
    "pattern": [
      {
        "regexp": "\\b\\B",
        "file": 1,
        "location": 2,
        "message": 3
      }
    ],
    "background": {
      "activeOnStart": true,
      "beginsPattern": "^.*webpack.*",
      "endsPattern": "^.*compiled.*"
    }
  }
}

// keybindings.json
[
  {
    "key": "ctrl+shift+b",
    "command": "workbench.action.tasks.build"
  },
  {
    "key": "ctrl+shift+t", 
    "command": "workbench.action.tasks.test"
  },
  {
    "key": "ctrl+shift+r",
    "command": "workbench.action.tasks.runTask",
    "args": "Full Build Pipeline"
  }
]

# .github/workflows/ci.yml
name: CI/CD Pipeline
on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - name: Setup Java
      uses: actions/setup-java@v4
      with:
        java-version: '17'
        distribution: 'temurin'
    - name: Build with Maven
      run: mvn clean compile test

# .gitlab-ci.yml
stages:
  - build
  - test
  - deploy

variables:
  MAVEN_OPTS: "-Dmaven.repo.local=$CI_PROJECT_DIR/.m2/repository"

cache:
  paths:
    - .m2/repository/
    - node_modules/

build:
  stage: build
  image: maven:3.8.1-openjdk-11
  script:
    - mvn clean compile
  artifacts:
    paths:
      - target/

test:
  stage: test
  image: maven:3.8.1-openjdk-11
  script:
    - mvn test
  coverage: '/Total.*?([0-9]{1,3})%/'
  artifacts:
    reports:
      junit:
        - target/surefire-reports/TEST-*.xml
      coverage_report:
        coverage_format: cobertura
        path: target/site/cobertura/coverage.xml

deploy:
  stage: deploy
  script:
    - echo "Deploying application..."
  only:
    - main

### 6.4 效能優化進階技巧

#### 6.4.1 檔案監控與搜尋優化

**排除不必要的檔案監控：**
```json
{
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/target/**": true,
    "**/dist/**": true,
    "**/.gradle/**": true
  },
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/target": true
  },
  "search.exclude": {
    "**/build/**": true,
    "**/coverage/**": true,
    "**/*.min.js": true
  },
  "search.followSymlinks": false
}

{
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "selection",
  "editor.occurrencesHighlight": "off",
  "editor.matchBrackets": "near",
  "editor.links": false,
  "editor.codeLens": false,
  "editor.maxTokenizationLineLength": 5000,
  "workbench.editor.limit.enabled": true,
  "workbench.editor.limit.value": 10,
  "extensions.autoUpdate": "onlyEnabledExtensions"
}

### 6.5 遠端開發與 SSH

#### 6.5.1 Remote Development 概述

VS Code Remote Development 讓您使用容器、遠端機器或 WSL 作為完整的開發環境，原始碼無需放在本機。

**Remote Development 擴充功能包含四個擴充功能：**

| 擴充功能 | 用途 | 安裝指令 |
|---------|------|---------|
| **Remote - SSH** | 透過 SSH 連線到遠端機器/VM | `ext install ms-vscode-remote.remote-ssh` |
| **Dev Containers** | 在 Docker 容器中開發 | `ext install ms-vscode-remote.remote-containers` |
| **WSL** | 在 Windows Subsystem for Linux 中開發 | `ext install ms-vscode-remote.remote-wsl` |
| **Remote - Tunnels** | 透過安全隧道連線，無需設定 SSH | `ext install ms-vscode.remote-server` |

**一鍵安裝整包：**
```bash
code --install-extension ms-vscode-remote.vscode-remote-extensionpack

# ~/.ssh/config
Host dev-server
    HostName 192.168.1.100
    User developer
    Port 22
    IdentityFile ~/.ssh/id_rsa
    ForwardAgent yes

Host cloud-dev
    HostName your-cloud-server.com
    User ubuntu
    Port 22
    IdentityFile ~/.ssh/id_cloud_rsa

code --install-extension github.codespaces

{
  "remote.SSH.enableDynamicForwarding": false,
  "remote.SSH.maxReconnectionAttempts": 3,
  "remote.SSH.enableRemoteCommand": true
}

// myproject.code-workspace
{
  "folders": [
    {
      "name": "Frontend",
      "path": "./frontend"
    },
    {
      "name": "Backend",
      "path": "./backend"
    },
    {
      "name": "Documentation",
      "path": "./docs"
    }
  ],
  "settings": {
    "files.exclude": {
      "**/node_modules": true,
      "**/target": true
    }
  },
  "extensions": {
    "recommendations": [
      "ms-vscode.vscode-typescript-next",
      "vscjava.vscode-java-pack"
    ]
  }
}

# 建立專案範本資料夾
mkdir project-template
cd project-template

# 建立基本結構
mkdir .vscode
touch .vscode/settings.json
touch .vscode/tasks.json
touch .vscode/launch.json

// .vscode/settings.json 範本
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "java.configuration.updateBuildConfiguration": "automatic",
  "spring.boot.java.mainClass": "com.example.Application"
}

code --install-extension GitHub.copilot-chat

// settings.json - 完全停用 AI 功能
{
  "chat.disableAIFeatures": true
}

// settings.json - 啟用 NES
{
  "github.copilot.nextEditSuggestions.enabled": true
}

{
  "editor.inlineSuggest.edits.allowCodeShifting": true,
  "editor.inlineSuggest.edits.renderSideBySide": "auto",
  "editor.inlineSuggest.edits.showCollapsed": false,
  "github.copilot.nextEditSuggestions.fixes": true
}

// settings.json
{
  "chat.agentsControl.enabled": true,
  "chat.agentsControl.clickBehavior": "cycle",
  "chat.viewSessions.enabled": true
}

{
  "github.copilot.chat.searchSubagent.enabled": true
}

{
  "github.copilot.chat.implementAgent.model": "Claude Sonnet 4.5 (copilot)"
}

# Copilot 自訂指令

## 程式碼風格
- 使用 TypeScript 嚴格模式
- 函式必須有 JSDoc 註解
- 使用 Vue 3 Composition API

## 技術堆疊
- 前端：Vue 3 + TypeScript + Tailwind CSS
- 後端：Spring Boot + Java 17
- 資料庫：MySQL 8.0

# AGENTS.md

## 程式碼慣例
- 使用繁體中文撰寫註解
- 遵循 RESTful API 設計原則
- 所有 API 端點需有錯誤處理

## 專案結構
- frontend/ - Vue 3 前端
- backend/ - Spring Boot 後端

---
name: "Vue 元件指引"
description: "Vue 元件開發規範"
applyTo: "src/**/*.vue"
---
# Vue 元件指引
- 使用 `<script setup lang="ts">` 語法
- Props 使用 `defineProps` 定義型別
- 元件名稱使用 PascalCase

---
description: "建立新的 Vue 元件"
mode: "agent"
tools: ["codebase", "editFiles"]
---
# 建立 Vue 3 元件

請依照以下步驟建立新的 Vue 3 元件：

1. 使用 Composition API 和 `<script setup>` 語法
2. 加入 Props 和 Emits 的 TypeScript 型別定義
3. 建立對應的單元測試檔案
4. 確保元件遵循現有的命名慣例

元件名稱：${{input:componentName}}
放置路徑：${{input:path}}

---
name: code-reviewer
model: ['Claude Sonnet 4.5 (copilot)', 'GPT-5 (copilot)']
tools: ['codebase', 'terminal']
---

你是一位程式碼審查專家。請審查提供的程式碼，關注：
- 程式碼品質與可讀性
- 潛在的安全漏洞
- 效能最佳化建議

---
name: my-agent
user-invokable: false
disable-model-invocation: false
agents: ['Modify', 'Search']
---

// settings.json
{
  "chat.agentSkillsLocations": {
    ".github/skills": true,
    "~/.copilot/skills": true
  }
}

{
  "github.copilot.chat.organizationInstructions.enabled": true
}

// .vscode/settings.json
{
  "github.copilot.chat.hooks": {
    "postSave": [
      {
        "command": "npx prettier --write ${file}",
        "description": "儲存後自動格式化"
      }
    ],
    "postCommand": [
      {
        "command": "npm run lint",
        "description": "執行指令後自動檢查"
      }
    ]
  }
}

{
  "servers": {
    "my-database": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "DATABASE_URL": "${env:DATABASE_URL}"
      }
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "./data"]
    }
  }
}

{
  "github.copilot.chat.copilotMemory.enabled": true
}

{
  // 設定思考預算
  "github.copilot.chat.anthropic.thinking.budgetTokens": 10000,
  // 啟用工具搜尋
  "github.copilot.chat.anthropic.toolSearchTool.enabled": true,
  // 啟用上下文編輯（實驗性）
  "github.copilot.chat.anthropic.contextEditing.enabled": true
}

{
  "chat.tools.terminal.sandbox.enabled": true,
  "chat.tools.terminal.sandbox.network": {
    "allowedDomains": ["*.npmjs.org", "*.github.com"]
  }
}

{
  "chat.tools.terminal.enableAutoApprove": true
}

{
  "files.autoSave": "onFocusChange",
  "files.autoSaveDelay": 1000
}

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true,
    "source.removeUnusedImports": true
  }
}

{
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },
  "editor.suggestOnTriggerCharacters": true,
  "editor.acceptSuggestionOnEnter": "on"
}

feat: 新增用戶註冊功能
fix: 修正登入驗證問題
docs: 更新 API 文件
style: 調整程式碼格式
refactor: 重構用戶服務層
test: 新增用戶服務測試

{
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/*/**": true,
    "**/target/**": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/target": true,
    "**/dist": true
  }
}

{
  "editor.minimap.enabled": false,
  "editor.semanticHighlighting.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.hover.enabled": false
}

{
  "typescript.preferences.includePackageJsonAutoImports": "off",
  "typescript.suggest.autoImports": false,
  "typescript.surveys.enabled": false,
  "files.exclude": {
    "**/node_modules": true,
    "**/target": true,
    "**/.git": true
  }
}

// 正確做法：使用環境變數
const API_KEY = process.env.REACT_APP_API_KEY;
const DB_PASSWORD = process.env.DB_PASSWORD;

// 錯誤做法：直接寫在程式碼中
const API_KEY = "sk-1234567890abcdef"; // 不要這樣做！

// .vscode/settings.json - 不要提交敏感設定
{
  "java.configuration.runtimes": [
    {
      "name": "JavaSE-17",
      "path": "${env:JAVA_HOME}"  // 使用環境變數
    }
  ],
  "spring.datasource.password": "${env:DB_PASSWORD}"
}

// 設定檔範例
{
  "github.gitAuthentication": true,
  "gitlab.instanceUrl": "${env:GITLAB_URL}",
  "gitlab.personalAccessToken": "${env:GITLAB_TOKEN}"
}

# 前端依賴更新
npm audit
npm audit fix --force

# 檢查過時套件
npm outdated

# 後端依賴檢查
mvn dependency-check:check
mvn versions:display-dependency-updates

{
  "extensions.autoCheckUpdates": true,
  "extensions.autoUpdate": false,  // 手動審查更新
  "telemetry.telemetryLevel": "off",  // 關閉遙測
  "update.showReleaseNotes": false
}

// .vscode/settings.json
{
  "sonarlint.connectedMode.project": {
    "connectionId": "your-sonarqube-server",
    "projectKey": "your-project-key"
  }
}

# .devcontainer/Dockerfile
FROM mcr.microsoft.com/vscode/devcontainers/java:17

# 安全設定
RUN useradd -m -s /bin/bash developer && \
    usermod -aG sudo developer

USER developer
WORKDIR /workspace

# 安裝安全工具
RUN npm install -g audit-ci

// .devcontainer/devcontainer.json
{
  "forwardPorts": [3000, 8080],
  "portsAttributes": {
    "3000": {
      "label": "Frontend Dev Server",
      "requireLocalPort": true
    }
  }
}

// 團隊共用 settings.json
{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "files.encoding": "utf8",
  "files.eol": "\n",
  "java.format.settings.url": "https://raw.githubusercontent.com/google/styleguide/gh-pages/eclipse-java-google-style.xml"
}

// .vscode/settings.json (專案層級)
{
  "eslint.workingDirectories": ["frontend"],
  "java.checkstyle.configuration": "/path/to/checkstyle.xml",
  "prettier.configPath": "./.prettierrc",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[java]": {
    "editor.defaultFormatter": "redhat.java"
  }
}

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Pre-commit Check",
      "type": "shell",
      "command": "npm run lint && npm run test && mvn checkstyle:check",
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    }
  ]
}

# 功能開發
feature/user-authentication
feature/payment-integration

# 修復問題
bugfix/login-error
hotfix/security-patch

# 版本發佈
release/v2.1.0

# 格式：<type>(<scope>): <description>
feat(auth): add JWT token validation
fix(payment): resolve currency conversion bug
docs(readme): update installation instructions
test(user): add unit tests for user service
refactor(api): simplify error handling logic

// .vscode/settings.json
{
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "git.autofetch": true,
  "git.pullTags": true,
  "gitlens.codeLens.enabled": true,
  "gitlens.blame.compact": false
}