Zarządzanie fragmentami kodu

Zarządzanie fragmentami kodu

Przekształć powtarzalne kodowanie w inteligentne, świadome kontekstu przepływy pracy fragmentów. Naucz się budować fragmenty, które dostosowują się do twojego projektu, wykorzystują AI do dynamicznego generowania i integrują się płynnie z możliwościami AI Cursora.

Dlaczego inteligentne fragmenty mają znaczenie

Tradycyjne fragmenty są statyczne. Fragmenty wspomagane przez Cursor to:

• Świadome kontekstu: Dostosowują się do twojego aktualnego pliku i projektu
• Wzbogacone o AI: Generują warianty oparte na wzorcach
• Samo-aktualizujące: Ewoluują z twoją bazą kodu
• Zespołowo-udostępnialne: Standaryzują między developerami

Wpływ: Oszczędzaj 30-60 minut dziennie na kodzie boilerplate zachowując spójność.

Kategorie fragmentów

Fragmenty strukturalne

Komponenty, klasy i moduły

Fragmenty wzorców

Wzorce projektowe i architektury

Fragmenty integracyjne

Wywołania API, zapytania bazy danych, konfiguracje

Fragmenty testowe

Zestawy testów, mocki i asercje

Budowanie fragmentów wspomaganych przez AI

Poziom 1: Podstawowe fragmenty AI

.vscode/snippets/cursor-react.code-snippets

{
  "Cursor React Component": {
    "prefix": "crc",
    "body": [
      "// Użyj Cursora do ukończenia tego komponentu",
      "// Kontekst: Przestrzeń wzorców w @file ${1:Button.tsx}",
      "export const ${2:ComponentName} = () => {",
      "  // Cursor: implementuj ${3:cel komponentu}",
      "  return <div>${0}</div>",
      "}"
    ],
    "description": "Komponent React wspomagany przez AI"
  }
}

Poziom 2: Fragmenty wzorców dynamicznych

Twórz fragmenty, które instruują AI aby przestrzegało twoich wzorców:

React/Next.js

// Fragment: "cnc" - Cursor Next Component
/**
 * @cursor Wygeneruj komponent Next.js przestrzegając tych reguł:
 * 1. Użyj wzorca z components/ui/Button.tsx
 * 2. Dołącz interfejs props TypeScript
 * 3. Dodaj klasy Tailwind z naszego systemu projektowego
 * 4. Dołącz stany ładowania i błędów
 * 5. Nazwa komponentu: ${1:ComponentName}
 * 6. Cel: ${2:cel}
 */

// Po wpisaniu tego Ctrl+K aby pozwolić AI ukończyć

Node.js/Express

// Fragment: "capi" - Cursor API Endpoint
/**
 * @cursor Utwórz endpoint Express:
 * - Metoda: ${1|GET,POST,PUT,DELETE|}
 * - Ścieżka: ${2:/api/resource}
 * - Przestrzeń wzorca w routes/users.js
 * - Dołącz: walidację, obsługę błędów, logowanie
 * - Format odpowiedzi: { success, data, error }
 */

// Cursor wygeneruje kompletny endpoint

Python

# Fragment: "cclass" - Cursor Python Class
"""
@cursor Wygeneruj klasę Python:
- Nazwa: ${1:ClassName}
- Dziedziczy: ${2:BaseClass}
- Przestrzeń wzorców w models/base.py
- Dołącz: __init__, __repr__, walidację
- Podpowiedzi typów wymagane
- Docstringi w formacie Google
"""

# AI uzupełnia twoimi standardami

Poziom 3: Fragmenty świadome projektu

Przechowuj fragmenty specyficzne dla projektu, które rozumieją twoją architekturę:

.cursor/snippets/feature-snippet.md

## Fragment nowej funkcji

Przy tworzeniu nowej funkcji wygeneruj:

1. **Model** (wzorzec @file models/User.ts)
   - Interfejs TypeScript
   - Schemat walidacji
   - Model bazy danych

2. **Usługa** (wzorzec @file services/UserService.ts)
   - Operacje CRUD
   - Logika biznesowa
   - Obsługa błędów

3. **Kontroler** (wzorzec @file controllers/UserController.ts)
   - Handlery tras
   - Walidacja żądań
   - Formatowanie odpowiedzi

4. **Testy** (wzorzec @file tests/user.test.ts)
   - Testy jednostkowe dla usługi
   - Testy integracyjne dla API
   - Fabryki danych mock

Nazwa funkcji: [FEATURE_NAME]

System organizacji fragmentów

Struktura katalogów

