|
| 1 | +# 🎯 VS Code Extension DevOps Cheat Sheet (EWC3 Labs Style) |
| 2 | + |
| 3 | +> This cheat sheet is for **any developer** working on an EWC3 Labs project using VS Code. It’s your one-stop reference for building, testing, committing, packaging, and shipping extensions like a badass. |
| 4 | +
|
| 5 | +## 🧰 Dev Environ## 🧠 Bonus Tips |
| 6 | + |
| 7 | +<details> |
| 8 | +<summary><strong>💡 Pro Developer Workflow Tips</strong> (click to expand)</summary> |
| 9 | + |
| 10 | +**Development Environment:** |
| 11 | +- DevContainers optional, but fully supported if Docker + Remote Containers is installed |
| 12 | +- Default terminal is Git Bash for sanity + POSIX-like parity |
| 13 | +- GitHub CLI (`gh`) installed and authenticated for real-time CI/CD monitoring |
| 14 | + |
| 15 | +**Release Workflow:** |
| 16 | +- Push to `release/v0.5.0` branch triggers automatic pre-release builds |
| 17 | +- Push to `main` creates stable releases (when marketplace is configured) |
| 18 | +- Manual tags `v*` trigger official marketplace releases |
| 19 | +- Every release includes auto-generated changelog from git commit messages |
| 20 | + |
| 21 | +**CI/CD Monitoring:** |
| 22 | +- Use `gh run list` to see pipeline status without opening browser |
| 23 | +- Use `gh run watch <id>` to monitor builds in real-time |
| 24 | +- CI builds test across 6 environments (3 OS × 2 Node versions) |
| 25 | +- Release builds are optimized for speed (fast lint/type checks only) |
| 26 | + |
| 27 | +**Debugging Releases:** |
| 28 | +- Check `gh release list` to see all automated releases |
| 29 | +- Download `.vsix` files directly from GitHub releases |
| 30 | +- View detailed logs with `gh run view <id> --log` |
| 31 | + |
| 32 | +</details> |
| 33 | + |
| 34 | +--- |
| 35 | + |
| 36 | +This is my first extension, first public repo, first devcontainer (and first time even using Docker), first automated test suite, and first time using Git Bash — so I'm drinking from the firehose here and often learning as I go. That said, I *do* know how this stuff should work, and EWC3 Labs is about building it right. |
| 37 | + |
| 38 | +PRs improving this cheat sheet are always welcome. |
| 39 | + |
| 40 | +🔥 **Wilson's Note:** This is now a full enterprise-grade DX platform for VS Code extension development. We went from manual builds to automated releases with smart versioning, multi-channel distribution, and real-time monitoring. It's modular, CI-tested, scriptable, and optimized for contributors. If you're reading this — welcome to the automation party. **From a simple commit/push to professional releases. Shit works when you work it.** match the full EWC3 Labs development environment: |
| 41 | + |
| 42 | +- ✅ Install [Docker](https://www.docker.com/) (for devcontainers) |
| 43 | +- ✅ Install the VS Code extension: `ms-vscode-remote.remote-containers` |
| 44 | +- ✅ Clone the repo and open it in VS Code — it will prompt to reopen in the container. |
| 45 | + |
| 46 | +Optional: use Git Bash as your default terminal for POSIX parity with Linux/macOS. This repo is fully devcontainer-compatible out of the box. |
| 47 | + |
| 48 | +> You can run everything without the container too, but it's the easiest way to mirror the CI pipeline. |
| 49 | +
|
| 50 | +## 🚀 Build + Package + Install |
| 51 | + |
| 52 | +| Action | Shortcut / Command | |
| 53 | +| ------------------------------ | ------------------------------------------------------ | |
| 54 | +| Compile extension | `Ctrl+Shift+B` | |
| 55 | +| Package + Install VSIX (local) | `Ctrl+Shift+P`, then `Tasks: Run Task → Install Local` | |
| 56 | +| Package VSIX only | `Ctrl+Shift+P`, then `Tasks: Run Task → Package VSIX` | |
| 57 | +| Watch build (dev background) | `Ctrl+Shift+W` | |
| 58 | +| Start debug (extension host) | `F5` | |
| 59 | +| Stop debug | `Shift+F5` | |
| 60 | + |
| 61 | +## 🧪 Testing |
| 62 | + |
| 63 | +| Action | Shortcut / Command | |
| 64 | +| ------------- | ------------------------------------------------------- | |
| 65 | +| Run Tests | `Ctrl+Shift+T` or `Tasks: Run Task → Run Tests` | |
| 66 | +| Compile Tests | `npm run compile-tests` | |
| 67 | +| Watch Tests | `npm run watch-tests` | |
| 68 | +| Test Entry | `test/runTest.ts` calls into compiled test suite | |
| 69 | +| Test Utils | `test/testUtils.ts` contains shared scaffolding/helpers | |
| 70 | + |
| 71 | +> 🧠 Tests run with `vscode-test`, launching VS Code in a headless test harness. You’ll see VS Code flash briefly on execution. |
| 72 | +
|
| 73 | +## 🧹 GitOps |
| 74 | + |
| 75 | +| Action | Shortcut / Command | |
| 76 | +| ----------------- | ------------------------------ | |
| 77 | +| Stage all changes | `Ctrl+Shift+G`, `Ctrl+Shift+A` | |
| 78 | +| Commit | `Ctrl+Shift+G`, `Ctrl+Shift+C` | |
| 79 | +| Push | `Ctrl+Shift+G`, `Ctrl+Shift+P` | |
| 80 | +| Git Bash terminal | \`Ctrl+Shift+\`\` | |
| 81 | + |
| 82 | +## 🐙 GitHub CLI Integration |
| 83 | + |
| 84 | +<details> |
| 85 | +<summary><strong>⚡ Real-time CI/CD Monitoring</strong> (click to expand)</summary> |
| 86 | + |
| 87 | +**Pipeline Monitoring:** |
| 88 | +```bash |
| 89 | +# List recent workflow runs |
| 90 | +gh run list --limit 5 |
| 91 | + |
| 92 | +# Watch a specific run in real-time |
| 93 | +gh run watch <run-id> |
| 94 | + |
| 95 | +# View run logs |
| 96 | +gh run view <run-id> --log |
| 97 | + |
| 98 | +# Check run status |
| 99 | +gh run view <run-id> |
| 100 | +``` |
| 101 | + |
| 102 | +**Release Management:** |
| 103 | +```bash |
| 104 | +# List all releases |
| 105 | +gh release list |
| 106 | + |
| 107 | +# View specific release |
| 108 | +gh release view v0.5.0-rc.3 |
| 109 | + |
| 110 | +# Download release assets |
| 111 | +gh release download v0.5.0-rc.3 |
| 112 | + |
| 113 | +# Create manual release (emergency) |
| 114 | +gh release create v0.5.1 --title "Emergency Fix" --notes "Critical bug fix" |
| 115 | +``` |
| 116 | + |
| 117 | +**Repository Operations:** |
| 118 | +```bash |
| 119 | +# View repo info |
| 120 | +gh repo view |
| 121 | + |
| 122 | +# Open repo in browser |
| 123 | +gh repo view --web |
| 124 | + |
| 125 | +# Check issues and PRs |
| 126 | +gh issue list |
| 127 | +gh pr list |
| 128 | +``` |
| 129 | + |
| 130 | +> 🔥 **Pro Tip:** Set up `gh auth login` once and monitor your CI/CD pipelines like a boss. No more refreshing GitHub tabs! |
| 131 | +
|
| 132 | +</details> |
| 133 | + |
| 134 | +## 🌱 Branching Conventions |
| 135 | + |
| 136 | +| Purpose | Branch Prefix | Example | |
| 137 | +| ---------------- | ------------- | --------------------- | |
| 138 | +| Releases | `release/` | `release/v0.5.0` | |
| 139 | +| Work-in-progress | `wip/` | `wip/feature-xyz` | |
| 140 | +| Hotfixes | `hotfix/` | `hotfix/package-lock` | |
| 141 | + |
| 142 | +> 📛 These branch names are picked up by our GitHub Actions CI/CD pipelines. |
| 143 | +
|
| 144 | +## 🧾 npm Scripts |
| 145 | + |
| 146 | +| Script | Description | |
| 147 | +| --------------------- | --------------------------------------------- | |
| 148 | +| `npm run lint` | Run ESLint on `src/` | |
| 149 | +| `npm run compile` | Type check, lint, and build with `esbuild.js` | |
| 150 | +| `npm run package` | Full production build | |
| 151 | +| `npm run dev-install` | Build, package, force install VSIX | |
| 152 | +| `npm run test` | Run test suite via `vscode-test` | |
| 153 | +| `npm run watch` | Watch build and test | |
| 154 | +| `npm run check-types` | TypeScript compile check (no emit) | |
| 155 | +| `npm run bump-version` | Smart semantic version bumping from git commits | |
| 156 | + |
| 157 | +<details> |
| 158 | +<summary><strong>🔢 Smart Version Management</strong> (click to expand)</summary> |
| 159 | + |
| 160 | +**Automatic Version Bumping:** |
| 161 | +```bash |
| 162 | +# Analyze commits and bump version automatically |
| 163 | +npm run bump-version |
| 164 | + |
| 165 | +# The script analyzes your git history for: |
| 166 | +# - feat: → minor version bump (0.5.0 → 0.6.0) |
| 167 | +# - fix: → patch version bump (0.5.0 → 0.5.1) |
| 168 | +# - BREAKING: → major version bump (0.5.0 → 1.0.0) |
| 169 | +``` |
| 170 | + |
| 171 | +**Manual Version Control:** |
| 172 | +```bash |
| 173 | +# Bump specific version types |
| 174 | +npm version patch # 0.5.0 → 0.5.1 |
| 175 | +npm version minor # 0.5.0 → 0.6.0 |
| 176 | +npm version major # 0.5.0 → 1.0.0 |
| 177 | + |
| 178 | +# Pre-release versions |
| 179 | +npm version prerelease # 0.5.0 → 0.5.1-0 |
| 180 | +npm version prepatch # 0.5.0 → 0.5.1-0 |
| 181 | +npm version preminor # 0.5.0 → 0.6.0-0 |
| 182 | +``` |
| 183 | + |
| 184 | +> 🧠 **Smart Tip:** The release pipeline automatically handles version bumping, but you can use `npm run bump-version` locally to preview what version would be generated. |
| 185 | +
|
| 186 | +</details> |
| 187 | + |
| 188 | +## 🔁 README Management |
| 189 | + |
| 190 | +| Task | Script | |
| 191 | +| ----------------------------- | ------------------------------------------------------------------- | |
| 192 | +| Set README for GitHub | `node scripts/set-readme-gh.js` | |
| 193 | +| Set README for VS Marketplace | `node scripts/set-readme-vsce.js` | |
| 194 | +| Automated pre/post-publish | Hooked via `prepublishOnly` and `postpublish` npm lifecycle scripts | |
| 195 | + |
| 196 | +> `vsce package` **must** see a clean Marketplace README. Run `set-readme-vsce.js` right before packaging. |
| 197 | +
|
| 198 | +## 📦 CI/CD (GitHub Actions) |
| 199 | + |
| 200 | +<details> |
| 201 | +<summary><strong>🔄 Continuous Integration Pipeline</strong> (click to expand)</summary> |
| 202 | + |
| 203 | +> Configured in `.github/workflows/ci.yml` |
| 204 | +
|
| 205 | +**Triggers:** |
| 206 | +- On push or pull to: `main`, `release/**`, `wip/**`, `hotfix/**` |
| 207 | + |
| 208 | +**Matrix Builds:** |
| 209 | +- OS: `ubuntu-latest`, `windows-latest`, `macos-latest` |
| 210 | +- Node.js: `22`, `24` |
| 211 | + |
| 212 | +**Steps:** |
| 213 | +- Checkout → Install → Lint → TypeCheck → Test → Build → Package → Upload VSIX |
| 214 | + |
| 215 | +> 💥 Failing lint/typecheck = blocked CI. No bullshit allowed. |
| 216 | +
|
| 217 | +</details> |
| 218 | + |
| 219 | +## 🚀 Release Automation Pipeline |
| 220 | + |
| 221 | +<details> |
| 222 | +<summary><strong>🎯 Enterprise-Grade Release Automation</strong> (click to expand)</summary> |
| 223 | + |
| 224 | +> Configured in `.github/workflows/release.yml` |
| 225 | +
|
| 226 | +### **What Happens on Every Push:** |
| 227 | +1. **🔍 Auto-detects release type** (dev/prerelease/stable) |
| 228 | +2. **🔢 Smart version bumping** in `package.json` using semantic versioning |
| 229 | +3. **⚡ Fast optimized build** (lint + type check, skips heavy integration tests) |
| 230 | +4. **📦 Professional VSIX generation** with proper naming conventions |
| 231 | +5. **🎉 Auto-creates GitHub release** with changelog, assets, and metadata |
| 232 | + |
| 233 | +### **Release Channels:** |
| 234 | +| Branch/Trigger | Release Type | Version Format | Auto-Publish | |
| 235 | +|----------------|--------------|----------------|--------------| |
| 236 | +| `release/**` | Pre-release | `v0.5.0-rc.X` | GitHub only | |
| 237 | +| `main` | Stable | `v0.5.0` | GitHub + Marketplace* | |
| 238 | +| Manual tag `v*`| Official | `v0.5.0` | GitHub + Marketplace* | |
| 239 | +| Workflow dispatch | Emergency | Custom | Configurable | |
| 240 | + |
| 241 | +*Marketplace publishing requires `VSCE_PAT` secret |
| 242 | + |
| 243 | +### **Monitoring Your Releases:** |
| 244 | +```bash |
| 245 | +# List recent pipeline runs |
| 246 | +gh run list --limit 5 |
| 247 | + |
| 248 | +# Watch a release in real-time |
| 249 | +gh run watch <run-id> |
| 250 | + |
| 251 | +# Check your releases |
| 252 | +gh release list --limit 3 |
| 253 | + |
| 254 | +# View release details |
| 255 | +gh release view v0.5.0-rc.3 |
| 256 | +``` |
| 257 | + |
| 258 | +### **Smart Version Bumping:** |
| 259 | +Our `scripts/bump-version.js` analyzes git commits using conventional commit patterns: |
| 260 | +- `feat:` → Minor version bump |
| 261 | +- `fix:` → Patch version bump |
| 262 | +- `BREAKING:` → Major version bump |
| 263 | +- Pre-release builds auto-increment: `rc.1`, `rc.2`, `rc.3`... |
| 264 | + |
| 265 | +### **Installation from Releases:** |
| 266 | +```bash |
| 267 | +# Download .vsix from GitHub releases and install |
| 268 | +code --install-extension excel-power-query-editor-*.vsix |
| 269 | + |
| 270 | +# Or use the GUI: Extensions → ⋯ → Install from VSIX |
| 271 | +``` |
| 272 | + |
| 273 | +> 🔥 **Wilson's Note:** This is the same automation infrastructure used by enterprise software companies. From a simple commit/push to professional releases with changelogs, versioning, and distribution. No manual bullshit required. |
| 274 | +
|
| 275 | +</details> |
| 276 | + |
| 277 | +## 📁 Folder Structure Highlights |
| 278 | + |
| 279 | +<details> |
| 280 | +<summary><strong>🗂️ Project Structure Overview</strong> (click to expand)</summary> |
| 281 | + |
| 282 | +``` |
| 283 | +. |
| 284 | +├── docs/ # All markdown docs (README variants, changelogs, etc.) |
| 285 | +├── scripts/ # Automation scripts |
| 286 | +│ ├── set-readme-gh.js # GitHub README switcher |
| 287 | +│ ├── set-readme-vsce.js # VS Marketplace README switcher |
| 288 | +│ └── bump-version.js # Smart semantic version bumping |
| 289 | +├── src/ # Extension source code (extension.ts, configHelper.ts, etc.) |
| 290 | +├── test/ # Mocha-style unit tests + testUtils scaffolding |
| 291 | +├── out/ # Compiled test output |
| 292 | +├── .devcontainer/ # Dockerfile + config for remote containerized development |
| 293 | +├── .github/workflows/ # CI/CD automation |
| 294 | +│ ├── ci.yml # Continuous integration pipeline |
| 295 | +│ └── release.yml # Enterprise release automation |
| 296 | +├── .vscode/ # Launch tasks, keybindings, extensions.json |
| 297 | +└── temp-testing/ # Test files and debugging artifacts |
| 298 | +``` |
| 299 | + |
| 300 | +**Key Automation Files:** |
| 301 | +- **`.github/workflows/release.yml`** - Full release pipeline with smart versioning |
| 302 | +- **`scripts/bump-version.js`** - Semantic version analysis from git commits |
| 303 | +- **`.github/workflows/ci.yml`** - Multi-platform CI testing matrix |
| 304 | +- **`.vscode/tasks.json`** - VS Code build/test/package tasks |
| 305 | + |
| 306 | +</details> |
| 307 | + |
| 308 | +## 🔧 Misc Configs |
| 309 | + |
| 310 | +| File | Purpose | |
| 311 | +| ------------------------- | ----------------------------------------------------------- | |
| 312 | +| `.eslintrc.js` | Lint rules (uses ESLint with project-specific overrides) | |
| 313 | +| `tsconfig.json` | TypeScript project config | |
| 314 | +| `.gitignore` | Ignores `_PowerQuery.m`, `*.backup.*`, `debug_sync/`, etc. | |
| 315 | +| `package.json` | npm scripts, VS Code metadata, lifecycle hooks | |
| 316 | +| `.vscode/extensions.json` | Recommended extensions (auto-suggests them when repo opens) | |
| 317 | + |
| 318 | +## 🧠 Bonus Tips |
| 319 | + |
| 320 | +- DevContainers optional, but fully supported if Docker + Remote Containers is installed. |
| 321 | +- Default terminal is Git Bash for sanity + POSIX-like parity. |
| 322 | +- CI/CD will auto-build your branch on push to `release/**` and others. |
| 323 | +- The Marketplace README build status badge is tied to GitHub Actions CI. |
| 324 | + |
| 325 | +--- |
| 326 | + |
| 327 | +This is my first extension, first public repo, first devcontainer (and first time even using Docker), first automated test suite, and first time using Git Bash — so I'm drinking from the firehose here and often learning as I go. That said, I *do* know how this stuff should work, and EWC3 Labs is about building it right. |
| 328 | + |
| 329 | +PRs improving this cheat sheet are always welcome. |
| 330 | + |
| 331 | +🔥 **Wilson’s Note:** This is now a full DX platform for VS Code extension development. It's modular, CI-tested, scriptable, and optimized for contributors. If you're reading this — welcome to the code party. Shit works when you work it. |
| 332 | + |
0 commit comments