Jan 31, 2025

Mon Workflow de Développement: VSCode + Copilot Agent + Obsidian

#vscode #copilot #obsidian #productivity #workflow #ai #documentation

💡 Philosophie

Mon workflow de développement repose sur 3 piliers:

VSCode + Copilot Agent: Coding assisté par IA pour productivité maximale
Obsidian: Documentation vivante et knowledge base personnelle
Intégration Continue: Documentation générée pendant le dev, pas après

Résultat: Code propre + documentation complète + apprentissage continu

🛠️ Stack Outils

1. Visual Studio Code

Extensions Essentielles:

GitHub Copilot (IA code completion)
GitHub Copilot Chat (IA conversational)
Prettier (formatage auto)
ESLint (linting JavaScript/TypeScript)
GitLens (Git superpowered)
Docker (containers management)
Remote - SSH (dev sur serveurs)
Markdown All in One
Thunder Client (API testing)
Error Lens (inline errors)
Todo Tree (TODO tracking)

Settings Clés (settings.json):

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.inlineSuggest.enabled": true,
  "github.copilot.enable": {
    "*": true,
    "yaml": true,
    "markdown": true
  },
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "workbench.colorTheme": "Monokai Pro",
  "terminal.integrated.defaultProfile.linux": "bash"
}

Keybindings Customs:

[
  {
    "key": "ctrl+shift+c",
    "command": "github.copilot.chat.open"
  },
  {
    "key": "ctrl+alt+d",
    "command": "workbench.action.toggleDevTools"
  },
  {
    "key": "ctrl+shift+t",
    "command": "workbench.action.terminal.new"
  }
]

2. GitHub Copilot Agent

Modes d’utilisation:

Inline Suggestions (default):

Tape code → Copilot suggère la suite
Tab pour accepter, Esc pour refuser
Fonctionne pour: fonctions, loops, configs, imports…

Chat Conversational (Ctrl+Shift+C):

Poser questions techniques
Debugger erreurs
Refactorer code
Générer tests unitaires
Expliquer code existant

Agent Commands (dans chat):

/explain    - Expliquer code sélectionné
/fix        - Corriger erreurs/bugs
/tests      - Générer tests unitaires
/doc        - Générer documentation
/optimize   - Optimiser performance
/review     - Code review

Prompts Efficaces:

❌ Mauvais:  "fais moi une fonction"
✅ Bon:      "Create TypeScript function to validate email with regex, return boolean"

❌ Mauvais:  "corrige"
✅ Bon:      "Fix TypeScript error on line 42: Property 'name' does not exist on type 'User'"

❌ Mauvais:  "comment ça marche?"
✅ Bon:      "Explain this React useEffect hook: what triggers re-renders and what are dependencies?"

Workflow Type:

Écrire fonction signature → Copilot génère body
Commenter intention → Copilot code l’implémentation
Tester manuellement → /tests pour générer unit tests
Bug découvert → Sélectionner code + /fix
Documenter → /doc génère JSDoc/docstrings

3. Obsidian

Structure Vault:

📁 Obsidian Vault/
├── 📂 Projects/
│   ├── Homeserver.md
│   ├── Cuisine Blog.md
│   ├── Home Assistant.md
│   └── Personal Blog.md
├── 📂 Documentation/
│   ├── Docker Compose.md
│   ├── Nginx Proxy.md
│   ├── Pi-hole Setup.md
│   └── TypeScript Patterns.md
├── 📂 Daily Notes/
│   └── 2025-01-31.md
├── 📂 Learning/
│   ├── Next.js App Router.md
│   ├── Prisma ORM.md
│   └── Zigbee2MQTT.md
├── 📂 Code Snippets/
│   ├── Docker Compose Templates.md
│   ├── React Hooks.md
│   └── Nginx Configs.md
└── 📂 Archive/

Plugins:

Dataview       - Requêtes SQL-like sur notes
Templater      - Templates dynamiques
Calendar       - Vue calendrier daily notes
Excalidraw     - Diagrammes intégrés
Git            - Auto-commit notes
Advanced Tables - Édition tables Markdown
Kanban         - Boards projet

Template Daily Note:

---
date: {{date}}
tags: daily-note
---

# {{date:dddd DD MMMM YYYY}}

## 🎯 Objectifs Aujourd'hui

- [ ] 
- [ ] 
- [ ] 

## 💻 Dev Log