.cursor/
├── snippets/
│   ├── components/      # Fragmenty komponentów UI
│   │   ├── react/
│   │   ├── vue/
│   │   └── angular/
│   ├── backend/         # Fragmenty serwerowe
│   │   ├── api/
│   │   ├── database/
│   │   └── services/
│   ├── testing/         # Fragmenty testowe
│   │   ├── unit/
│   │   ├── integration/
│   │   └── e2e/
│   ├── patterns/        # Fragmenty wzorców projektowych
│   │   ├── singleton/
│   │   ├── factory/
│   │   └── observer/
│   └── project/         # Fragmenty specyficzne dla projektu
│       ├── auth/
│       ├── payments/
│       └── analytics/

Inteligentne przepływy pracy fragmentów

Przepływ 1: Łańcuch generowania komponentów

1. Wywołaj fragment podstawowy

   Wpisz: ccomp [Tab]
   Tworzy: Szkielet komponentu z znacznikami AI

2. Wzbogacenie AI

   Ctrl+K na szkielecie
   Prompt: "Uzupełnij przestrzegając naszego wzorca komponentu Card"

3. Auto-generuj testy

   Ctrl+I
   Prompt: "Wygeneruj testy dla tego komponentu"

4. Utwórz historię

   Użyj fragmentu: cstory
   AI wypełnia na podstawie props komponentu

Przepływ 2: Zestaw API CRUD

// Główny fragment generujący pełny CRUD
// Fragment: "crud-suite"

/**
 * @cursor Wygeneruj kompletny CRUD dla ${1:Resource}:
 *
 * 1. Model:
 *    - Plik: models/${1:Resource}.js
 *    - Dołącz: schemat, walidację, indeksy
 *
 * 2. Trasy:
 *    - GET /api/${2:resources} (lista z paginacją)
 *    - GET /api/${2:resources}/:id
 *    - POST /api/${2:resources}
 *    - PUT /api/${2:resources}/:id
 *    - DELETE /api/${2:resources}/:id
 *
 * 3. Middleware:
 *    - Uwierzytelnianie (użyj wzorca auth.js)
 *    - Walidacja (użyj validators/${1:Resource}.js)
 *    - Obsługa błędów
 *
 * 4. Testy:
 *    - Pełne pokrycie wszystkich endpointów
 *    - Mock wywołań bazy danych
 *    - Przypadki brzegowe
 */

Przepływ 3: Fragmenty migracji

-- Fragment: "cmig" - Cursor Migration
-- @cursor Utwórz migrację:
-- Tabela: ${1:table_name}
-- Akcja: ${2|create,alter,drop|}
-- Dołącz: znaczniki czasu, indeksy, ograniczenia
-- Przestrzeń wzorca w: migrations/001_create_users.sql

-- AI generuje kompletną migrację

Funkcje fragmentów świadomych kontekstu

Wykrywanie auto-importów

// Fragment wykrywa i dodaje potrzebne importy
export const MyComponent = () => {
  // @cursor: auto-import Button, useTheme, useState
  // na podstawie użycia poniżej

  const theme = useTheme();
  const [open, setOpen] = useState(false);

  return <Button onClick={() => setOpen(true)}>Kliknij</Button>
}

Dziedziczenie wzorców

// Fragment czyta istniejące wzorce
// @cursor: przeanalizuj getAllUsers() i utwórz
// getAllProducts() z tym samym wzorcem:
// - Styl obsługi błędów
// - Podejście do logowania
// - Format odpowiedzi
// - Strategia cache

Dynamiczna dokumentacja

