{"id":7062,"date":"2025-09-08T10:07:56","date_gmt":"2025-09-08T15:07:56","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=7062"},"modified":"2025-09-08T10:07:57","modified_gmt":"2025-09-08T15:07:57","slug":"getting-started-with-cursor","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/getting-started-with-cursor\/","title":{"rendered":"Getting Started with Cursor"},"content":{"rendered":"\n

I don\u2019t love the term \u201cvibe coding,\u201d but I also don\u2019t like doing tedious things. <\/p>\n\n\n\n

Over the last few months, we\u2019ve seen a number of AI-driven development tools. Cursor<\/strong><\/a> <\/strong>is probably the most well-known at this point. But big players are starting to come out with their own like OpenAI\u2019s Codex<\/a>, Anthropic\u2019s Claude Code<\/a>, Google Gemini CLI<\/a>, and Amazon\u2019s Kiro<\/a>.<\/p>\n\n\n\n

Think of Cursor as Visual Studio Code\u2019s ambitious younger cousin\u2014the one who not only borrows your syntax highlighting but also brings a full brain along for the ride\u2014and is also a fork of its bigger cousin. In fact, if you weren\u2019t looking closely, you could be forgiven for confusing it with Visual Studio Code.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I should note that Microsoft has also been racing to add Cursor-like features to Visual Studio Code and a lot of what we\u2019re going to talk about here can also apply to Copilot in Visual Studio Code as well.<\/p>\n\n\n\n

Editors note:<\/strong> If you really<\/em> want to level up with your AI coding skills, you should go from here right to Steve’s course Cursor & Claude Code: Professional AI Setup<\/a>.<\/p>\n\n\n\n

Getting Set Up: The Familiar On-Ramp<\/h2>\n\n\n\n

If you\u2019ve ever installed Visual Studio Code, you already know the drill. Download, install, run. Cursor smooths the landing with a one-click migration from VS Code\u2014your extensions, themes, settings, and keybindings slide right over. Suddenly, you\u2019re in a new editor that looks a lot like home but has some wild new tricks up its sleeve.<\/p>\n\n\n\n

Once you\u2019re settled, Cursor gives you a few ways to work with it:<\/p>\n\n\n\n

    \n
  • Inline Edit (Cmd\/Ctrl+K)<\/strong> \u2013 Highlight some code, and then tell Cursor what you want to happen (e.g. \u201cRefactor this function to use async\/await\u201d), and watch Cursor suggest a tidy diff right in front of your eyes. Nothing sneaky\u2014just a controlled, color-coded change you can approve or toss if it’s not what you had in mind.<\/li>\n\n\n\n
  • AI Chat (Cmd\/Ctrl+L)<\/strong> \u2013 This is like ChatGPT, but it knows your codebase. It hands out along-side your editor panes. Ask why a component is behaving weirdly, brainstorm ideas, or generate new code blocks. By default, it sees the current file, but you can widen its gaze to the whole repo with @codebase.<\/li>\n\n\n\n
  • The Agent (Cmd\/Ctrl+I)<\/strong> \u2013 For the big jobs. Describe a goal (\u201cAdd authentication with GitHub and Google\u201d), and Cursor will plan the steps, touch multiple files, and even run commands\u2014always asking before it does anything dangerous. This is where you go from \u201cpair programmer\u201d to \u201cproject collaborator.\u201d<\/li>\n<\/ul>\n\n\n\n

    Some Inspiration for the Quick Editor<\/h3>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    The inline editor is Cursor\u2019s scalpel\u2014it\u2019s sharp, precise, and surprisingly versatile once you start leaning on it. A few of my favorite quick tricks:<\/p>\n\n\n\n

      \n
    • Refactor without the tedium<\/strong>: Highlight a callback hell nightmare, hit Cmd\/Ctrl+K, and ask Cursor to rewrite it with async\/await. Boom\u2014cleaner code in seconds.<\/li>\n\n\n\n
    • Generate boilerplate<\/strong>: Tired of writing the same prop-type interfaces or test scaffolding? Select a stub, tell Cursor what you need, and let it flesh things out.<\/li>\n\n\n\n
    • Convert styles on the fly<\/strong>: Need to move from plain CSS to Tailwind or from Tailwind to inline styles? Cursor can handle the translation with a single instruction.<\/li>\n\n\n\n
    • Explain before you change<\/strong>: Select a gnarly function and just ask Cursor \u201cexplain this.\u201d You\u2019ll get a quick natural-language breakdown before deciding what to tweak.<\/li>\n\n\n\n
    • Add guardrails<\/strong>: Highlight a function and say, \u201cAdd input validation with Zod,\u201d or \u201cThrow if the input is null.\u201d Cursor will patch in the safety nets.<\/li>\n<\/ul>\n\n\n\n

      These tricks work best when you\u2019re hyper-specific with what you want. Think of it less like a magic wand and more like a super helpful, pair-programming buddy who thrives on clear, concrete instructions. That\u2019s the scalpel. But Cursor also gives you bigger hammers when you need them.<\/p>\n\n\n\n

      Getting the Most Out of the Chat and Agent<\/h3>\n\n\n\n

      As I alluded too above, Chat (Cmd\/Ctrl+L)<\/strong> is for conversation and exploration. It\u2019s best for asking \u201cwhy\u201d or \u201cwhat if\u201d questions, brainstorming, or generating code you\u2019ll shape yourself. I use this all of the time to think through various approaches before<\/em> I write any code. I treat it like a co-worker that I’m bouncing ideas off of\u2014except I don’t have to interrupt them.<\/p>\n\n\n\n

        \n
      • Keep prompts specific (\u201cExplain how this hook manages state across renders\u201d beats \u201cExplain this\u201d).<\/li>\n\n\n\n
      • Pull in the right context with @files or @codebase so answers stay grounded in your<\/em> project.<\/li>\n\n\n\n
      • Use it as a sounding board before you start refactoring\u2014it\u2019ll surface tradeoffs you might miss.<\/li>\n<\/ul>\n\n\n\n

        The Agent (Cmd\/Ctrl+I)<\/strong> is for execution. Think of it as delegating work to a teammate who follows your plan:<\/p>\n\n\n\n

          \n
        • Start with a high-level description, then ask the agent to generate a step-by-step plan before running anything.<\/li>\n\n\n\n
        • Approve changes incrementally\u2014don\u2019t green-light a sweeping set of edits unless you\u2019ve reviewed the plan.<\/li>\n\n\n\n
        • Pair it with tests and Git. Strong test coverage makes it easy to validate the agent\u2019s work, and frequent commits let you roll back if things get messy.<\/li>\n\n\n\n
        • Use it for repetitive or cross-file tasks\u2014things that would normally take you 20 minutes of hunt-and-peck are often solved in one go.<\/li>\n<\/ul>\n\n\n\n

          Here are some examples of things you might choose to toss at an agent:<\/p>\n\n\n\n

            \n
          • \u201cAdd authentication with GitHub and Google using Supabase. Show me the plan first.\u201d<\/li>\n\n\n\n
          • \u201cMigrate all class-based components in @components to functional components with hooks.\u201d<\/li>\n\n\n\n
          • \u201cConvert this component to use Tailwind classes instead of inline styles.\u201d<\/li>\n<\/ul>\n\n\n\n

            In short: chat is your whiteboard, agent is your task runner. Bounce ideas in chat, then graduate to the agent when you\u2019re ready to automate.<\/p>\n\n\n\n

            Why Context Is Everything<\/h2>\n\n\n\n

            In a large enough code base, you’re not going to be able to keep the entire thing in your head at any given time\u2014and Cursor can’t either. In fact, this is probably one of the few places where you have an edge over an LLM\u2014for now. <\/p>\n\n\n\n

            If you’re looking to get the most out of Cursor and other tools, then managing context is the name of the game. Sure, Cursor can index your code base, but sometimes that can be too much of a good thing. If you want to get the most out of a tool like Cursor, then you’re going to want to pull in the specific parts of your code base that you want it to know about. Otherwise, it’s hard to blame it if it starts heading off in a direction that you didn’t expect. If you didn’t explain what you wanted or give the necessary context to a human, it’s unlikely that they’re going to have what they need in order to be successful and Cursor is no different. Without context is like a smart intern working blindfolded. It might guess, it might improvise, and sometimes it invents nonsense (\u201challucinations\u201d is the fancy term). Feed it the right context, though, and Cursor becomes sharp, fast, and eerily helpful.<\/p>\n\n\n\n

            Context does a few magical things:<\/p>\n\n\n\n

              \n
            • Cuts down on guesswork.<\/li>\n\n\n\n
            • Keeps answers specific to your<\/em> code instead of generic boilerplate.<\/li>\n\n\n\n
            • Helps the AI reason about structure and dependencies instead of flailing.<\/li>\n\n\n\n
            • Saves tokens, which means you save money.<\/li>\n<\/ul>\n\n\n\n

              Your job is to do the Big Brain Thinking\u2122 about the overall big picture and then give Cursor the context it needs in order to do the tedious grunt work.<\/p>\n\n\n\n

              How Cursor Handles Context<\/h2>\n\n\n\n

              Cursor is not leaving you high-and-dry in this regard. It has some built-in smarts: it grabs the current file, recently viewed files, edit history, compiler errors, and even semantic search results. It will follow your dependency graph and get read the first little bit of every file in order to get a sense of what it does.<\/p>\n\n\n\n

              But the real control comes from explicit context management.<\/p>\n\n\n\n

                \n
              • @Files \/ @Folders \u2013 Point Cursor to exact code.<\/li>\n\n\n\n
              • @Symbols \u2013 Zero in on a function, class, or hook.<\/li>\n\n\n\n
              • @Docs \u2013 Pull in external documentation (yours or the framework\u2019s).<\/li>\n\n\n\n
              • @Web \u2013 Do a live web search mid-chat.<\/li>\n\n\n\n
              • @Git \u2013 Bring in commit history or diffs.<\/li>\n\n\n\n
              • @Linter Errors \u2013 Hand Cursor your error messages so it can fix them.<\/li>\n\n\n\n
              • @Past Chats \u2013 Keep long conversations coherent.<\/li>\n<\/ul>\n\n\n\n

                That\u2019s just the tactical layer. For strategy, Cursor gives you rules<\/strong> and Notepads<\/strong>.<\/p>\n\n\n\n

                  \n
                • .cursor\/rules<\/code> live in your repo, version-controlled, shaping Cursor\u2019s behavior: \u201cAlways use React Query,\u201d \u201cPrefer async\/await,\u201d \u201cDon\u2019t leave TODO comments.\u201d Think of them as your project\u2019s constitution.<\/li>\n\n\n\n
                • Notepads<\/strong> are like sticky notes on steroids\u2014bundles of prompts, docs, and references you can inject whenever needed. They\u2019re local, but great for organizing reusable prompts or team knowledge.<\/li>\n<\/ul>\n\n\n\n

                  Notepads allow you to keep little snippets of information that you can reference at any time and pull into context\u2014without having to type the same things over and over.<\/p>\n\n\n\n

                  \"\"<\/figure>\n\n\n\n

                  Here is an example of some rules to guide Cursor towards writing TypeScript and\/or JavaScript in a way that aligns with your\u2014or my<\/em>, in this case\u2014preferences:<\/p>\n\n\n\n

                  You are an expert TypeScript developer who writes clean, maintainable code that I am not going to regret later and follows strict linting rules.

                  - Use nullish coalescing (`??`) and optional chaining (`?.`) operators appropriately

                  - Prefix unused variables with underscore (e.g., \\_unusedParam)

                  # JavaScript Best Practices

                  - Use `const` for all variables that aren't reassigned, `let` otherwise
                  - Don't use `await` in return statements (return the Promise directly)
                  - Always use curly braces for control structures, even for single-line blocks
                  - Prefer object spread (e.g. `{ ...args }`) over `Object.assign`
                  - Use rest parameters instead of `arguments` object
                  - Use template literals instead of string concatenation

                  # Import Organization

                  - Keep imports at the top of the file
                  - Group imports in this order: `built-in \u2192 external \u2192 internal \u2192 parent \u2192 sibling \u2192 index \u2192 object \u2192 type`
                  - Add blank lines between import groups
                  - Sort imports alphabetically within each group
                  - Avoid duplicate imports
                  - Avoid circular dependencies
                  - Ensure member imports are sorted (e.g., `import { A, B, C } from 'module'`)

                  # Console Usage

                  - Console statements are allowed but should be used judiciously<\/pre>\n\n\n\n
                  Best Practices for Keeping Cursor Sharp<\/h2>\n\n\n\n
                  The one thing that I’ve learned from using Cursor every day for a few months now is that all of those Best Practices\u00ae that you know you’re supposed to do but you might’ve gotten sloppy with in the past? They’re extra important these days. For example, the better your tests are, the easier it is for Cursor to validate whether or not it successfully accomplished a task\u2014and didn’t cause a regression in the process. It’s one thing to manually test your own code over and over, but it’s extra sobering to have to manually test code that you didn’t write. The better your Git etiquette is, the easier it will be to roll back to a known good state in the event that something goes off the rails.<\/p>\n\n\n\n
                    \n
                  • Review before you merge.<\/strong> Always. The AI is good, but it\u2019s not omniscient.<\/li>\n\n\n\n
                  • Commit early and often.<\/strong> Git is still your real safety net.<\/li>\n\n\n\n
                  • Be precise in prompts.<\/strong> \u201cMake this more efficient\u201d is vague. \u201cReplace recursion with iteration to avoid stack overflow\u201d is crisp.<\/li>\n\n\n\n
                  • Break it down.<\/strong> Ask Cursor to outline a plan before making changes.<\/li>\n\n\n\n
                  • Iterate.<\/strong> Think of it like a dialogue, not a vending machine.<\/li>\n\n\n\n
                  • Mind your open files.<\/strong> The fewer distractions, the better Cursor performs.<\/li>\n\n\n\n
                  • Keep files lean.<\/strong> Under 500 lines helps Agent mode stay accurate.<\/li>\n\n\n\n
                  • Stay private when you need to.<\/strong> Ghost Mode ensures nothing leaves your machine.<\/li>\n<\/ul>\n\n\n\n
                    Wrapping Up<\/h2>\n\n\n\n
                    Cursor isn\u2019t just an editor with AI bolted on. With proper context management, it becomes a thoughtful coding partner that amplifies your strengths, fills in gaps, and accelerates the mundane parts of software development. Used well, it\u2019s less about \u201casking AI to code for me\u201d and more about orchestrating an intelligent partner in your workflow. <\/p>\n\n\n\n
                    TL;DR<\/strong>: The more precisely you guide Cursor, the more it feels like it really<\/em> understands your project\u2014and that\u2019s when the magic happens.<\/p>\n","protected":false},"excerpt":{"rendered":"
                    Cursor is an AI-focused VS Code fork. Here’s Steve Kinney with a nice overview of what it offers and how to start getting help out of it right away.<\/p>\n","protected":false},"author":30,"featured_media":7079,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[104,97,391,392],"class_list":["post-7062","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-ai","tag-code-editors","tag-cursor","tag-llms"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/09\/Getting-Started-with-Cursor.jpg?fit=1140%2C676&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=7062"}],"version-history":[{"count":7,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7062\/revisions"}],"predecessor-version":[{"id":7096,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7062\/revisions\/7096"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/7079"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=7062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=7062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=7062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}