npm - @user231243/remove-debugger - Versions diffs - 0.0.3 → 0.0.5 - Mend

@user231243/remove-debugger 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/KE-HOACH-HOC-LAI-REACT.md +353 -0
package/out/extension.js +53 -0
package/out/extension.js.map +1 -0
package/package.json +2 -1
package/.vscodeignore +0 -9
package/docs/superpowers/plans/2026-06-03-remove-debugger-extension.md +0 -319
package/docs/superpowers/specs/2026-06-03-remove-debugger-extension-design.md +0 -83
package/remove-debugger-0.0.1.vsix +0 -0
package/src/extension.ts +0 -66
package/tsconfig.json +0 -12

package/KE-HOACH-HOC-LAI-REACT.md ADDED Viewed

@@ -0,0 +1,353 @@
+# Kế Hoạch Học Lại React Cho Dev Đã Lâu Không Đụng Tới
+> **Mục tiêu**: Từ một frontend dev từng biết React nhưng đã bỏ lâu, quay lại và bắt kịp đúng chuẩn React hiện đại (React 19, năm 2026) trong khoảng 3–4 tuần.
+>
+> **Đối tượng**: dev có nền lập trình, không phải newbie. Vì vậy plan này đi nhanh, tập trung vào *cái đã đổi*, không dạy lại JS/HTML/CSS cơ bản.
+>
+> **Cách dùng file này**: đọc Mục 1 (tư duy) trước. Sau đó bám theo Mục 6 (lịch theo ngày). Mỗi khái niệm mới đều có code mẫu + bẫy thường gặp ngay tại chỗ.
+---
+## Mục Lục
+1. [Tư duy cần thay đổi trước tiên](#1-tư-duy-cần-thay-đổi-trước-tiên)
+2. [Những thói quen cũ cần bỏ](#2-những-thói-quen-cũ-cần-bỏ)
+3. [Lộ trình kiến thức theo tầng](#3-lộ-trình-kiến-thức-theo-tầng)
+4. [Bối cảnh công cụ năm 2026](#4-bối-cảnh-công-cụ-năm-2026)
+5. [Phương pháp "Learn by Source"](#5-phương-pháp-learn-by-source)
+6. [Lịch học chi tiết theo ngày (4 tuần)](#6-lịch-học-chi-tiết-theo-ngày-4-tuần)
+7. [Những bẫy thường gặp khi quay lại](#7-những-bẫy-thường-gặp-khi-quay-lại)
+8. [Bài tự kiểm tra (đánh giá tiến độ)](#8-bài-tự-kiểm-tra)
+9. [Nguồn học đáng tin](#9-nguồn-học-đáng-tin)
+10. [Cách học nhanh nhất với trợ lý](#10-cách-học-nhanh-nhất-với-trợ-lý)
+11. [Checklist tổng khi hoàn thành](#11-checklist-tổng-khi-hoàn-thành)
+12. [Thuật ngữ (Glossary)](#12-thuật-ngữ-glossary)
+---
+## 1. Tư Duy Cần Thay Đổi Trước Tiên
+Đây là điều quan trọng nhất, đọc kỹ trước khi code dòng nào.
+**React ngày xưa** trong đầu bạn: "Một thư viện chạy trong trình duyệt, lấy dữ liệu bằng `useEffect`, render ra UI."
+**React bây giờ**: tư duy **server-first** (ưu tiên chạy ở server). Một component có thể chạy ngay trên server, lấy dữ liệu thẳng từ database, rồi stream HTML về cho người dùng — *không cần `useEffect`*. Phần chạy ở client chỉ là phần nào thật sự cần tương tác (click, gõ phím, kéo thả).
+### Ba thay đổi tư duy cụ thể
+**a) Mặc định là Server, client là ngoại lệ.**
+Trong Next.js App Router, mọi component mặc định là Server Component. Chỉ thêm `'use client'` khi cần state, event, hoặc API trình duyệt. Ngược hẳn với ngày xưa (mọi thứ là client).
+**b) `useEffect` KHÔNG phải để lấy dữ liệu.**
+Ngày xưa: `useEffect(() => { fetch(...) }, [])`. Bây giờ đó là anti-pattern. Effect chỉ để **đồng bộ với hệ thống bên ngoài React** (websocket, event listener, đo DOM, tích hợp thư viện non-React). Lấy dữ liệu → Server Component hoặc TanStack Query.
+**c) UI là hàm của state, nhưng state giờ chia 2 loại rõ ràng:**
+- **Server state**: dữ liệu từ backend (danh sách sản phẩm, user...). Quản bằng TanStack Query / RSC. KHÔNG nhét vào Redux.
+- **Client state**: trạng thái UI thuần (modal mở/đóng, tab đang chọn, form đang gõ). Quản bằng `useState` / Zustand.
+Hầu hết mọi thứ mới mẻ bên dưới đều bắt nguồn từ ba cú chuyển dịch này.
+---
+## 2. Những Thói Quen Cũ Cần Bỏ
+| Thói quen cũ | Bây giờ làm gì | Lý do |
+|---|---|---|
+| `create-react-app` (CRA) | **Vite** (app thuần client) hoặc **Next.js / React Router 7** (full-stack) | CRA đã bị React team khai tử chính thức, không còn maintain |
+| Lấy dữ liệu bằng `useEffect` | Server Component, `use()`, hoặc TanStack Query | Effect gây race condition, double-fetch, waterfall khó kiểm soát |
+| Class component | Hooks (trừ Error Boundary vẫn là class) | Hooks gọn hơn, tái sử dụng logic dễ hơn |
+| `forwardRef` | `ref` là một prop bình thường | React 19 bỏ bước lọc `ref` khỏi props |
+| Rải `useMemo` / `useCallback` khắp nơi | React Compiler tự lo | Compiler memo hóa chính xác hơn tay người |
+| Redux cho mọi thứ | Server state → TanStack Query / RSC; client state → Zustand / Context | Redux cũ quá nhiều boilerplate cho việc nó làm |
+| `<Context.Provider>` | `<Context>` trực tiếp (React 19) | Cú pháp gọn hơn, `.Provider` bị deprecate |
+| `propTypes` | TypeScript | Type tĩnh, bắt lỗi lúc compile |
+| `react-helmet` cho `<title>`/`<meta>` | Đặt thẳng `<title>` trong JSX (React 19 tự hoist lên `<head>`) | Built-in, không cần thư viện |
+| Higher-Order Component (HOC) chồng chất | Custom hooks | Dễ đọc, không "wrapper hell" |
+| `defaultProps` cho function component | Default value của tham số JS | `defaultProps` bị bỏ cho function component |
+---
+## 3. Lộ Trình Kiến Thức Theo Tầng
+Học theo thứ tự. Đừng nhảy cóc lên tầng 3 khi tầng 1 còn lủng.
+### Tầng 1 — Nền tảng, học ngay
+- **Hooks cho thành thạo**: `useState`, `useEffect` cho *đúng*, `useRef`, `useContext`, `useReducer`, custom hooks.
+  - Luật vàng `useEffect`: chỉ dùng để đồng bộ với hệ thống ngoài React. Nếu đang tính toán từ props/state → tính thẳng lúc render, đừng nhét vào effect.
+- **TypeScript cho React**: type props, `useState<T>()`, generic component, `ReactNode` vs `ReactElement`, type cho event (`React.ChangeEvent<HTMLInputElement>`).
+- **Vite**: hiểu `vite.config.ts`, env (`import.meta.env`), HMR, alias path.
+### Tầng 2 — Chuẩn hiện đại
+- **Server Components (RSC)**: phân biệt Server vs Client Component, ranh giới `'use client'`, cái gì truyền qua ranh giới được (data serialize được) và không (function, class).
+- **Next.js App Router**: file routing (`app/`), `layout.tsx`, `page.tsx`, `loading.tsx`, `error.tsx`, route group, dynamic route, `generateMetadata`.
+- **Data fetching**:
+  - Server: component `async` + `await fetch()` / gọi DB thẳng.
+  - Client: **TanStack Query** — `useQuery`, `useMutation`, cache, invalidation, optimistic update.
+- **Suspense**: gói component đang chờ, hiện `fallback`. Thay cho mớ cờ `isLoading`.
+### Tầng 3 — Mới nhất (React 19)
+- `use()` — đọc promise / context giữa lúc render (kể cả trong `if`, loop).
+- Actions + `useActionState` — xử lý form, tự có pending và lỗi.
+- `useFormStatus` — component con đọc trạng thái form cha mà không cần prop.
+- `useOptimistic` — hiện kết quả ngay cho UI mượt, tự revert nếu lỗi.
+- `ref` là prop — bỏ `forwardRef`.
+- Document metadata — `<title>`, `<meta>` đặt trong JSX, tự hoist.
+- **React Compiler** — tự động memo hóa, bỏ `useMemo`/`useCallback` thủ công.
+> Năm tính năng đầu đã có app demo + giải thích internals trong `react19-demo/GUIDE.md`.
+---
+## 4. Bối Cảnh Công Cụ Năm 2026
+| Hạng mục | Lựa chọn phổ biến | Ghi chú |
+|---|---|---|
+| Build tool | **Vite** | Mặc định cho SPA. Nhanh, cấu hình ít |
+| Framework | **Next.js** (nhiều việc nhất) hoặc **React Router 7** (Remix cũ) | Next.js thống trị thị trường tuyển dụng |
+| CSS | **Tailwind CSS** + **shadcn/ui** | Tailwind utility-first; shadcn là bộ component copy thẳng vào repo |
+| Lấy dữ liệu | **TanStack Query** | Chuẩn de-facto cho client data |
+| State client | **Zustand** (đơn giản), **Redux Toolkit** (app lớn) | Dùng RTK chứ không Redux cũ; nhiều app không cần cả hai |
+| Form | **react-hook-form** + **zod** | RHF quản form ít re-render; zod validate + suy ra type |
+| Test | **Vitest** + React Testing Library + **Playwright** | Vitest thay Jest; Playwright cho E2E |
+| Routing (SPA) | **React Router 7** hoặc **TanStack Router** | Nếu không dùng Next.js |
+| Component dev | **Storybook** | Phát triển/ test component cô lập |
+---
+## 5. Phương Pháp "Learn by Source"
+Tên thư mục project là `learning-by-source` — đây là triết lý học của bạn. Nhưng làm cho đúng:
+**Đọc source React KHÔNG phải món chính để học *dùng* React. Nó là gia vị.** Source là code xây *động cơ* (reconciler, fiber, scheduler), còn bạn đang học *lái xe*.
+### Quy trình đúng
+```
+1. DÙNG trước     → đọc react.dev, viết code, làm app chạy được
+2. TÒ MÒ          → "ủa sao useOptimistic tự revert được hay vậy?"
+3. MỞ ĐÚNG ĐOẠN   → tìm chính hàm đó trong source, đọc, hiểu "tại sao"
+```
+KHÔNG đọc source từ đầu tới cuối. Chỉ mở đúng đoạn trả lời tò mò vừa nảy ra.
+### Khi nào đọc source đáng giá
+- Đã dùng quen, muốn hiểu *tại sao* (như đã làm với `use()` ném promise).
+- Debug bug sâu, lạ.
+- Đọc/viết thư viện, RFC.
+- Phỏng vấn senior.
+- Thỏa mãn tò mò kỹ thuật.
+### Map source React (để mở đúng file)
+| Muốn hiểu | Mở file |
+|---|---|
+| Hooks (`useState`, `useOptimistic`, `useActionState`...) | `packages/react-reconciler/src/ReactFiberHooks.js` |
+| `use()` + Suspense ném promise | `packages/react-reconciler/src/ReactFiberThenable.js` |
+| Cách tạo element, vì sao `ref` là prop | `packages/react/src/jsx/ReactJSXElement.js` |
+| Scheduler, ưu tiên update | `packages/scheduler/src/forks/Scheduler.js` |
+| `useFormStatus` | `packages/react-dom/src/...` (tìm `FormStatus`) |
+---
+## 6. Lịch Học Chi Tiết Theo Ngày (4 Tuần)
+Giả định ~2 giờ/ngày. Điều chỉnh theo thời gian thực tế.
+### Tuần 1 — Làm mới nền tảng (Vite + Hooks + TS + TanStack Query)
+| Ngày | Việc | Sản phẩm |
+|---|---|---|
+| 1 | Dựng Vite + React + TS. Đọc react.dev mục "Describing the UI". Viết vài component có props + type. | App trống chạy được |
+| 2 | State + event. Đọc "Adding Interactivity". Làm counter, toggle, form controlled. | Component tương tác |
+| 3 | Đọc **"You Might Not Need an Effect"** (cực quan trọng). Liệt kê các chỗ ngày xưa bạn lạm dụng effect. | Ghi chú luật effect |
+| 4 | `useEffect` đúng cách + cleanup. `useRef`, `useContext`. | Component có effect đồng bộ thật |
+| 5 | Cài TanStack Query. `useQuery` lấy danh sách từ API công khai. | Màn hình danh sách |
+| 6 | `useMutation` + invalidation + optimistic. Màn hình chi tiết. | CRUD client hoàn chỉnh |
+| 7 | Ôn + refactor. Tách custom hooks. | **App phim/to-do hoàn chỉnh** |
+**Dự án tuần 1**: app danh sách phim (dùng API TMDB hoặc OMDb) hoặc to-do. Có loading, error, search. Toàn client.
+### Tuần 2 — Full-stack với Next.js App Router
+| Ngày | Việc | Sản phẩm |
+|---|---|---|
+| 8 | Dựng Next.js App Router. Hiểu `app/`, `layout`, `page`. | App Next chạy |
+| 9 | Server Component lấy dữ liệu (`async` component + fetch). | Trang list render từ server |
+| 10 | Ranh giới `'use client'`. Khi nào cần. Truyền data qua ranh giới. | Trang có phần interactive |
+| 11 | `loading.tsx` + Suspense + streaming. `error.tsx`. | Loading/error UI |
+| 12 | Server Actions (`'use server'`) — form submit chạy trên server. | Form tạo dữ liệu |
+| 13 | Dynamic route `[id]`, `generateMetadata` cho SEO. | Trang chi tiết + meta |
+| 14 | Ôn + deploy lên Vercel. | **Blog/note app full-stack online** |
+**Dự án tuần 2**: blog hoặc app ghi chú. CRUD chạy qua Server Actions, dữ liệu lưu thật (SQLite/Postgres hoặc một file JSON cho đơn giản).
+### Tuần 3 — React 19 + hoàn thiện chất lượng
+| Ngày | Việc | Sản phẩm |
+|---|---|---|
+| 15 | `useActionState` + `useFormStatus` cho form. | Form có pending tự động |
+| 16 | `useOptimistic` — optimistic UI. | Like/comment hiện ngay |
+| 17 | `use()` đọc promise/context. `ref` là prop. | Bỏ hết `forwardRef` cũ |
+| 18 | Tailwind sâu + shadcn/ui. Cài, dùng vài component. | Giao diện đẹp |
+| 19 | react-hook-form + zod — form validate đầy đủ. | Form đăng ký có validate |
+| 20 | Bật React Compiler. So sánh trước/sau (gỡ bớt useMemo). | App đã memo hóa tự động |
+| 21 | Ôn toàn bộ. Gộp mọi thứ vào 1 app. | **App hoàn chỉnh 2026** |
+### Tuần 4 (tùy chọn) — Đào sâu + chuyên nghiệp hóa
+| Ngày | Việc |
+|---|---|
+| 22–23 | Testing: Vitest + RTL cho unit, Playwright cho E2E |
+| 24 | Đọc source React đúng đoạn (theo Mục 5) cho 2–3 tính năng đã dùng |
+| 25 | Performance: React DevTools Profiler, code splitting, lazy |
+| 26 | Accessibility (a11y) cơ bản + semantic HTML |
+| 27–28 | Dự án tổng kết tự chọn / chuẩn bị portfolio |
+---
+## 7. Những Bẫy Thường Gặp Khi Quay Lại
+**1. Lấy data trong `useEffect` theo quán tính.**
+```tsx
+// ❌ Quán tính cũ
+useEffect(() => { fetch('/api/x').then(setData) }, []);
+// ✅ Client: TanStack Query
+const { data } = useQuery({ queryKey: ['x'], queryFn: () => fetch('/api/x').then(r => r.json()) });
+// ✅ Server Component: lấy thẳng
+async function Page() { const data = await getX(); return <List data={data} />; }
+```
+**2. Quên `'use client'` khi dùng hook/event trong Next.js.**
+Lỗi kiểu "useState is not a function" hoặc "Event handlers cannot be passed to Client Component props" → thiếu `'use client'` ở đầu file.
+**3. Truyền function/class qua ranh giới Server→Client.**
+Chỉ data serialize được (string, number, object thường, array) mới qua được. Truyền function từ Server Component xuống Client Component prop → lỗi.
+**4. Tạo promise trong render khi dùng `use()`.**
+```tsx
+// ❌ Promise mới mỗi render -> loop
+function C() { const x = use(fetch('/api')); }
+// ✅ Tạo ngoài / dùng cache
+const p = fetchData();
+function C() { const x = use(p); }
+```
+**5. Gọi `addOptimistic` ngoài action.**
+`useOptimistic` chỉ có nghĩa trong vùng transition (bên trong action). Gọi ngoài → React cảnh báo, không revert đúng.
+**6. Vẫn rải `useMemo`/`useCallback` khắp nơi.**
+Khi đã bật React Compiler, phần lớn là thừa. Đừng tối ưu sớm bằng tay.
+**7. Nhét server state vào Redux/Zustand.**
+Danh sách từ API không nên ở trong store global. Để TanStack Query lo cache + đồng bộ. Store chỉ giữ client state thuần.
+**8. Dùng `index` làm `key` trong list động.**
+Vẫn là bẫy kinh điển. Dùng id ổn định.
+---
+## 8. Bài Tự Kiểm Tra
+Trả lời được hết = sẵn sàng. Không cần học thuộc, hiểu là đủ.
+**Cơ bản**
+1. Khi nào *được phép* dùng `useEffect`? Cho 2 ví dụ đúng.
+2. Khác nhau giữa server state và client state? Mỗi loại quản bằng gì?
+3. `useMemo` để làm gì? Sau khi có React Compiler còn cần không?
+**Trung cấp**
+4. Server Component khác Client Component chỗ nào? Khi nào bắt buộc `'use client'`?
+5. Cái gì truyền qua ranh giới Server→Client được, cái gì không?
+6. `Suspense` hoạt động dựa trên cơ chế gì? (gợi ý: throw)
+7. TanStack Query: `staleTime` vs `gcTime` khác gì?
+**React 19**
+8. `useActionState` trả về gì? `isPending` từ đâu ra?
+9. Vì sao `useOptimistic` tự revert được khi lỗi mà không cần code rollback?
+10. Vì sao React 19 bỏ được `forwardRef`?
+> Bí chỗ nào → mở `react19-demo/GUIDE.md` hoặc hỏi trợ lý mở source giải thích.
+---
+## 9. Nguồn Học Đáng Tin (chỉ dùng những nguồn này)
+| Nguồn | Dùng để | Đọc cụ thể |
+|---|---|---|
+| **react.dev** | Học dùng React đúng chuẩn | "Learn" toàn bộ; đặc biệt "You Might Not Need an Effect", "Reusing Logic with Custom Hooks" |
+| **Next.js docs** | App Router, RSC, Server Actions | Phần "App Router" → "Data Fetching" và "Server Actions" |
+| **TanStack Query docs** | Quản server state | "Important Defaults", "Mutations", "Optimistic Updates" |
+| **TkDodo blog** | TanStack Query nâng cao | Series "Practical React Query" |
+| **Josh Comeau** | Mô hình tư duy React sâu | "Why React Re-Renders", "Understanding useMemo and useCallback" |
+| **Source React (GitHub)** | Hiểu *tại sao* (theo Mục 5) | Chỉ mở đúng file cần, không đọc tràn |
+> Tránh blog/video cũ trước 2023 — nhiều pattern đã lỗi thời (CRA, lấy data bằng effect, class component).
+---
+## 10. Cách Học Nhanh Nhất Với Trợ Lý
+Mình (Claude) hỗ trợ theo các cách, chọn cách hợp:
+1. **Kiểm tra kiến thức** — hỏi nhanh để tìm lỗ hổng (dùng Mục 8).
+2. **Cùng dựng app demo** — từng bước, giải thích mỗi khái niệm ngay lúc làm.
+3. **Xem internals** — khi muốn hiểu "tại sao nó chạy vậy", mở source đúng đoạn.
+4. **Dịch code cũ → mới** — bạn dán component cũ, mình viết lại chuẩn 2026 + giải thích từng thay đổi. **(Nhanh nhất, khuyên dùng đầu tiên.)**
+Đã làm cùng nhau:
+- `react19-demo/` — app Mini Chat minh họa 5 tính năng React 19.
+- `react19-demo/GUIDE.md` — giải thích từng tính năng + internals.
+---
+## 11. Checklist Tổng Khi Hoàn Thành
+**Tư duy & nền tảng**
+- [ ] Hiểu rõ tư duy server-first.
+- [ ] Phân biệt server state vs client state, biết dùng công cụ nào.
+- [ ] Viết component bằng TypeScript thành thạo (props, generic, event type).
+- [ ] Dùng `useEffect` đúng chỗ — và biết khi nào KHÔNG dùng.
+**Chuẩn hiện đại**
+- [ ] Lấy dữ liệu bằng TanStack Query (client) và Server Component (server).
+- [ ] Dựng app Next.js App Router có Server Actions.
+- [ ] Dùng Suspense + streaming cho loading.
+- [ ] Hiểu ranh giới `'use client'` và cái gì truyền qua được.
+**React 19**
+- [ ] Dùng `use()`, `useActionState`, `useFormStatus`, `useOptimistic`.
+- [ ] `ref` là prop (bỏ `forwardRef`).
+- [ ] Bật React Compiler, gỡ memo thủ công thừa.
+**Chất lượng**
+- [ ] Style bằng Tailwind + shadcn/ui.
+- [ ] Form bằng react-hook-form + zod.
+- [ ] Viết test cơ bản (Vitest + RTL, một E2E Playwright).
+- [ ] Deploy được lên Vercel.
+> Xong checklist này = bạn đã bắt kịp React hiện đại.
+---
+## 12. Thuật Ngữ (Glossary)
+| Thuật ngữ | Nghĩa ngắn |
+|---|---|
+| **RSC** | React Server Components — component chạy trên server, không gửi JS xuống client |
+| **SSR** | Server-Side Rendering — render HTML trên server rồi hydrate ở client |
+| **Hydration** | Gắn JS tương tác vào HTML đã render sẵn từ server |
+| **Streaming** | Gửi HTML từng phần khi sẵn sàng, không chờ toàn bộ |
+| **Suspense** | Cơ chế hiện `fallback` khi một phần cây đang chờ dữ liệu |
+| **Transition** | Update ưu tiên thấp, không chặn UI (nền tảng của `useOptimistic`, `useActionState`) |
+| **Server Action** | Hàm `'use server'` chạy trên server, gọi được thẳng từ form/client |
+| **Fiber** | Đơn vị công việc nội bộ của React cho mỗi component instance |
+| **Reconciler** | Phần lõi React so sánh cây cũ/mới để quyết định cập nhật gì |
+| **Hydration mismatch** | Lỗi khi HTML server và render client khác nhau |
+| **Server state** | Dữ liệu thuộc về backend (cần đồng bộ, cache) |
+| **Client state** | Trạng thái UI thuần (modal, tab, input đang gõ) |
+| **Optimistic update** | Hiện kết quả trước khi server xác nhận, revert nếu lỗi |
+| **Memoization** | Nhớ kết quả tính toán để khỏi tính lại (giờ React Compiler tự lo) |

package/out/extension.js ADDED Viewed

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.activate = activate;
+exports.cleanText = cleanText;
+exports.deactivate = deactivate;
+const vscode = require("vscode");
+function activate(context) {
+    const disposable = vscode.commands.registerCommand('removeDebugger.clean', () => {
+        const editor = vscode.window.activeTextEditor;
+        if (!editor) {
+            return;
+        }
+        const config = vscode.workspace.getConfiguration('removeDebugger');
+        const shouldRemoveDebugger = config.get('removeDebugger', true);
+        const shouldRemoveConsole = config.get('removeConsole', true);
+        const consoleMethods = config.get('consoleMethodsToRemove', [
+            'log', 'warn', 'error', 'info', 'debug', 'trace',
+        ]);
+        const text = editor.document.getText();
+        const cleaned = cleanText(text, shouldRemoveDebugger, shouldRemoveConsole, consoleMethods);
+        if (cleaned === text) {
+            vscode.window.showInformationMessage('No debugger statements or console calls found.');
+            return;
+        }
+        const edit = new vscode.WorkspaceEdit();
+        const fullRange = new vscode.Range(editor.document.positionAt(0), editor.document.positionAt(text.length));
+        edit.replace(editor.document.uri, fullRange, cleaned);
+        vscode.workspace.applyEdit(edit);
+    });
+    context.subscriptions.push(disposable);
+}
+function cleanText(text, removeDebugger, removeConsole, consoleMethods) {
+    const lines = text.split('\n');
+    const filtered = lines.filter(line => {
+        if (removeDebugger && /^\s*debugger\s*;?\s*$/.test(line)) {
+            return false;
+        }
+        if (removeConsole && consoleMethods.length > 0) {
+            const methodPattern = consoleMethods.map(m => escapeRegex(m)).join('|');
+            const consoleRegex = new RegExp(`^\\s*console\\.(${methodPattern})\\s*\\(.*\\)\\s*;?\\s*$`);
+            if (consoleRegex.test(line)) {
+                return false;
+            }
+        }
+        return true;
+    });
+    return filtered.join('\n');
+}
+function escapeRegex(s) {
+    return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function deactivate() { }
+//# sourceMappingURL=extension.js.map

package/out/extension.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -6,7 +6,7 @@
   },
   "displayName": "Remove Debugger",
   "description": "Remove debugger statements and console calls from JS/TS files",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "engines": { "vscode": "^1.75.0" },
   "categories": ["Other"],
   "activationEvents": [
@@ -16,6 +16,7 @@
     "onLanguage:typescriptreact"
   ],
   "main": "./out/extension.js",
+  "files": ["out/", "package.json", "KE-HOACH-HOC-LAI-REACT.md"],
   "contributes": {
     "commands": [
       {

package/.vscodeignore DELETED Viewed

@@ -1,9 +0,0 @@
-.vscode/**
-src/**
-.gitignore
-tsconfig.json
-**/*.map
-**/*.ts
-!out/**
-node_modules/**
-docs/**

package/docs/superpowers/plans/2026-06-03-remove-debugger-extension.md DELETED Viewed

@@ -1,319 +0,0 @@
-# Remove Debugger VS Code Extension Implementation Plan
-> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
-**Goal:** Build a VS Code extension that adds an editor title bar button to remove `debugger;` statements and `console.*()` calls from the active JS/TS file.
-**Architecture:** Single `extension.ts` file registers a command bound to an editor title bar button. When clicked, it reads the active document, applies regex patterns (controlled by user settings) to strip matching lines, then replaces the document via `WorkspaceEdit` to preserve undo history.
-**Tech Stack:** TypeScript, VS Code Extension API (`vscode`), Node.js built-ins only — no external runtime dependencies.
----
-## File Map
-| File | Action | Responsibility |
-|---|---|---|
-| `package.json` | Create | Extension manifest: name, commands, menus, settings, activationEvents |
-| `tsconfig.json` | Create | TypeScript compiler config |
-| `.vscodeignore` | Create | Exclude dev files from packaged extension |
-| `src/extension.ts` | Create | `activate()`, command handler, removal logic |
----
-### Task 1: Scaffold package.json
-**Files:**
-- Create: `package.json`
-- [ ] **Step 1: Create package.json**
-```json
-{
-  "name": "remove-debugger",
-  "displayName": "Remove Debugger",
-  "description": "Remove debugger statements and console calls from JS/TS files",
-  "version": "0.0.1",
-  "engines": { "vscode": "^1.75.0" },
-  "categories": ["Other"],
-  "activationEvents": [
-    "onLanguage:javascript",
-    "onLanguage:typescript",
-    "onLanguage:javascriptreact",
-    "onLanguage:typescriptreact"
-  ],
-  "main": "./out/extension.js",
-  "contributes": {
-    "commands": [
-      {
-        "command": "removeDebugger.clean",
-        "title": "Remove Debugger & Console",
-        "icon": "$(trash)"
-      }
-    ],
-    "menus": {
-      "editor/title": [
-        {
-          "command": "removeDebugger.clean",
-          "when": "editorLangId == javascript || editorLangId == typescript || editorLangId == javascriptreact || editorLangId == typescriptreact",
-          "group": "navigation"
-        }
-      ]
-    },
-    "configuration": {
-      "title": "Remove Debugger",
-      "properties": {
-        "removeDebugger.removeDebugger": {
-          "type": "boolean",
-          "default": true,
-          "description": "Remove debugger; statements."
-        },
-        "removeDebugger.removeConsole": {
-          "type": "boolean",
-          "default": true,
-          "description": "Remove console.* calls."
-        },
-        "removeDebugger.consoleMethodsToRemove": {
-          "type": "array",
-          "default": ["log", "warn", "error", "info", "debug", "trace"],
-          "description": "Which console methods to remove when removeConsole is enabled."
-        }
-      }
-    }
-  },
-  "scripts": {
-    "vscode:prepublish": "npm run compile",
-    "compile": "tsc -p ./",
-    "watch": "tsc -watch -p ./"
-  },
-  "devDependencies": {
-    "@types/vscode": "^1.75.0",
-    "@types/node": "^18.0.0",
-    "typescript": "^5.0.0"
-  }
-}
-```
-- [ ] **Step 2: Commit**
-```bash
-git add package.json
-git commit -m "feat: add extension manifest with command, menu, and settings"
-```
----
-### Task 2: Scaffold TypeScript config and ignore file
-**Files:**
-- Create: `tsconfig.json`
-- Create: `.vscodeignore`
-- [ ] **Step 1: Create tsconfig.json**
-```json
-{
-  "compilerOptions": {
-    "module": "commonjs",
-    "target": "ES2020",
-    "outDir": "out",
-    "lib": ["ES2020"],
-    "sourceMap": true,
-    "rootDir": "src",
-    "strict": true
-  },
-  "exclude": ["node_modules", ".vscode-test"]
-}
-```
-- [ ] **Step 2: Create .vscodeignore**
-```
-.vscode/**
-src/**
-.gitignore
-tsconfig.json
-**/*.map
-**/*.ts
-!out/**
-node_modules/**
-docs/**
-```
-- [ ] **Step 3: Commit**
-```bash
-git add tsconfig.json .vscodeignore
-git commit -m "feat: add tsconfig and vscodeignore"
-```
----
-### Task 3: Install dev dependencies
-**Files:**
-- Modify: (node_modules, package-lock.json — generated)
-- [ ] **Step 1: Install**
-```bash
-npm install
-```
-Expected: `node_modules/` created, `package-lock.json` generated. No errors.
-- [ ] **Step 2: Add .gitignore**
-```
-node_modules/
-out/
-```
-- [ ] **Step 3: Commit**
-```bash
-git add .gitignore package-lock.json
-git commit -m "chore: add gitignore and lock file"
-```
----
-### Task 4: Implement extension.ts
-**Files:**
-- Create: `src/extension.ts`
-- [ ] **Step 1: Create src/extension.ts**
-```typescript
-import * as vscode from 'vscode';
-export function activate(context: vscode.ExtensionContext): void {
-  const disposable = vscode.commands.registerCommand('removeDebugger.clean', () => {
-    const editor = vscode.window.activeTextEditor;
-    if (!editor) {
-      return;
-    }
-    const config = vscode.workspace.getConfiguration('removeDebugger');
-    const shouldRemoveDebugger = config.get<boolean>('removeDebugger', true);
-    const shouldRemoveConsole = config.get<boolean>('removeConsole', true);
-    const consoleMethods = config.get<string[]>('consoleMethodsToRemove', [
-      'log', 'warn', 'error', 'info', 'debug', 'trace',
-    ]);
-    const text = editor.document.getText();
-    const cleaned = cleanText(text, shouldRemoveDebugger, shouldRemoveConsole, consoleMethods);
-    if (cleaned === text) {
-      vscode.window.showInformationMessage('No debugger statements or console calls found.');
-      return;
-    }
-    const edit = new vscode.WorkspaceEdit();
-    const fullRange = new vscode.Range(
-      editor.document.positionAt(0),
-      editor.document.positionAt(text.length)
-    );
-    edit.replace(editor.document.uri, fullRange, cleaned);
-    vscode.workspace.applyEdit(edit);
-  });
-  context.subscriptions.push(disposable);
-}
-export function cleanText(
-  text: string,
-  removeDebugger: boolean,
-  removeConsole: boolean,
-  consoleMethods: string[]
-): string {
-  const lines = text.split('\n');
-  const filtered = lines.filter(line => {
-    if (removeDebugger && /^\s*debugger\s*;?\s*$/.test(line)) {
-      return false;
-    }
-    if (removeConsole && consoleMethods.length > 0) {
-      const methodPattern = consoleMethods.map(m => escapeRegex(m)).join('|');
-      const consoleRegex = new RegExp(
-        `^\\s*console\\.(${methodPattern})\\s*\\(.*\\)\\s*;?\\s*$`
-      );
-      if (consoleRegex.test(line)) {
-        return false;
-      }
-    }
-    return true;
-  });
-  return filtered.join('\n');
-}
-function escapeRegex(s: string): string {
-  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-export function deactivate(): void {}
-```
-- [ ] **Step 2: Compile**
-```bash
-npm run compile
-```
-Expected: `out/extension.js` and `out/extension.js.map` created. No TypeScript errors.
-- [ ] **Step 3: Commit**
-```bash
-git add src/extension.ts
-git commit -m "feat: implement removal logic and command handler"
-```
----
-### Task 5: Manual verification
-- [ ] **Step 1: Open VS Code in the project folder**
-```bash
-code .
-```
-- [ ] **Step 2: Press F5** to launch the Extension Development Host (a new VS Code window with the extension loaded).
-- [ ] **Step 3: Create a test file** in the dev host window. Save it as `test.js` with:
-```javascript
-function example() {
-  console.log('hello');
-  debugger;
-  console.warn('oops');
-  const x = 1 + 1;
-  console.error('bad');
-  return x;
-}
-```
-- [ ] **Step 4: Verify the trash-can button** appears in the editor title bar (top-right) while `test.js` is active.
-- [ ] **Step 5: Click the button.** Expected result:
-```javascript
-function example() {
-  const x = 1 + 1;
-  return x;
-}
-```
-- [ ] **Step 6: Press Ctrl+Z.** Expected: original file content restored.
-- [ ] **Step 7: Open a `.json` file.** Verify the trash-can button does NOT appear.
-- [ ] **Step 8: Test settings.** Open VS Code settings (Ctrl+,), search "Remove Debugger". Set `removeConsole` to `false`. Open `test.js` again, click the button. Expected: only `debugger;` removed, `console.*` lines kept.
-- [ ] **Step 9: Commit**
-```bash
-git add -A
-git commit -m "chore: verified extension works end-to-end"
-```

package/docs/superpowers/specs/2026-06-03-remove-debugger-extension-design.md DELETED Viewed

@@ -1,83 +0,0 @@
-# Remove Debugger VS Code Extension — Design Spec
-**Date:** 2026-06-03
-## Overview
-A lightweight VS Code extension that removes `debugger;` statements and `console.*()` calls from the active JavaScript or TypeScript file via a single click on an editor title bar button.
-## Target Languages
-JavaScript, TypeScript, JSX, TSX (language IDs: `javascript`, `typescript`, `javascriptreact`, `typescriptreact`).
-## Activation
-The extension activates when a JS/TS file becomes the active editor. A button appears in the editor title bar (top-right) only for supported language IDs, registered via the `editor/title` contribution point in `package.json`.
-## Removal Logic
-Approach: regex-based line replacement. When the button is clicked, the extension:
-1. Reads the full text of the active document.
-2. Applies enabled regex patterns in sequence to remove matching lines.
-3. Replaces the document content via a `WorkspaceEdit` — this preserves undo history.
-**Known limitation:** Multi-line `console.*()` calls (arguments spanning multiple lines) are not removed — only the opening line is matched. This is acceptable for a dev-convenience tool.
-### Patterns
-| What | Regex (per line) |
-|---|---|
-| `debugger;` | `/^\s*debugger\s*;?\s*$/` |
-| `console.<method>(...)` | `/^\s*console\.(log\|warn\|error\|...)\s*\(.*\)\s*;?\s*$/` |
-Lines that are entirely consumed by the match are deleted (including the trailing newline). Lines where a `console.*` call is embedded in a larger expression (e.g., `return console.log(x)`) are left untouched.
-## Settings
-```json
-"removeDebugger.removeDebugger": {
-  "type": "boolean",
-  "default": true,
-  "description": "Remove debugger; statements."
-},
-"removeDebugger.removeConsole": {
-  "type": "boolean",
-  "default": true,
-  "description": "Remove console.* calls."
-},
-"removeDebugger.consoleMethodsToRemove": {
-  "type": "array",
-  "default": ["log", "warn", "error", "info", "debug", "trace"],
-  "description": "Which console methods to remove when removeConsole is enabled."
-}
-```
-Users can keep `console.error` while removing `console.log` by editing `consoleMethodsToRemove`.
-## Project Structure
-```
-remove-debugger-vs-extension/
-├── src/
-│   └── extension.ts       # activate(), command handler, removal logic
-├── package.json           # manifest: commands, menus, settings, activationEvents
-├── tsconfig.json
-└── .vscodeignore
-```
-All logic lives in `extension.ts`. No external runtime dependencies — only the VS Code API and Node built-ins.
-## Error Handling
-- If no active editor is open, the command is a no-op (button is hidden by `when` clause).
-- If the document is not a supported language, the button does not render.
-- If no matches are found, the document is unchanged (no empty edit applied).
-## Testing
-Manual testing only for initial version:
-- Open a JS/TS file with `debugger;` and `console.log()` lines, click the button, verify removal.
-- Verify undo (`Ctrl+Z`) restores the original content.
-- Verify settings (`removeConsole: false`) correctly skips console removal.
-- Verify button does not appear on non-JS/TS files (e.g., `.json`, `.md`).

package/remove-debugger-0.0.1.vsix DELETED Viewed

Binary file

package/src/extension.ts DELETED Viewed

@@ -1,66 +0,0 @@
-import * as vscode from 'vscode';
-export function activate(context: vscode.ExtensionContext): void {
-  const disposable = vscode.commands.registerCommand('removeDebugger.clean', () => {
-    const editor = vscode.window.activeTextEditor;
-    if (!editor) {
-      return;
-    }
-    const config = vscode.workspace.getConfiguration('removeDebugger');
-    const shouldRemoveDebugger = config.get<boolean>('removeDebugger', true);
-    const shouldRemoveConsole = config.get<boolean>('removeConsole', true);
-    const consoleMethods = config.get<string[]>('consoleMethodsToRemove', [
-      'log', 'warn', 'error', 'info', 'debug', 'trace',
-    ]);
-    const text = editor.document.getText();
-    const cleaned = cleanText(text, shouldRemoveDebugger, shouldRemoveConsole, consoleMethods);
-    if (cleaned === text) {
-      vscode.window.showInformationMessage('No debugger statements or console calls found.');
-      return;
-    }
-    const edit = new vscode.WorkspaceEdit();
-    const fullRange = new vscode.Range(
-      editor.document.positionAt(0),
-      editor.document.positionAt(text.length)
-    );
-    edit.replace(editor.document.uri, fullRange, cleaned);
-    vscode.workspace.applyEdit(edit);
-  });
-  context.subscriptions.push(disposable);
-}
-export function cleanText(
-  text: string,
-  removeDebugger: boolean,
-  removeConsole: boolean,
-  consoleMethods: string[]
-): string {
-  const lines = text.split('\n');
-  const filtered = lines.filter(line => {
-    if (removeDebugger && /^\s*debugger\s*;?\s*$/.test(line)) {
-      return false;
-    }
-    if (removeConsole && consoleMethods.length > 0) {
-      const methodPattern = consoleMethods.map(m => escapeRegex(m)).join('|');
-      const consoleRegex = new RegExp(
-        `^\\s*console\\.(${methodPattern})\\s*\\(.*\\)\\s*;?\\s*$`
-      );
-      if (consoleRegex.test(line)) {
-        return false;
-      }
-    }
-    return true;
-  });
-  return filtered.join('\n');
-}
-function escapeRegex(s: string): string {
-  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-export function deactivate(): void {}

package/tsconfig.json DELETED Viewed

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "commonjs",
-    "target": "ES2020",
-    "outDir": "out",
-    "lib": ["ES2020"],
-    "sourceMap": true,
-    "rootDir": "src",
-    "strict": true
-  },
-  "exclude": ["node_modules", ".vscode-test"]
-}