Adeus, VS Code! Conheça o Cursor AI Editor (Sem Arrependimentos)

não é clickbait eu não estou mais usando o vs code como meu editor de códigos profissional para programar e no vídeo de hoje eu quero mostrar para você o novo editor de códigos que eu tô utilizando E porque você aí do outro lado também deveria imediatamente trocar o vs code para esse editor que eu vou te [Música] recomendar Olá meu nome é dimitre Teixeira e seja muito bem-vindo seja muito bem-vinda mais um vídeo aqui do canal programação web e Já faz alguns meses que eu tô usando um editor de códigos que simplesmente fez eu ficar impressionado com tudo que a gente pode fazer usando esse novo editor é basicamente o vs Code com esteroides de ia u vs code tunado para usar Inteligência Artificial dentro dos seus projetos é simplesmente sensacional eu quero mostrar para vocês eu muito empolgado esse vídeo não é um vídeo patrocinado Que fique claro isso aqui é um vídeo que tá realmente mostrando o que eu tô usando que eu recomendo para vocês então se você é aluno do meu curso programador web completo do meu curso criar aplicativos do meu curso programador web com ia eu recomendo fortemente que a partir de agora você utilize esse editor de códigos que eu vou mostrar para você nesse vídeo bom esse daqui é o editor de códigos que eu recomendo para vocês e aí a sua mente simplesmente buga porque parece muito vs code não é mas não é pessoal o editor que nós estamos usando aqui nesse vídeo se chama cursor ai o cursor ai é legal porque ele basicamente é igual idêntico ao vs code só que com coisas a mais que realmente fazem muita diferença quando você instala o cursor ai né n até mostrar para vocês aqui o site dele né o site se chama cursor. com você vai ter exatamente a mesma coisa que o vscode porque ele vai importar os temas que você usa os plugins a forma de trabalhar ele foi desenvolvido em cima da base do vscode que é de código aberto então ele é basicamente o vscode mesmo só que ele tem coisas muito legais a mais né para exemplificar aqui eu deixei aberto um projeto uma pasta que eu chamei site exemplo coloquei um arquivo aqui index. html.

gz a gente coloca por exemplo no vs code mas isso já é integrado na ide quer dizer ele já vai te dar sugestões de código pro que você precisar então Vamos citar um exemplo aqui eu vou criar um novo arquivo chamado assim style. css certo criei aqui um arquivo CSS comum se eu vem logo abaixo aqui do meu title Olha só o que que ele já me sugere ele já me sugere pra gente referenciar Esse CSS já puxando Qual que é o arquivo que a gente acabou de criar olha só que sensacional por ele tem controle total do projeto É como se você tivesse uma ia que pudesse ler todos os arquivos do seu projeto e trabalhar em cima de todos eles ao mesmo tempo a gente vai ver algo ainda mais avançado que isso Calma aí que vai ficar ainda mais legal mas olha que interessante é a mesma coisa que você já tinha no vs code Então você tem o vs code Como ele sempre foi não muda nada você tem o mesmo tema pode digitar os códigos os mesmos as mesmas extensões plugins que você já gostava Só que já com alguns outros recursos embutidos a mais e aí o que que é legal aqui do cursor ai pessoal ele tem o contexto completo do seu projeto quando você trabalha com inteligência artificial por exemplo lá no chat GPT ou quando você trabalha com inteligência artificial no Cloud e outros ele vai ter ali o contexto daquela conversa que você tá tendo com ele ele vai gerar os códigos você copia às vezes cola lá no teu projeto do que você tá trabalhando mas aqui ele vai poder ler literalmente todo o seu projeto todos os arquivos todas as pastas todas as dependências e ele vai poder modificar e gerar código para você de todo o seu projeto isso é simplesmente sensacional vamos ver se você vai conseguir entender vou tentar te dar um exemplo aqui esse vídeo não é um tutorial passo a passo eu não tô ensinando aqui como instalar como fazer as coisas eu tô apresentando para vocês uma coisa que para mim me deixou muito empolgado e eu acho que pode deixar você aí do outro lado também tão empolgado quanto eu quando você entender o poder disso daqui então aqui dentro do do nosso cursor ai eu vou fazer o seguinte eu vou dar um contrl shift k então control shift k e ele vai abrir aqui para nós ó pessoal é uma espécie de promt aqui de entrada como a gente tem lá no chat PT nas inteligências artificiais para que eu possa colocar a informação que eu quiser repare que ele já referenciou no contexto o arquivo que eu tô que é index P HTML então ele já tá levando em conta o contexto Desse nosso arquivo aqui em cima no editor você vai ter uma barrinha se chama assim ó tole ai Pain né que é um painel de Inteligência Artificial quando você clica aqui ele abre esse menu lateral que tem algumas coisas aqui relacionadas com isso né ou você pode se abriu aqui o teu com Cont contrl shift k esse eh PR aqui embaixo você pode vir nos três pontinhos se eu não me engano deixa eu ver se vai funcionar Porque que no meu não tá funcionando aqui ó tá meio bugado mas você tem como colocar ele na lateral com control I se eu faço isso ó ele já vai aparecer aqui na lateral Esse chamado composer composer aqui no cursor ai é um compositor ele pode trabalhar com todo o seu projeto Então olha só que legal o que que eu posso fazer aqui eu posso colocar o contexto dos meus arquivos por exemplo se eu ven aqui nesse maizinho eu posso adicionar o meu arquivo CSS aqui também ó então agora a partir de agora quando eu for colocar alguma coisa que eu queira que ele faça ele já vai levar em conta o meu arquivo HTML e o meu arquivo CSS legal isso é simplesmente sensacional aqui a gente tem as llms que a gente pode usar junto com ele então Cloud sonet 3. 5 GPT 4 o om One eu tô usando aqui o cloud 3.

