{"componentChunkName":"component---src-templates-section-tsx","path":"/claude-code-using-claude-code-in-the-terminal-and-ide","result":{"data":{"section":{"title":"Using Claude Code in the Terminal and IDE","subtitle":"Setting Up the Claude Extension in VS Code, Cursor, or Windsurf","slug":"claude-code-using-claude-code-in-the-terminal-and-ide","videoDuration":262,"releaseDate":null,"tags":["claude code","terminal workflow","ide integration","vs code","cursor editor","windsurf","ai coding assistant","code setup","developer productivity","coding tools"],"contentful_id":"6tMXbrw6FqCNtGiY0jyDx3","isFree":false,"illustration":null,"source":null,"colors":null,"chapter":[{"title":"Claude Code Crash Course on Agentic Workflows","slug":"claude-code","hoursOfVideo":1,"description":{"description":"This course teaches you how to use Claude Code efficiently with slash commands, hooks, parallel workflows, and more. You’ll learn the mindset of working with AI, simplify repetitive tasks and connect tools into one unified agentic workflow, giving you everything you need to go from idea to working app."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/1bYdUtniEAUH3jdqQd3Qc1/7cf21d20882bfe59f01d7bc74e81010d/react-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/39xkJS0CvrRBKgMnyLYBks/14d434f819fef062dce8c72efecbc74d/react-logo.png?w=400&q=50"}}],"instructors":[{"name":"Vanh Roeung","slug":"instructor/vanh","avatar":{"fluid":{"src":"//images.ctfassets.net/ooa29xqb8tix/2anEzU2n2tP4f0kSZCLWb2/0358b4770ab46ed28f961cfb81a09b3b/Screenshot_2025-08-22_at_11.29.49â__AM.png?w=200&h=200&q=50"}}}],"illustration":{"file":{"url":"//images.ctfassets.net/ooa29xqb8tix/304Tlb60pUSlhG8CMC5gUf/4bc2717aad54e15dd68d275520eb06d8/claude-code.svg"}},"illustrationConverted":{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/76YCbDJok71emzDKE43HtK/7383feb1723d2f7e52a76fa4f0186f1a/claude-code.png?w=400&q=50"}},"colors":["#171515","#322E2E"],"sections":[{"title":"Introduction on Claude Code","subtitle":"Getting Started with Claude Code CL","slug":"claude-code-introduction","videoDuration":116,"releaseDate":null,"tags":null},{"title":"Beat Context Pruning & Pick the Perfect Anthropic Plan","subtitle":"Running Claude Code Directly for Full-Context","slug":"claude-code-beat-context-pruning","videoDuration":491,"releaseDate":null,"tags":null},{"title":"Why the Terminal Matters: The Foundation for Claude Code and CLI Tools","subtitle":"Command Line Crash Course: Unlocking Claude Code’s Power","slug":"claude-code-why-the-terminal-matters","videoDuration":600,"releaseDate":null,"tags":null},{"title":"How to Safely Resolve npm Permission Errors Without sudo","subtitle":"Why You Shouldn’t Use sudo for npm Installs","slug":"claude-code-how-to-safely-resolve-npm-permission-errors-without-sudo","videoDuration":443,"releaseDate":null,"tags":["npm permission","sudo","npm installs","error fix"]},{"title":"Using Claude Code’s /init and claude.md Effectively","subtitle":"Customizing Your Project Guide","slug":"claude-code-using-claude-codes-init-and-claude-md-effectively","videoDuration":277,"releaseDate":null,"tags":["Claude code","init","claude.md","customizing Claude.md","project guide","ai coding assistant","Claude setup","claude workflow","next.js project","terminal commands"]},{"title":"Navigating Your Project with Claude Code","subtitle":"Finding and Understanding Feature Implementations","slug":"claude-code-navigating-your-project-with-claude-code","videoDuration":241,"releaseDate":null,"tags":["Claude code","codebase navigation","feature implementation","developer onboarding","code exploration","ai coding tools","code understanding","project navigation","software development","claude ai"]},{"title":"Using Claude Code in the Terminal and IDE","subtitle":"Setting Up the Claude Extension in VS Code, Cursor, or Windsurf","slug":"claude-code-using-claude-code-in-the-terminal-and-ide","videoDuration":262,"releaseDate":null,"tags":["claude code","terminal workflow","ide integration","vs code","cursor editor","windsurf","ai coding assistant","code setup","developer productivity","coding tools"]},{"title":"Slash Commands in Claude Code","subtitle":"How to Build and Use Slash Commands in Claude Code","slug":"claude-code-slash-commands","videoDuration":291,"releaseDate":null,"tags":["Claude code","slash commands","custom commands","workflow automation","create slash commands","coding shortcuts","developer productivity","markdown commands","Claude tutorial","ai coding tools"]}],"releaseDate":"2025-09-01","isFreeCourse":false,"isFeatured":true,"tags":["Claude Code","terminal","slash commands","hooks","parallel workflows","agentic workflows"],"promoUrl":null,"contentType":"Course","source":null}],"author":[{"name":"Vanh Roeung","jobTitle":"Developer","twitterHandle":"@VanhDesign","biography":{"biography":"Developer at Design+Code"},"avatar":{"fluid":{"src":"//images.ctfassets.net/ooa29xqb8tix/2anEzU2n2tP4f0kSZCLWb2/0358b4770ab46ed28f961cfb81a09b3b/Screenshot_2025-08-22_at_11.29.49â__AM.png?w=200&h=200&q=50"}},"location":"Montreal, Canada","slug":"instructor/vanh","chapter":[{"title":"Claude Code Crash Course on Agentic Workflows","slug":"claude-code","hoursOfVideo":1,"description":{"description":"This course teaches you how to use Claude Code efficiently with slash commands, hooks, parallel workflows, and more. You’ll learn the mindset of working with AI, simplify repetitive tasks and connect tools into one unified agentic workflow, giving you everything you need to go from idea to working app."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/1bYdUtniEAUH3jdqQd3Qc1/7cf21d20882bfe59f01d7bc74e81010d/react-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/39xkJS0CvrRBKgMnyLYBks/14d434f819fef062dce8c72efecbc74d/react-logo.png?w=400&q=50"}}],"releaseDate":"2025-09-01"},{"title":"Master Agentic Workflows","slug":"agentic-workflows","hoursOfVideo":2,"description":{"description":"In this course, you’ll learn how to add agents to your workflows. An agent workflow is more than just a simple automation. Instead of following a fixed script, agents can make decisions, adjust to changes, and figure out the best way to complete a task. We’ll start by exploring what MCP servers are and all the new possibilities they bring. Then, we’ll dive into agentic frameworks that make it easy to build flexible, helpful agents that can take care of your everyday tasks."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/7bIHb2z3qClO9GfyPwj6nP/4cb3a08cdc0d34645540b1295f96dc67/Logo_React.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/7bIHb2z3qClO9GfyPwj6nP/4cb3a08cdc0d34645540b1295f96dc67/Logo_React.png?w=400&q=50"}}],"releaseDate":"2025-04-29"},{"title":"Build a React Native app with Claude AI","slug":"react-native-ai","hoursOfVideo":14,"description":{"description":"This comprehensive course explores the integration of cutting-edge AI tools into the React Native development workflow, revolutionizing the approach to mobile application creation. Participants will learn to leverage AI-powered platforms such as Claude and Locofy to expedite coding processes, enhance problem-solving capabilities, and optimize productivity."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/66irryXYcTuNVwWnuuzYz5/6097d6a5f5bf4d44678566034879d2a1/logo-react-native.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/66irryXYcTuNVwWnuuzYz5/6097d6a5f5bf4d44678566034879d2a1/logo-react-native.png?w=400&q=50"}}],"releaseDate":"2024-09-17"}]}]},"en":{"title":"Using Claude Code in the Terminal and IDE","subtitle":"Setting Up the Claude Extension in VS Code, Cursor, or Windsurf","excerpt":{"markdown":{"html":"<p>Claude Code is flexible, you can run it entirely inside a terminal, or you can integrate it directly into your IDE. Both modes are useful, but the IDE integration offers a more intuitive and interactive workflow, especially if you’re already used to tools like Cursor or Windsurf.</p>","excerpt":"Claude Code is flexible, you can run it entirely inside a terminal, or you can integrate it directly into your IDE. Both modes are useful…"}},"content":{"markdown":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Terminal-Only Workflow"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Claude Code can run in a standalone terminal without any editor integration. This is often the simplest way to get started, and it’s especially powerful when you need to manage multiple processes. For example, you can have one terminal tab running your development server, another running tests, and another with Claude open, all at the same time."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Developers who prefer a “bare metal” workflow often like this mode because it keeps things lean and flexible."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"IDE Integration Workflow"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Claude becomes even more powerful when you integrate it into an IDE such as "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"VS Code, Cursor, or Windsurf"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you launch Claude from the integrated terminal inside your IDE, it will automatically detect the environment. If the Claude extension isn’t already installed, you’ll be prompted to install it. Once installed, restart your IDE if necessary, and you’ll see a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Claude Code panel or icon"}]},{"type":"text","value":" appear in the interface."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"At this point, you have two main ways to use Claude:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Inside the terminal at the bottom"}]},{"type":"text","value":" of the IDE, just as you would in a normal terminal."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Inside the Claude Code chat panel"}]},{"type":"text","value":", which you can open using the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Command + Escape"}]},{"type":"text","value":" shortcut."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This layout feels natural if you’re coming from Cursor or Windsurf:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Code in the center of the editor"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Claude panel on the right-hand side"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Terminal at the bottom"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can keep Claude always visible, move the panel around, or configure the layout however you like."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Why the IDE Workflow Feels Natural"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When Claude is integrated with your IDE, the experience mirrors what you may already be used to: an AI assistant panel that sits beside your code. You don’t have to juggle between tools — everything is in one place."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It also means that you can write code, run shell commands, and talk to Claude without ever leaving your editor. If you want speed and convenience, pressing "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Command + Escape"}]},{"type":"text","value":" instantly opens Claude inside the IDE, much faster than switching back and forth between terminal windows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Context Awareness"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"One of the best parts of IDE integration is that Claude becomes "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"aware of your current context"}]},{"type":"text","value":". It automatically knows what file you’re viewing, and even what text you’ve selected or highlighted."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This means you don’t need to constantly copy and paste code back and forth. You can simply highlight a function or a block of code and ask Claude questions directly, such as:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Refactor this function to make it more efficient."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Claude will use your selection as the context and respond with a refactored version."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"File Referencing Shortcuts"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Beyond selection, you can also quickly insert file references. A useful shortcut is "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Command + Option + K"}]},{"type":"text","value":" (on Mac). Pressing this will automatically insert the path of the file you’ve selected into your Claude prompt."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"@auth.js\nExplain how login is implemented in this file."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This ensures the file path is correct and saves you the time of typing it manually. It’s also great for when you’re dealing with complex folder structures where paths are long or easy to mistype."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Inline Diff Review"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When Claude suggests code changes, IDE integration allows you to view those changes as "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"inline diffs"}]},{"type":"text","value":". Instead of just reading text output in the terminal, you can see a side-by-side comparison inside your editor:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"On the left, the original code."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"On the right, Claude’s proposed changes."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This makes it much easier to review, accept, or reject suggestions, and helps you stay in full control of your code."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Full IDE Experience"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When combined, these features create a smooth and natural development experience:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"File explorer on the left"}]},{"type":"text","value":" → easy access to your project files"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Code editor in the center"}]},{"type":"text","value":" → where you write and review code"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Claude panel on the right"}]},{"type":"text","value":" → AI assistance, always available"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Terminal at the bottom"}]},{"type":"text","value":" → run dev servers, scripts, or other processes"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can click through files, edit code normally, and have Claude ready to explain, refactor, or enhance anything you’re working on."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"The Best of Both Worlds"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Using Claude inside an IDE gives you all the conveniences of a modern development environment, plus AI-powered assistance. You get:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Automatic context from your file or selection"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Quick file referencing with exact paths"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Inline diffs for easy review of code changes"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"An integrated AI chat panel accessible via shortcut"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"But remember, working directly in the terminal is still incredibly powerful. It’s often the better choice when you want to run multiple servers or keep everything script-driven."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The key is that Claude supports both workflows, terminal-first for flexibility, and IDE integration for speed, context, and an intuitive coding experience."}]}],"data":{"quirksMode":false}}}}},"contentfulChapter":{"test":null,"metadata":{"title":"Claude Code Crash Course on Agentic Workflows","slug":"claude-code","description":"This course teaches you how to use Claude Code efficiently with slash commands, hooks, parallel workflows, and more. You’ll learn the mindset of working with AI, simplify repetitive tasks and connect tools into one unified agentic workflow.","keywords":"claude code, agentic workflow, slash command, hooks, parallel workflows, ","image":"https://www.dropbox.com/scl/fi/nlvmlv8l7ss5wr2blrwzk/claude-code.jpg?rlkey=blzzwn00ujon53e0xlwwswxa6&dl=0"}},"contentfulMetadata":{"title":"Claude Code Crash Course on Agentic Workflows","slug":"claude-code","description":"This course teaches you how to use Claude Code efficiently with slash commands, hooks, parallel workflows, and more. You’ll learn the mindset of working with AI, simplify repetitive tasks and connect tools into one unified agentic workflow.","keywords":"claude code, agentic workflow, slash command, hooks, parallel workflows, ","image":"https://www.dropbox.com/scl/fi/nlvmlv8l7ss5wr2blrwzk/claude-code.jpg?rlkey=blzzwn00ujon53e0xlwwswxa6&dl=0"}},"pageContext":{"slug":"claude-code-using-claude-code-in-the-terminal-and-ide","contentType":"Courses","isCourse":true,"isLivestream":false,"isTutorial":false,"chapterSlug":"claude-code"}}}