Tekoälyeditorit: Cursor ja Windsurf
Tekoälyä varten suunnitellut koodieditorit, jotka ymmärtävät projektinne.
Tekoälyeditorit: Cursor ja Windsurf on ilmainen Vibe-koodaus-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vibe-koodaus-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vibe-koodaus-kurssilla on yhteensä 4 oppituntia.
Tutustukaa tekoälyeditoriin
Tekoälyeditori on paikka, jossa oikeasti rakennatte. Se näyttää tavalliselta koodieditorilta, mutta siihen on integroitu tekoäly, joka voi lukea koko projektinne, vastata kysymyksiin ja kirjoittaa koodia puolestanne.
Vibe codingiin suosituimmat ovat Cursor ja Windsurf. Molemmat ovat VS Coden forkkeja, joten ne tuntuvat tutuilta, vaikka ette olisi koskaan ohjelmoineet — tekoäly hoitaa suurimman osan kirjoittamisesta.
Miksi ette käyttäisi vain ChatGPT:tä?
Chat-ikkuna voi kirjoittaa koodia, mutta se ei voi nähdä tiedostojanne. Joudutte kopioimaan ja liittämään sisältöä edestakaisin, jolloin asiayhteys katoaa.
Cursorin kaltainen tekoälyeditori toimii suoraan oikean projektinne sisällä. Se tuntee tiedostonne, voi muokata niitä paikallaan ja muistaa, mitä olette rakentamassa. Tämä tiivis sykli — kuvaile, luo, tarkista, toista — on vibe codingin ydin.
Cursor lyhyesti
Cursor on suosituin tekoälyyn perustuva editori. Sen tärkein ominaisuus on koodikannan ymmärtävä keskustelupaneeli. Painatte pikanäppäintä, kuvailette haluamanne asian, ja se muokkaa oikeita tiedostoja puolestanne.
Voitte kohdistaa sen tiettyihin tiedostoihin @-viittauksilla, jolloin se keskittyy juuri olennaiseen. Tällaisen kehotteen kirjoittaisitte Cursorissa.
In Cursor's chat, you might type:
"@index.html Add a centered heading that says 'My First App' and a button below it labeled 'Click Me'. Keep the styling simple."Tekstin sisäiset muokkaukset Cursorilla
Chatin lisäksi Cursor antaa valita koodia ja pyytää muutosta suoraan siinä kohdassa, jossa koodi sijaitsee. Maalatkaa koodilohko, painakaa muokkauksen pikanäppäintä ja kuvailkaa muutos selkokielellä.
Tämä sopii erinomaisesti pieniin ja tarkasti kohdistettuihin muutoksiin — kuten ”tee tästä punainen” tai ”lisää latausviesti” — ilman koko tiedoston uudelleenkirjoittamista.
Select a button, press Cmd/Ctrl+K, then type:
"Make this button bigger, give it rounded corners, and a purple background."Windsurf: toinen suuri tekijä
Windsurf (Codeiumin kehittämä) on Cursorin tärkein kilpailija. Se on myös VS Coden forkki, johon tekoäly on integroitu syvällisesti.
Sen erottuva ominaisuus on Cascade — agentti, joka voi suunnitella ja toteuttaa monivaiheisia muutoksia useissa tiedostoissa sekä kertoa samalla, mitä se tekee. Se sopii erinomaisesti pyyntöihin, jotka koskevat useampaa kuin yhtä tiedostoa.
Cursor vai Windsurf
Molemmat ovat erinomaisia. Erot liittyvät lähinnä käyttötuntumaan ja hinnoitteluun:
- Cursor — erittäin suosittu, valtava yhteisö sekä viimeistellyt chat- ja koodinsisäiset muokkaustoiminnot.
- Windsurf — sujuvat agenttimaiset työnkulut Cascaden avulla, selkeä käyttöliittymä ja usein antelias ilmaisversio.
Et tarvitse molempia. Valitkaa toinen, opetelkaa sen pikanäppäimet ja käyttäkää sitä jonkin aikaa.
@-kontekstitemppu
Tekoälyeditorissa kaikkein tärkein tapa on antaa sille konteksti. Sekä Cursorissa että Windsurfissa tiedostoihin, kansioihin tai dokumentteihin voi viitata @-symbolilla.
Kun tekoäly näkee oikeat tiedostot, se lakkaa arvailemasta ja alkaa rakentaa juuri sitä, mitä tarkoitatte.
"@styles.css @index.html The button on the home page should match the dark theme in styles.css. Update both files to keep them consistent."Kun seuraatte tekoälyn muokkaavan tiedostojanne
Kun hyväksytte ehdotuksen, editori näyttää diffin — lisätyt rivit vihreinä ja poistetut punaisina. Tarkistatte sen ja napsautatte sitten Accept tai Reject.
Tämä on turvaverkkonne. Pysytte itse hallinnassa: tekoäly ehdottaa ja te hyväksytte. Vilkaiskaa diff aina ennen hyväksymistä, etenkin tiedostojen kasvaessa.
Pieni esimerkki tulosteesta
Tehdään tästä konkreettista: jos pyytäisitte Cursoria tekemään painikkeen, joka tervehtii teitä, se voisi tuottaa alla olevan JavaScriptin. Teidän ei tarvitse kirjoittaa sitä itse — mutta on hyödyllistä tunnistaa, mitä tekoäly tuotti.
function greet() {
const name = "builder";
console.log("Hello, " + name + "! Welcome to vibe coding.");
}
greet();Taustalla toimivat mallit
Näillä editoreilla ei ole omaa aivoa — ne muodostavat yhteyden tekoälymalleihin, kuten Claudeen, GPT:hen ja Geminiin. Yleensä voitte valita, mikä malli käsittelee pyyntönne.
Koodin rakentamiseen vahvat päättelymallit, kuten Clauden Sonnet tai Opus, tuottavat yleensä siistimpää jälkeä. Voitte vaihtaa mallia avattavasta valikosta, jos jokin malli ei suoriudu tehtävästä.
Aloitus kolmessa vaiheessa
Haluatteko kokeilla jompaakumpaa? Nopein tapa on tämä:
- Ladatkaa Cursor tai Windsurf ja avatkaa se.
- Avatkaa kansio (tai luokaa tyhjä kansio) projektiksi.
- Avatkaa chat pikanäppäimellä ja kuvailkaa ensimmäinen ideanne.
Erillisiä valmistelutoimia ei tarvita — pääsette keskustelemaan tekoälyn kanssa muutamassa minuutissa.
"Create a single index.html page with a title 'Hello World', a short welcome paragraph, and a button that shows an alert when clicked."Pikatesti
Mikä on Cursorin kaltaisen tekoälyeditorin tärkein etu tavalliseen chat-ikkunaan verrattuna?
Kertaus: kotipesänne
Tekoälyeditorit ovat paikka, jossa vibe coding tapahtuu päivästä toiseen. Tärkeimmät asiat:
- Cursor ja Windsurf ovat VS Codeen perustuvia editoreita, joissa on sisäänrakennettu tekoäly.
- Ne voivat lukea koko projektinne ja muokata tiedostoja suoraan paikallaan.
- Käyttäkää
@-symbolia antaaksenne tekoälylle oikean kontekstin. - Tarkistakaa diff aina ennen muutosten hyväksymistä.
Seuraavaksi tutustumme agenttimaisiin työkaluihin, kuten Claude Codeen ja Copilotiin, jotka voivat suorittaa koodia puolestanne.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 25
- Oppitunnit
- 100
Usein kysytyt kysymykset
Onko oppitunti ”Tekoälyeditorit: Cursor ja Windsurf” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vibe-koodaus-oppimispolun 3 oppituntia, myös oppitunnin “Tekoälyeditorit: Cursor ja Windsurf”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vibe-koodaus-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Tekoälyeditorit: Cursor ja Windsurf”?
Tekoälyä varten suunnitellut koodieditorit, jotka ymmärtävät projektinne. Harjoittelet Vibe-koodaus-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vibe-koodaus-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vibe-koodaus-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Tekoälyeditorit: Cursor ja Windsurf”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Vibe-koodaus-oppitunnilla?
Kyllä. Jokainen Vibe-koodaus-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Tekoälyeditorit: Cursor ja Windsurf
- Agenttityökalut: Claude Code ja Copilot
- Sovellusrakentajat: v0, Bolt ja Lovable
- Oikean työkalun valitseminen