Chapter 3: Setting Up Your AI Coding Workbench

Your Digital Workshop: Visual Studio Code and Beyond

Just as a craftsman needs a well-equipped workshop, a programmer needs a robust and efficient development environment. For JavaScript development, especially when working with AI-assisted code generation, Visual Studio Code (VS Code) is an excellent choice. It's free, open-source, highly customizable, and packed with features that will make your coding journey smoother. This chapter will guide you through setting up VS Code and its essential extensions, transforming your computer into a powerful AI coding workbench.

Why Visual Studio Code?

VS Code has become the go-to code editor for millions of developers for several reasons:

Lightweight and Fast: It starts quickly and runs efficiently, even on less powerful machines.
Free and Open Source: Accessible to everyone, with a large and active community.
Cross-Platform: Available on Windows, macOS, and Linux.
Extensible: A vast marketplace of extensions allows you to add features for almost any programming language or task.
Built-in Features: Includes integrated terminal, Git control, and a powerful debugger.
IntelliSense: Provides smart completions based on variable types, function definitions, and imported modules, making coding faster and reducing errors.

Step-by-Step Setup: Getting Started with VS Code

Step 1: Download and Install VS Code

1. Go to the Official Website: Open your web browser and navigate to code.visualstudio.com.

2. Download: Click the prominent "Download" button for your operating system (Windows, macOS, or Linux).

3. Install: Once the download is complete, run the installer. Follow the on-screen prompts. For most users, the default options are fine. On macOS, you might just drag the application to your Applications folder.

Step 2: Install Essential Extensions

Extensions add powerful capabilities to VS Code. Here are a few crucial ones for JavaScript development and AI-assisted coding:

1. Open the Extensions View: In VS Code, click on the Extensions icon in the Activity Bar on the side (it looks like four squares, one of which is detached) or press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS).

2. Search and Install: In the search bar at the top of the Extensions view, type the name of the extension and click "Install" next to the correct one.

Prettier - Code formatter: This extension automatically formats your code to be consistent and readable. It saves you time and helps maintain a clean codebase.
Why it helps: AI-generated code might not always follow your preferred formatting. Prettier ensures everything looks neat.

ESLint: A linter that analyzes your code for potential errors, bugs, stylistic issues, and suspicious constructs. It helps you write higher-quality JavaScript.
Why it helps: Catches common JavaScript mistakes and enforces best practices, complementing AI-generated code by ensuring it meets quality standards.

Live Server: Launches a local development server with a live reload feature for static and dynamic pages. Any changes you make to your HTML, CSS, or JavaScript files will automatically update in your browser.
Why it helps: Speeds up your development workflow by showing changes instantly without manual refreshing.

Node Essentials: Essential extensions for node development and collaboration.
Why it helps: Speeds up your development workflow by by allowing you to test Node.js without installing it.

GitHub Copilot (or similar AI coding assistant): While this book teaches you how* to prompt, having an AI coding assistant integrated directly into your editor can provide real-time suggestions and completions. (Note: Some AI coding assistants may require a subscription or account setup).

Why it helps: Provides immediate feedback and code suggestions as you type, making the prompting process more interactive.

Step 3: Configure VS Code (Optional but Recommended)

VS Code is highly configurable. You can access settings by going to File > Preferences > Settings (Windows/Linux) or Code > Settings > Settings (macOS) or by pressing Ctrl+, (Windows/Linux) or Cmd+, (macOS).

Default Formatter: Set Prettier as your default formatter.

1. Search for "Default Formatter".

2. Select "Prettier - Code formatter" from the dropdown.

3. Enable "Format On Save" by searching for it and checking the box.

Auto Save: Ensure your work is saved automatically.

1. Search for "Auto Save".

2. Select "onFocusChange" or "afterDelay" from the dropdown.

Your First JavaScript File in VS Code

Let's create a simple JavaScript file to test your setup.

1. Create a New Folder: On your desktop or in your documents, create a new folder named my-first-js-project.

2. Open Folder in VS Code: In VS Code, go to File > Open Folder... and select the my-first-js-project folder you just created.

3. Create a New File: In the VS Code Explorer (the left sidebar), click the "New File" icon (a blank page with a plus sign) and name the file app.js.

4. Write Some Code: Type the following JavaScript code into app.js:

// javascript

// app.js

console.log("Hello, AI-Assisted Coding!");

function greet(name) {

return `Hello, ${name}!`;

}

const message = greet("Developer");

console.log(message);

5. Run in Terminal:

Open the integrated terminal in VS Code by going to Terminal > New Terminal or pressing Ctrl+`.
In the terminal, type node app.js and press Enter.
You should see the output:


        Hello, AI-Assisted Coding!

       Hello, Developer!

If you don't get that or you get some other error you have an AI tool to help you.
Make sure you are getting the result expected before you move on.

Some people have trouble finding the `. It's not a single quote ' it's a back-tick `.
On most keywboards it's found under the esc key with the ~.
Computers are pedantic, they expect complete instructions and 100% accurate symbols.
Unfortunately, some fonts display both the back-tick and the single quote the same way,
but the program using them knows the difference. The VS Code editing environment displays them correctly.

Conclusion: Ready for Action

With Visual Studio Code set up and essential extensions installed, you now have a powerful and comfortable environment for writing, testing, and debugging your JavaScript code. This workbench will be your primary tool as you continue to explore the exciting world of AI-assisted development. In the next chapter, we will dive deeper into the language of AI itself: prompt engineering.

---

References:

← Previous Chapter

Table of Contents

Next Chapter →