### Projet: [[Homeserver]]

**Travaillé sur**:
- 

**Problèmes rencontrés**:
- 

**Solutions appliquées**:
- 

**Apprentissages**:
- 

## 📝 Notes

## 🔗 Liens

Dataview Queries:

Liste projets actifs:

TABLE status, last-update
FROM "Projects"
WHERE status = "in-progress"
SORT last-update DESC

Code snippets par tag:

LIST
FROM "Code Snippets"
WHERE contains(tags, "docker")

🔄 Workflow Intégré

Scénario: Nouvelle Feature

Étape 1: Planification (Obsidian)

Créer note Projects/Feature - User Auth.md:

# Feature: User Authentication

## Objectif
Implémenter système auth avec NextAuth.js

## Scope
- [ ] Register page
- [ ] Login page
- [ ] Session management
- [ ] Protected routes

## Stack
- NextAuth.js v4
- bcryptjs
- Prisma (user model)

## Resources
- [[Next.js App Router]]
- [[Prisma ORM]]
- [NextAuth Docs](https://next-auth.js.org)

Étape 2: Implementation (VSCode)

Ouvrir VSCode workspace
Créer branch Git: git checkout -b feat/user-auth
Copilot Chat: “How to setup NextAuth.js v4 in Next.js 14 App Router?”
Suivre instructions Copilot + générer code

Exemple (dans fichier lib/auth.ts):

// Copilot autocomplete après avoir tapé:
// "Create NextAuth configuration with Credentials provider"

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { prisma } from "./prisma";
import bcrypt from "bcryptjs";

export const authOptions = {
  // ... Copilot génère la suite

Étape 3: Testing

Tester manuellement fonctionnalité
Copilot Chat (/tests): Générer tests unitaires
Lancer tests: npm test

Étape 4: Documentation (Obsidian)

Mise à jour note projet:

## Implementation Log

### 2025-01-31 - Auth Setup

**Code produit**:
- `app/api/auth/[...nextauth]/route.ts` - NextAuth API route
- `lib/auth.ts` - Configuration authOptions
- `app/auth/login/page.tsx` - Login page
- `app/auth/register/page.tsx` - Register page

**Apprentissages**:
- NextAuth Credentials provider requires `authorize()` callback
- Session strategy: JWT vs Database (choisi JWT pour perf)
- bcryptjs: 10 rounds salt optimal security/performance

**Bugs résolus**:
- TypeScript error `Property 'user' does not exist on type 'Session'`
  Solution: Extend NextAuth types in `types/next-auth.d.ts`

**Next steps**:
- [ ] Protected routes middleware
- [ ] Role-based access control

Étape 5: Commit & Push

git add .
git commit -m "feat: implement user authentication with NextAuth.js"
git push origin feat/user-auth

Étape 6: Code Review (Copilot)

Avant merge, sélectionner tout code auth → Copilot Chat /review

Copilot suggère:

Security issues (password validation faible)
Performance optimizations
Best practices violations

Appliquer fixes → Commit → Merge

Scénario: Bug Fixing

Étape 1: Identifier (VSCode)

Erreur console:

TypeError: Cannot read property 'name' of undefined
at UserProfile.tsx:42

Étape 2: Debug (Copilot)

Copilot inline error explanation (Error Lens)
Sélectionner code ligne 42 + contexte
Copilot Chat /fix: “TypeError Cannot read property ‘name’ of undefined at line 42”

Copilot explique:

Le problème vient de `user.name` où `user` peut être undefined.

Solution: Ajouter optional chaining ou null check.

Suggère fix:

// Avant
<h1>{user.name}</h1>

// Après
<h1>{user?.name ?? 'Anonymous'}</h1>

Étape 3: Documenter (Obsidian)

Dans Daily Notes/2025-01-31.md:

## Bug Fix: User Profile Crash

**Problème**: TypeError sur `user.name` undefined

**Root Cause**: API peut retourner user=null si non authentifié

**Solution**: Optional chaining `user?.name`

**Learnings**: 
- Toujours assumer props peuvent être null/undefined
- TypeScript strict mode aurait catch ça → Activer!

Scénario: Apprentissage Nouveau Tech

Objectif: Apprendre Zigbee2MQTT pour Home Assistant

Étape 1: Research (Copilot + Web)

Copilot Chat: “Explain Zigbee2MQTT: how it works, architecture, use cases”
Lire docs officielles
Tutoriels YouTube

Étape 2: Note Taking (Obsidian)

Créer Learning/Zigbee2MQTT.md:

# Zigbee2MQTT

## Concept

Bridge entre devices Zigbee et MQTT broker.

**Architecture**:

Zigbee Device ↔️ USB Coordinator ↔️ Zigbee2MQTT ↔️ MQTT Broker ↔️ Home Assistant


## Installation

[[Docker Compose Templates#Zigbee2MQTT]]

## Configuration

`data/configuration.yaml`:
```yaml
homeassistant: true
permit_join: false
mqtt:
  server: mqtt://mosquitto:PORT
serial:
  port: /dev/ttyUSB0

Pairing Devices

Enable pairing: permit_join: true
Put device in pairing mode
Check logs: docker compose logs -f
Disable pairing: permit_join: false

Troubleshooting

Device interview failed

Causes:

Weak signal
Coordinator busy
Device already paired elsewhere

Solutions:

Move device closer
Re-pair after factory reset
Check friendly_name unique


**Étape 3: Practice (VSCode + Homeserver)**

1. Implémenter config Zigbee2MQTT
2. Pairer devices
3. Tester avec Home Assistant

**Étape 4: Update Notes**

Retour dans Obsidian, ajouter:

```markdown
## Experience Log

### 2025-01-31 - First Pairing

**Devices pairé**:
- IKEA TRADFRI bulb (successful)
- Smart plug (failed - weak signal)

**Issues**:
- Coordinator pas reconnu → Fix: Add device mapping Docker

**Learnings**:
- Zigbee mesh network: Devices router étendent portée
- Pairing mode differs per manufacturer (hold 5s vs 10s)

📊 Productivité Mesurée

Metrics

Avant Copilot:

Feature simple (auth page): ~4h
Bug fix: ~30 min
Tests unitaires: ~1h
Documentation: Rarement fait

Avec Copilot:

Feature simple: ~1.5h (-62%)
Bug fix: ~10 min (-66%)
Tests: ~20 min (auto-generated)
Documentation: Pendant dev (workflow intégré)

Gain total: ~60% temps économisé

Copilot Stats (built-in)

VSCode: Ctrl+Shift+P → “GitHub Copilot: Show Statistics”

Suggestions shown:     1,247
Suggestions accepted:    856 (68.6%)
Lines of code:         3,492
Top languages:
  - TypeScript:        1,234 lines
  - JavaScript:          890 lines
  - YAML:                456 lines

🎓 Best Practices

VSCode

Workspaces multi-root: Gérer plusieurs projets simultanément
Tasks automation: Build/run/test automatisés
Snippets customs: Code répétitif → Snippets
Git integration: Commit/push sans quitter editor

Copilot

Context is king: Plus code autour, meilleures suggestions
Comments drive code: Commenter intention → Copilot code
Review everything: Copilot fait erreurs, toujours vérifier
Learn patterns: Observer suggestions pour apprendre best practices

Obsidian

Link everything: [[Internal Links]] créent knowledge graph
Tags hierarchical: #project/homeserver, #learning/docker
Templates: Daily notes, project kickoff, bug report
Regular reviews: Weekly review notes pour consolidation

🔗 Intégrations

VSCode ↔ Obsidian

Extension: Obsidian Markdown

Aperçu Markdown identique Obsidian
Support [[wikilinks]]

Obsidian ↔ GitHub

Plugin: Obsidian Git

Auto-commit notes toutes les 10 min
Backup automatique GitHub repo privé

Copilot ↔ Documentation

Workflow:

Code feature dans VSCode (Copilot assist)
/doc pour générer docstrings
Copy/paste docstrings dans Obsidian notes
Enrichir avec contexte/learnings

🚀 Evolution Prévue

Court Terme

Copilot Workspace: Feature GitHub Copilot multi-files planning
Obsidian Publish: Publier notes select sur blog
Voice Coding: Whisper AI pour dicte code

Moyen Terme

Custom Copilot Model: Fine-tune sur mon code pour suggestions personalized
Automated Changelog: Git commits → Auto-generate CHANGELOG.md
Knowledge Graph Visualization: Obsidian graph → Interactive docs

📝 Ressources

Workflow Version: 2.0
Dernière révision: 31 janvier 2025
Productivité gain: ~60% vs baseline