def ${1:function_name}(${2:parameters}):
    """
    @cursor: Wygeneruj docstring przez:
    1. Analizę implementacji funkcji
    2. Przestrzeganie Google Python Style Guide
    3. Dołączenie typów parametrów z podpowiedzi
    4. Dodanie przykładów użycia
    5. Wylistowanie możliwych wyjątków
    """
    ${0:# implementacja}

Techniki generowania fragmentów

Technika 1: Wydobywanie wzorców

# Poproś Cursora o znalezienie wzorców
"Przeanalizuj wszystkie komponenty React i utwórz szablon fragmentu
który uchwyci nasze typowe wzorce"

# Cursorntyfikuje:
- Wzorzec interfejsu Props
- Podejście do zarządzania stanem
- Użycie granicy błędów
- Wzorzec stanu ładowania
- Importy modułów CSS

Technika 2: Ewolucja fragmentów

// v1: Podstawowy fragment
const ${1:name} = () => <div>${0}</div>

// v2: Dodaj typowe wzorce
const ${1:name} = () => {
  const [loading, setLoading] = useState(false);
  return <div>${0}</div>
}

// v3: Wzbogacone o AI
const ${1:name} = () => {
  // @cursor: dodaj hooki powszechnie używane w naszych komponentach
  return <div>${0}</div>
}

Technika 3: Kompozycja fragmentów

// Łącz wiele fragmentów
// @snippet: component-base
// @snippet: error-boundary
// @snippet: loading-state
// @snippet: responsive-wrapper

// Cursor scala wszystkie wzorce w spójny komponent

Udostępnianie fragmentów zespołowe

Zarządzanie biblioteką fragmentów

.cursor/snippet-library.yaml

version: 1.0
team: frontend
updated: 2025-01-15

snippets:
  - id: react-component
    category: components
    languages: [typescript, javascript]
    dependencies: [react, tailwind]

  - id: api-endpoint
    category: backend
    languages: [javascript]
    dependencies: [express, joi]

  - id: python-test
    category: testing
    languages: [python]
    dependencies: [pytest, mock]

Dokumentacja fragmentów

# Fragment: Komponent formularza React

## Użycie
Wpisz `crform` i naciśnij Tab

## Generuje
- Kontrolowany komponent formularza
- Walidacja z react-hook-form
- Obsługa błędów
- Stany ładowania
- Atrybuty dostępności

## Punkty dostosowania
- Pola formularza: Zdefiniuj w promptcie
- Reguły walidacji: Określ wymagania
- Handler submit: Opisz wywołanie API

## Przykład
`crform` → Tab → "formularz logowania z email i hasłem"

Mierzenie skuteczności fragmentów

Metryka	Bez fragmentów	Z fragmentami AI	Poprawa
Tworzenie komponentów	15 min	2 min	87% szybciej
Spójność	Zmienna	Wysoka	95% jednolite
Wskaźnik błędów	Umiarkowany	Niski	60% mniej
Czas onboardingu	2 tygodnie	3 dni	78% szybciej

Zaawansowane wzorce fragmentów

Rozszerzanie warunkowe

// Fragment: "cstate"
const [${1:name}, set${1/(.*)/${1:/capitalize}/}] = useState(
  // @cursor: jeśli ${1} kończy się na "List", domyślnie []
  // @cursor: jeśli ${1} kończy się na "Count", domyślnie 0
  // @cursor: jeśli ${1} kończy się na "Flag", domyślnie false
  // @cursor: w przeciwnym razie, domyślnie null
);

Generowanie wielu plików

# Fragment: "feature-complete"
@cursor Utwórz funkcję "${1:FeatureName}":

1. Utwórz plik: features/${1}/index.ts
2. Utwórz plik: features/${1}/types.ts
3. Utwórz plik: features/${1}/hooks.ts
4. Utwórz plik: features/${1}/${1}.test.ts
5. Zaktualizuj: features/index.ts z eksportem

Przestrzeń struktury w features/UserAuth/

Makra fragmentów

// Zdefiniuj części fragmentów wielokrotnego użytku
#macro ERROR_HANDLING
try {
  $CONTENT
} catch (error) {
  logger.error('$CONTEXT', error);
  throw new AppError('$MESSAGE', error);
}
#endmacro

// Użyj we fragmentach
async function ${1:name}() {
  #ERROR_HANDLING{
    CONTENT: ${0:// implementacja}
    CONTEXT: ${1:name} nie powiódł się
    MESSAGE: Nie udało się wykonać ${1:name}
  }
}

Częste pułapki do unikania

Uwaga

Antywzorce fragmentów:

1. Nad-fragmentowanie - Nie wszystko potrzebuje fragmentu
2. Przestarzałe fragmenty - Regularnie przeglądaj i aktualizuj
3. Zbyt ogólne - Rób fragmenty specyficzne dla projektu
4. Brak dokumentacji - Dokumentuj co każdy generuje
5. Ignorowanie AI - Używaj AI do wzbogacania, nie tylko szablonowania

Następne kroki

Opanuj przepływy pracy fragmentów aby odblokować:

• 10x szybsze generowanie boilerplate
• Spójny kod w dużych zespołach
• Zmniejszone obciążenie poznawcze
• Szybszy onboarding

Kontynuuj naukę z:

• Przepływy debugowania - Fragmenty specyficzne dla debugowania
• Wzorce testowania - Fragmenty generowania testów
• Strategie refaktoryzacji - Fragmenty refaktoryzacji

Pamiętaj: Najlepsze fragmenty to żywe narzędzia, które ewoluują z twoją bazą kodu. Regularnie analizuj swoje wzorce kodowania i aktualizuj fragmenty aby pasowały.