📝Code Editors & VS Code Setup

What Is a Code Editor?

A code editor is a specialized text application designed for writing and editing programming code. Unlike a word processor such as Microsoft Word or Google Docs, a code editor does not add hidden formatting, fonts, or layout metadata to your files. It works with plain text only.

Why You Cannot Use a Word Processor

When you type in Microsoft Word and save the file, Word stores much more than just the characters you typed. It embeds font information, paragraph styles, page margins, XML metadata, and binary data. If you tried to save a Python script as a .docx file and then run it, the interpreter would choke on all that invisible formatting.

Code editors save files as pure plain text — exactly the bytes you see on the screen, nothing more. That is what compilers, interpreters, and browsers expect.

Key Differences at a Glance

---

Popular Code Editors

There are many code editors available. Here are the most common ones you will encounter:

1. Visual Studio Code (VS Code)

• Developer: Microsoft (open-source)
• Price: Free
• Platforms: Windows, macOS, Linux
• Why popular: Huge extension marketplace, built-in terminal, Git integration, IntelliSense auto-completion, massive community.

2. Sublime Text

• Price: Free to evaluate, license costs around $99
• Strength: Extremely fast and lightweight
• Weakness: Fewer built-in features — you need plugins for most things

3. Vim / Neovim

• Price: Free
• Strength: Runs in the terminal, extremely powerful once mastered
• Weakness: Very steep learning curve — the editor is entirely keyboard-driven

4. Notepad++

• Price: Free (Windows only)
• Strength: Simple and lightweight
• Weakness: No built-in terminal, limited extension ecosystem

5. JetBrains IDEs (PyCharm, WebStorm, IntelliJ)

• Price: Free community editions, paid professional editions
• Strength: Deep language-specific intelligence
• Weakness: Heavy on system resources, can be overwhelming for beginners

---

Why We Recommend VS Code

For beginners, Visual Studio Code is the best starting point:

1. Free and open-source — no license fees, no trial periods.
2. Cross-platform — identical experience on Windows, macOS, and Linux.
3. Built-in terminal — run your code without leaving the editor.
4. Extension marketplace — thousands of extensions for every language and workflow.
5. Massive community — easy to find tutorials, answers, and help online.
6. Git integration — version control built right into the sidebar.
7. IntelliSense — smart auto-completion, parameter hints, and quick info.
8. Lightweight — starts fast compared to full IDEs like PyCharm.

VS Code is used by over 70% of professional developers according to the Stack Overflow Developer Survey. Learning it now gives you a skill you will use throughout your career.

---

Installing VS Code

On macOS

1. Open your browser and go to https://code.visualstudio.com.
2. Click the large Download for Mac button.
3. A .zip file will download. Open your Downloads folder.
4. Double-click the .zip file to extract it.
5. Drag Visual Studio Code.app into your Applications folder.
6. Open Launchpad or Spotlight (Cmd + Space) and type "Visual Studio Code".
7. Click to launch. On first launch macOS may ask you to confirm — click Open.

Optional — Add to PATH:

Open VS Code, press Cmd + Shift + P to open the Command Palette, type "Shell Command: Install 'code' command in PATH", and press Enter. Now you can open any folder from Terminal by typing:

On Windows

1. Go to https://code.visualstudio.com.
2. Click Download for Windows.
3. Run the downloaded .exe installer.
4. Accept the license agreement.
5. Important: Check the box that says "Add to PATH" during installation.
6. Check "Register Code as an editor for supported file types".
7. Click Install and wait for it to finish.
8. Click Finish to launch VS Code.

After installation you can open any folder from Command Prompt or PowerShell:

On Linux (Ubuntu / Debian)

Or simply download the .deb file from the website and run:

---

First Look at the VS Code Interface

When you open VS Code for the first time, here is what you see:

The Activity Bar (Left Edge)

A vertical strip of icons on the far left. Each icon opens a different panel:

• Explorer (files icon) — browse your project files and folders
• Search (magnifying glass) — find and replace across your project
• Source Control (branch icon) — Git integration
• Run and Debug (play icon) — run and debug your code
• Extensions (squares icon) — install and manage extensions

The Side Bar

When you click an Activity Bar icon, the Side Bar expands to show that panel's content. For example, clicking Explorer shows your file tree.

The Editor Area (Center)

This is where you write code. You can open multiple files in tabs, split the editor into side-by-side panes, and even preview Markdown files.