5 sonnet na são mais recente que é a mais poderosa e O legal é que o cursor ele pode ler todo o seu projeto por exemplo Quando você vai colocar um prompt aqui e se você teclar control enter ele já vai entender que ele precisa fazer uma varredura de todo o seu projeto o contexto total do seu projeto para que ele possa fazer a modificação que você quiser Legal vamos fazer um exemplo simples aqui para você ver ele inclusive Pode instalar dependente tá ele vai te sugerir ali coisas que você tem que colocar no terminal por exemplo npn instal você vamos supor que você quer fazer um projeto do Next ele mostra os códigos para você qual que é os comandos do terminal que você tem que fazer ele mesmo cria pastas ele mesmo cria arquivos ele vai fazendo tudo para você como se fosse um programador que tá ali do teu lado é muito legal Vamos fazer um testezinho aqui para mostrar para vocês eu vou entrar aqui no site do dribble já deixei preparado pra gente não ser muito nessa aula esse projeto aqui que é uma Landing page que eu achei bonita lá um design que eu achei legal o que que eu vou fazer eu vou capturar aqui essa tela tá pessoal vou fazer aqui uma captura para usar essa imagem como referência eu tô usando o Ed né o Microsoft Ed quando eu clico o botão direito captura de tela eu tenho como capturar aqui a tela eu vou voltar lá no meu cursor ai vou colar essa imagem aqui e olha só o que que eu vou falar para ele aqui eu vou pedir para ele assim ó por favor passa uma Landing page usando esta imagem de referência eu gostaria de utilizar tawing CSS para estilização do projeto certo então eu passei para ele uma imagem de referência ele já entende aqui meu arquivo index HTML CSS aqui que a gente tem e e eu pedi para ele fazer isso vou dar um enter aqui para ele e aí ele vai começar a Gerar ele vai mandar lá pra llm para fazer o projeto ele fala ó vou ajudar você a criar uma Landing page semelhante usando T ind CSS Primeiro vamos configurar o projeto adequadamente eu vou modificar o arquivo HTML para incluir o te oíndice ss e começar a estrutura da Landing page aí Olha só pessoal o que que tá acontecendo aqui ele simplesmente ó já colocou o código para nós aqui do que que ele viu que vai ser necessário para funcionar no nosso projeto ele já incorporou aqui a tag script do tailwind certo e ele já falou aqui o que que ele precisa aí você tem aqui um botão aceitar aceitar essa modificação se eu clicar aqui em acept aceitar tiar ele já fez isso aqui para mim eu poderia por exemplo rodar com o Live server né eu tenho Live server aqui que é aquela extensão do vscode que ele já importou no cursor normalmente e vou rodar essa nossa aplicação pra gente dar uma olhadinha no que que saiu de resultado aqui e aí Simplesmente saiu aqui isso pessoal já saiu uma Landing page praticamente Idêntica ao projeto que eu pedi para ele passar aqui não tem nenhuma imagem porque a imagem que ele passou aqui ó tá quebrada tá vendo pessoal se a gente for lá no nosso código e a gente procurar aqui a parte da imagem Ó aqui tá ó dashboard.