Composer on Cursorin tehokkain ominaisuus vibekoodaukseen. Se mahdollistaa laajojen muutosten tekemisen useisiin tiedostoihin kerralla luonnollista kieltä käyttäen. Tässä oppaassa opit hyödyntämään Composeria täysillä.
Composer on Cursorin edistyneempi AI-työkalu, joka eroaa Chatista merkittävästi:
Chat (Cmd+L): - Keskustelupohjainen - Vastaa kysymyksiin - Ehdottaa muutoksia - Ei muokkaa tiedostoja suoraan
Composer (Cmd+I): - Kirjoittaa ja muokkaa koodia - Tekee muutokset suoraan tiedostoihin - Voi työskennellä useissa tiedostoissa - Näyttää muutokset diff-näkymässä
Composer on vibekoodauksen ydin - kerrot mitä haluat, ja se toteuttaa.
Composerin voi avata kolmella tavalla:
1. Pikanäppäin: Cmd+I (Mac) / Ctrl+I (Windows) 2. Komentovalikko: Cmd+Shift+P > "Cursor: Open Composer" 3. Sivupalkki: Klikkaa Composer-ikonia
Kun Composer on auki, näet: - Tekstikenttä promptille - Lista tiedostoista joita AI voi muokata - Diff-näkymä muutoksille
Composer toimii parhaiten kun sillä on oikea konteksti. Voit lisätä kontekstia:
@-syntaksi promptissa:
- @filename - Lisää tiedosto kontekstiin
- @folder - Lisää kansio kontekstiin
- @codebase - Hae koko koodikannasta
Tiedostojen lisääminen: - Raahaa tiedosto Composer-ikkunaan - Klikkaa "Add files" -painiketta - Valitse tiedostot Explorerista
Automaattinen konteksti: - Avoimet tiedostot näkyvät Composerille - Valittu koodi välittyy automaattisesti
// Esimerkki @-syntaksista:
"Lisää autentikaatio @src/pages/api käyttäen
@lib/auth.ts olemassa olevaa auth-logiikkaa"Hyvä Composer-prompt on:
1. Selkeä: Kerro täsmälleen mitä haluat 2. Kontekstuaalinen: Viittaa olemassa olevaan koodiin 3. Rajattu: Keskity yhteen asiaan kerrallaan
Hyviä esimerkkejä:
"Lisää TypeScript-tyypit kaikille funktioille @src/utils kansiossa"
"Refaktoroi @UserList.tsx käyttämään React Query -kirjastoa datan hakuun. Säilytä nykyinen UI mutta lisää loading ja error -tilat."
"Luo uusi API endpoint @src/pages/api/products.ts joka hakee tuotteet @lib/db.ts tietokannasta. Lisää validointi ja virheenkäsittely."
Composer näyttää muutokset diff-näkymässä ennen hyväksymistä:
Vihreä: Lisätty koodi Punainen: Poistettu koodi Harmaa: Muuttumaton koodi
Toiminnot: - Accept: Hyväksy muutos - Reject: Hylkää muutos - Edit: Muokkaa ehdotusta lisäpromptilla
Voit hyväksyä tai hylätä muutoksia tiedostokohtaisesti: - Accept All: Hyväksy kaikki muutokset - Reject All: Hylkää kaikki muutokset - Tiedostokohtainen hyväksyntä/hylkäys
Composer toimii parhaiten iteratiivisesti:
1. Aloita pienestä: Pyydä perusrakenne 2. Lisää ominaisuuksia: Pyydä uusia toimintoja 3. Paranna: Pyydä refaktorointia 4. Testaa: Pyydä testejä
Esimerkki iteraatiosta:
1. "Luo ProductCard-komponentti joka näyttää tuotteen nimen ja hinnan" 2. "Lisää tuotekuva ja 'Lisää koriin' -nappi" 3. "Lisää hover-efekti ja responsiivinen layout" 4. "Lisää TypeScript-tyypit ja yksikkötestit"
Jokaisen vaiheen jälkeen tarkista ja testaa ennen seuraavaa.
Cursorin uusin ominaisuus on Agent-tila, joka toimii Composerin sisällä:
Aktivointi: Valitse "Agent" Composer-tilaksi
Agent-tila voi: - Suorittaa terminaalikomentoja - Lukea tiedostoja itsenäisesti - Ajaa testejä - Korjata virheitä automaattisesti
Käyttötapaukset: - "Asenna tarvittavat paketit ja konfiguroi projekti" - "Aja testit ja korjaa kaikki virheet" - "Rakenna ja julkaise sovellus"
Opi milloin käyttää Chatia ja milloin Composeria vibekoodauksessa.
Opas .cursorrules-tiedoston käyttöön - anna AI:lle projektikohtaiset ohjeet.
Opi hallitsemaan AI:n kontekstia tehokkaasti - avain parempiin tuloksiin.
Löydä lisää vinkkejä ja oppaita Cursorin tehokäyttöön.