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"
Composer voi muokata useita tiedostoja kerralla. Kontekstin koko on kuitenkin rajallinen, joten erittäin laajoissa muutoksissa kannattaa jakaa työ osiin.
Voit aina hylätä muutoksen (Reject) ennen hyväksymistä. Jos olet jo hyväksynyt, käytä Undo (Cmd+Z) tai Git-historiaa.
Lisää tiedostot kontekstiin @-syntaksilla tai raahaamalla ne Composer-ikkunaan. Automaattisesti kontekstissa ovat vain avoimet tiedostot.
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.
Kaikki Cursor-oppaat