Coding is changing fast — and one of the biggest game-changers is the rise of AI-assisted development. Whether you’re building websites, editing HTML, or maintaining client projects, tools like Visual Studio Code (VS Code) now let you collaborate with AI to write, review, and update your code in seconds.
In this article, I’ll walk you through how to use Visual Studio Code with AI to make quick edits — just like in my video where we remove a form and update an email address with almost no manual coding required.
Why Visual Studio Code?
Visual Studio Code (VS Code) has become the go-to code editor for developers worldwide — and for good reason. It’s lightweight, customizable, and integrates beautifully with extensions and AI-powered tools. Whether you’re coding in HTML, CSS, JavaScript, Python, or any other language, VS Code gives you everything you need in one place.
A few reasons developers love VS Code:
- Free and open source – available for Windows, macOS, and Linux.
- Extremely fast – starts up quickly and handles large projects easily.
- Customizable – thousands of extensions for every workflow.
- Built-in Git support – commit, push, and pull without leaving the editor.
- AI-ready – integrates seamlessly with tools like GitHub Copilot and ChatGPT-powered extensions.
Step-by-Step: How to Edit Code with AI in VS Code
In my video, I demonstrate how simple it is to update a client’s HTML file with the help of AI. Here’s how you can do it yourself.
1. Open Your Project
Launch Visual Studio Code and open the folder that contains your web files. In this example, we’re working with an HTML file that includes a contact form and an email address.
2. Identify What Needs to Change
Our client asked us to:
- Remove the form, and
- Update the email from
ads@example.comtoinfo@example.com.
These are small changes — but perfect for letting AI show its power.
3. Use the AI Chat
With AI tools integrated in VS Code, such as GitHub Copilot Chat or an OpenAI extension, you can open a chat panel directly inside the editor.
Simply type your request, for example:
“Remove the contact form and update the email address from ads@example.com to info@example.com.”
The AI reads your code and generates an exact plan to make those edits.
4. Review the AI’s Suggestions
Before applying the changes, VS Code highlights what will happen:
- Red lines show what’s being removed.
- Green lines show what’s being added.
This allows you to double-check everything before confirming.
5. Apply and Save
Once you’re happy with the preview, click Keep Changes. In a few seconds, your HTML file updates automatically — no manual edits, no typos, no missed lines. Just clean, efficient code.
The Benefits of Coding with AI
Using AI inside VS Code isn’t just about saving time — it’s about improving your workflow:
- Fewer mistakes: AI can spot missing tags or inconsistencies instantly.
- Faster debugging: Explain an error and get suggested fixes right away.
- Smarter learning: Beginners can ask AI to explain code, syntax, or logic.
- Better productivity: Spend less time on repetitive edits and more on creative work.
Final Thoughts
Visual Studio Code has always been powerful — but when you pair it with AI, it becomes incredible. What used to take minutes (or hours) can now be done in seconds, with a clear preview of every change.
If you want to see this in action, check out the video below where I demonstrate how AI in VS Code effortlessly removes a form and updates an email field.
👉 Subscribe for more tips, tutorials, and AI-powered coding tricks that will level up your workflow.