The Panel (Bottom)

The bottom panel contains:

• Terminal — a full command-line terminal
• Output — logs from extensions and tasks
• Problems — errors and warnings in your code
• Debug Console — interactive debugging output

The Status Bar (Very Bottom)

A thin bar showing your current branch, line/column number, file encoding, language mode, and more.

---

Creating Your First File

1. Open VS Code.
2. Click File > New File (or press Ctrl+N / Cmd+N).
3. Type the following code:

4. Save the file: press Ctrl+S / Cmd+S.
5. In the save dialog, name it my_first_file.py and choose a location.
6. Notice that VS Code now applies syntax highlighting — the comment is a different color from the function name and the string.

Running the File

Open the built-in terminal (Ctrl+\`` or Cmd+``) and type:

You should see:

Hello from VS Code!

---

Essential Extensions to Install

Extensions add superpowers to VS Code. Here are the must-haves for beginners:

How to Install an Extension

1. Click the Extensions icon in the Activity Bar (or press Ctrl+Shift+X / Cmd+Shift+X).
2. Type the extension name in the search box.
3. Click Install.

Recommended Extensions

---

Changing the Theme

A good theme reduces eye strain and makes code easier to read.

1. Press Ctrl+K Ctrl+T (or Cmd+K Cmd+T on Mac).
2. A dropdown appears with all installed themes.
3. Use the arrow keys to preview each theme in real time.
4. Press Enter to select.

Popular themes to try:

• One Dark Pro — the beloved Atom editor theme
• Dracula Official — soft purple dark theme
• GitHub Theme — light or dark, matches GitHub's look
• Night Owl — designed for night coding with reduced blue light
• Monokai Pro — a classic developer favorite

---

Opening a Folder (Workspace)

Instead of opening individual files, you should open an entire folder as your workspace. This lets VS Code understand your project structure.

From the Menu

1. Click File > Open Folder (or Ctrl+K Ctrl+O / Cmd+K Cmd+O).
2. Navigate to your project folder and click Open.

From the Terminal

Once a folder is open, the Explorer panel shows all files and subfolders. You can create, rename, delete, and move files directly in the Explorer.

---

Using the Built-in Terminal

One of the most powerful features of VS Code is the integrated terminal.

Opening the Terminal

• Press Ctrl+\`` (or Cmd+`` on Mac)
• Or click Terminal > New Terminal from the menu

Key Terminal Features

• The terminal opens inside your project folder automatically.
• You can have multiple terminals — click the + icon to add more.
• You can split terminals side by side.
• You can switch between terminals using the dropdown.
• The terminal supports your default shell (bash, zsh, PowerShell, etc.).

Example Workflow

You never need to leave VS Code. Write code in the editor, run it in the terminal, see errors in the Problems panel — all in one window.

---

Essential Keyboard Shortcuts

Learning keyboard shortcuts makes you dramatically faster. Here are the most important ones:

General

Navigation

Editing

Tip: Print or bookmark this list. You do not need to memorize everything at once — learn one or two new shortcuts each week.

---

Creating a Project Folder Structure

Professional projects follow organized folder structures. Here is a common pattern:

my-project/ ├── src/ │ ├── main.py │ ├── utils.py │ └── config.py ├── tests/ │ ├── test_main.py │ └── test_utils.py ├── docs/ │ └── README.md ├── .gitignore └── requirements.txt

Creating This Structure in VS Code

Method 1 — Using the Explorer panel:

1. Open your project folder in VS Code.
2. Hover over the Explorer panel and click the New Folder icon.
3. Create src, tests, and docs folders.
4. Click the New File icon inside each folder to create the files.

Method 2 — Using the terminal:

What Each Folder Is For

---

Summary

• A code editor works with plain text — never use a word processor for code.
• VS Code is the most popular free code editor with a rich extension ecosystem.
• Install VS Code from code.visualstudio.com for your operating system.
• The interface has five key areas: Activity Bar, Side Bar, Editor, Panel, and Status Bar.
• Install essential extensions like Python, Prettier, and a good theme.
• Always open a folder (workspace), not individual files.
• Use the built-in terminal to run your code without leaving the editor.
• Learn keyboard shortcuts gradually — even a few will speed up your workflow.
• Organize your projects with a clean folder structure from the start.

You now have a professional development environment ready to go. In the next lesson, you will use this setup to write and run real programs.