Python Full Stack Web Developer Course

Week 1, Monday: Introduction to Code Editors (VS Code)

The Developer's Primary Tool

Welcome to our exploration of code editors—specifically, Visual Studio Code (VS Code). As a developer, your code editor is perhaps the most important tool in your arsenal. You'll spend thousands of hours working within this environment, so understanding how to use it effectively is crucial to your productivity and enjoyment as a programmer.

Think of a code editor as a craftsperson's workshop. Just as a carpenter needs a well-organized space with quality tools arranged for maximum efficiency, a developer needs an editor that supports their workflow, enhances their capabilities, and reduces friction in the coding process.

In this session, we'll focus on Visual Studio Code (VS Code), which has become the most popular code editor among web developers due to its balance of performance, features, and extensibility. By the end of this session, you'll be comfortable with VS Code's interface, key features, and customization options—setting you up for success throughout this course and your development career.

What Is a Code Editor?

Before diving into VS Code specifically, let's clarify what a code editor is and how it differs from related tools.

Code Editors vs. Text Editors

A text editor is any program that can edit plain text files. Notepad (Windows), TextEdit (macOS), and gedit (Linux) are examples of basic text editors. While you can write code in these programs, they lack specialized features for programming.

A code editor, by contrast, is specifically designed for writing and editing code, with features like:

The relationship between text editors and code editors is like the difference between a basic kitchen knife and a chef's knife set—both can cut food, but the specialized tools make the process more efficient and the results more precise.

Code Editors vs. IDEs

An Integrated Development Environment (IDE) takes things a step further by combining a code editor with additional tools like:

Traditional IDEs include Visual Studio (not to be confused with VS Code), PyCharm, Eclipse, and IntelliJ IDEA. They're typically more powerful but also heavier and more resource-intensive.

VS Code blurs the line between code editor and IDE. It starts as a lightweight code editor, but through extensions, it can incorporate many IDE-like features. This makes it extremely versatile—you can keep it lean for simple projects or expand its capabilities for complex ones.

If a code editor is like a chef's knife set, an IDE is like a fully equipped commercial kitchen—more powerful but requiring more space and setup time.

Popular Code Editors

While VS Code has become dominant, other popular code editors include:

We're focusing on VS Code because of its dominant position in the industry, particularly for web development, and its excellent support for Python, JavaScript, HTML, CSS, and other languages we'll use in this course.

Why VS Code?

Visual Studio Code has risen to prominence for several compelling reasons:

Open Source and Free

VS Code is open-source and free to use, even in commercial settings. This has helped drive widespread adoption across different types of development teams and individual developers.

Cross-Platform

VS Code runs identically on Windows, macOS, and Linux. This consistency is particularly valuable in today's development landscape, where many tools and projects need to work across different operating systems.

Performance

Despite its rich feature set, VS Code maintains impressive performance. It launches quickly and handles large files and projects efficiently, striking a balance between capability and resource usage.

Extensibility

Perhaps VS Code's greatest strength is its extension system. The VS Code Marketplace offers thousands of extensions that can add language support, themes, debugging capabilities, and integrations with other tools and services.

This extensibility is like having a modular workshop where you can add exactly the tools you need for each project, without cluttering your space with unused equipment.

Intelligent Features

VS Code includes built-in IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules. It also offers intelligent code navigation, refactoring tools, and integrated Git support.

Monthly Updates

Microsoft releases updates to VS Code monthly, continuously adding features, fixing bugs, and improving performance. This regular update cycle keeps the editor current with evolving development practices.

Strong Community and Documentation

VS Code has an active community contributing extensions, themes, and support. Microsoft also provides excellent documentation, tutorials, and video guides for getting started and mastering advanced features.

Industry Adoption

According to the 2021 Stack Overflow Developer Survey, VS Code is the most popular development environment, used by approximately 71% of professional developers. This widespread adoption means that skills you develop with VS Code will be relevant in most professional settings.

Installing VS Code

Let's begin by installing VS Code on your system:

System Requirements

VS Code has modest requirements:

Download and Installation

  1. Visit the VS Code website
  2. Click the download button for your operating system
  3. Run the installer and follow the prompts

Platform-Specific Notes

Windows
macOS
Linux

Verifying Installation

After installation, launch VS Code:

From the terminal on any platform (if PATH integration is enabled): 


# Open VS Code
code

# Open current directory in VS Code
code .

# Open a specific file
code filename.py

# Open a specific folder
code /path/to/folder

VS Code Interface Overview

Let's explore the main components of the VS Code interface:

Activity Bar

The vertical bar on the far left provides access to different views:

Think of the Activity Bar as the main navigation system for your workshop—it helps you switch between different work areas depending on what you're trying to accomplish.

Side Bar

The panel that opens from the Activity Bar, showing content relevant to the selected activity. For example, when the Explorer is selected, the Side Bar shows your project's file structure.

The Side Bar is like your workbench—the place where you organize materials and tools for your current task.

Editor Group

The main area where you edit files. VS Code supports multiple editor groups, allowing you to view and edit multiple files side by side.

The Editor Group is your primary work surface—where you actually shape and craft your code.

Panel

The bottom panel can show different tools:

The Panel is like your testing area—where you run tools, check for errors, and see the results of your work.

Status Bar

The bar at the bottom of the window shows contextual information:

The Status Bar is like your workshop's information display—providing at-a-glance status updates without interrupting your flow.

Command Palette

Access VS Code's command palette with Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac). This powerful tool provides access to virtually all VS Code's functionality through a searchable interface.

The Command Palette is like having an assistant who can fetch any tool or perform any action in your workshop just by asking for it—an invaluable time-saver.

Essential VS Code Features

Let's explore some of the key features that make VS Code powerful for daily development:

Syntax Highlighting

VS Code automatically colorizes code based on its syntax, making it easier to read and understand. The editor identifies language-specific keywords, strings, comments, and other elements and applies consistent coloring.

Syntax highlighting is like color-coding different types of components in your workshop—instantly making it clear what each piece does.

IntelliSense

IntelliSense provides intelligent code completion, parameter info, quick info, and member lists based on the language you're using and the context of your code. 


# Example: When typing in Python, IntelliSense suggests methods
# After typing "string." VS Code shows available string methods
string.up  # IntelliSense suggests upper(), uppercase(), etc.

IntelliSense is like having an expert whispering suggestions in your ear—helping you remember function names, parameters, and available options without breaking your flow.

Multiple Cursors and Selection

VS Code allows you to place multiple cursors in different locations, enabling simultaneous editing:

Multiple cursors are like having several pairs of hands working simultaneously—dramatically speeding up repetitive edits.

Code Navigation

VS Code offers powerful navigation features:

These navigation features are like having a detailed map and teleportation device for your codebase—allowing you to instantly jump to exactly what you're looking for.

Integrated Terminal

VS Code includes a fully-featured terminal that you can open with:

The integrated terminal allows you to:

The integrated terminal is like having a command center built right into your workshop—no need to step outside to issue commands or check results.

File and Folder Management

The Explorer view (accessible via the first icon in the Activity Bar) allows you to:

Right-clicking in the Explorer provides a context menu with additional options.

The Explorer is like having a well-organized filing system for your project materials—allowing you to quickly locate and manage everything related to your work.

Search and Replace

VS Code offers powerful search capabilities:

The search functionality supports:

Search and replace capabilities are like having a super-powered detector that can find any piece of code in your project, no matter where it's hiding.

Split Editing

You can split the editor to view and edit multiple files simultaneously:

Split editing is like having multiple workbenches side by side—perfect for comparing code, referencing documentation while coding, or working on related files simultaneously.

Extending VS Code with Extensions

One of VS Code's greatest strengths is its extensibility. Let's explore how to find, install, and use extensions to enhance your development experience.

What Are Extensions?

Extensions are add-ons that enhance VS Code with additional features, language support, themes, and integrations. They're like specialized tools you can add to your workshop as needed.

Accessing the Extensions View

Access the Extensions view through:

Finding and Installing Extensions

In the Extensions view:

  1. Search for extensions by name, category, or functionality
  2. Browse featured, popular, or recommended extensions
  3. Click the "Install" button on an extension to add it
  4. Some extensions may require reloading VS Code after installation

Managing Extensions

The Extensions view allows you to:

Essential Extensions for Python Web Development

Here are some recommended extensions for our course:

Python Development
Web Development
General Productivity
Themes and Visual Enhancements

Extension Settings

Most extensions provide settings that you can customize:

  1. Go to File > Preferences > Settings (or Ctrl+,)
  2. Search for the extension name
  3. Adjust available settings to your preference

Some extensions add their own commands to the Command Palette or their own views to the Activity Bar.

Customizing VS Code

VS Code is highly customizable, allowing you to tailor the editor to your preferences and workflow.

Settings

Access settings through:

VS Code offers two ways to modify settings:

Settings can be applied at two levels:

Common settings to consider customizing: 


// Basic editor appearance
"editor.fontSize": 14,
"editor.fontFamily": "Consolas, 'Courier New', monospace",
"editor.lineHeight": 24,
"editor.minimap.enabled": false,

// Behavior
"editor.formatOnSave": true,
"editor.tabSize": 4,
"editor.insertSpaces": true,
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,

// Terminal
"terminal.integrated.fontSize": 14,
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",

// Language-specific settings
"[python]": {
    "editor.tabSize": 4,
    "editor.formatOnSave": true
},
"[javascript]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Themes

VS Code allows you to customize both the color theme (syntax highlighting and UI colors) and file icon theme:

VS Code comes with several built-in themes (Light, Dark, High Contrast), and you can install more from the Extensions view.

Keyboard Shortcuts

Customize keyboard shortcuts through:

The keyboard shortcuts editor allows you to:

You can also define keybindings in a keybindings.json file for more advanced configurations.

User Snippets

Create your own code snippets for frequently used code patterns:

  1. File > Preferences > User Snippets
  2. Select a language or create a new global snippet file
  3. Define snippets using the JSON format

Here's an example Python snippet: 


{
    "Print debug": {
        "prefix": "pdb",
        "body": [
            "print(f\"DEBUG: ${1:variable} = {${1:variable}}\")"
        ],
        "description": "Print a debug statement with variable name and value"
    },
    "Flask route": {
        "prefix": "froute",
        "body": [
            "@app.route('/${1:path}', methods=['${2:GET}'])",
            "def ${3:function_name}():",
            "    ${4:pass}"
        ],
        "description": "Create a new Flask route"
    }
}

After creating a snippet, you can trigger it by typing the prefix and pressing Tab or Enter.

Workspace Customization

VS Code workspaces allow you to save and restore complex project setups:

To create a workspace:

  1. File > Add Folder to Workspace (add one or more folders)
  2. File > Save Workspace As (save the configuration with a .code-workspace extension)

Workspace files are JSON and can be edited directly to customize advanced settings.

Practical Workflows

Let's explore some practical workflows that will make you more productive in VS Code.

Effective Code Navigation

Moving around your codebase efficiently is crucial for productivity. Try these techniques:

Editing Techniques

These editing techniques can significantly speed up your coding:

Git Integration

VS Code's built-in Git integration provides a smooth workflow:

The GitLens extension adds even more powerful Git features.

Debugging Workflow

VS Code's debugging capabilities are powerful for finding and fixing issues:

  1. Set Breakpoints:
    • Click in the gutter next to line numbers
    • Set conditional breakpoints by right-clicking the gutter
  2. Configure Debug Settings:
    • Create or modify launch.json for your project
    • Select run configuration from the debug dropdown
  3. Start Debugging:
    • Press F5 or click the green play button
  4. Use Debug Controls:
    • Continue (F5), Step Over (F10), Step Into (F11), Step Out (Shift+F11)
    • Examine variables in the Variables pane
    • Use the Debug Console to evaluate expressions
    • View the call stack

For Python, ensure you have the Python extension installed and configured with the correct interpreter.

Integrated Terminal Workflow

The integrated terminal is perfect for running commands without leaving VS Code:

Tip: You can run tasks defined in tasks.json using the Command Palette ("Tasks: Run Task").

Setting Up VS Code for Python Development

Let's configure VS Code specifically for Python development, which will be our primary focus in this course.

Installing the Python Extension

  1. Open VS Code
  2. Go to the Extensions view (Ctrl+Shift+X)
  3. Search for "Python"
  4. Install the "Python" extension by Microsoft
  5. Also install "Pylance" for enhanced language features

Selecting a Python Interpreter

VS Code needs to know which Python installation to use:

  1. Open the Command Palette (Ctrl+Shift+P)
  2. Type and select "Python: Select Interpreter"
  3. Choose from the available Python installations

The selected interpreter appears in the status bar and is used for IntelliSense, linting, and debugging.

Working with Virtual Environments

Virtual environments are essential for Python development: 


# Creating a virtual environment (in terminal)
python -m venv .venv

# Activating the environment
# On Windows:
.venv\Scripts\activate

# On macOS/Linux:
source .venv/bin/activate

# VS Code will detect the virtual environment and ask if you want to use it

VS Code integrates well with virtual environments:

Running Python Code

There are several ways to run Python code in VS Code:

Python Linting and Formatting

Configure linting and formatting for consistent code quality:

Example settings.json for Python development: 


{
    "python.linting.enabled": true,
    "python.linting.pylintEnabled": true,
    "python.linting.flake8Enabled": false,
    "python.formatting.provider": "black",
    "python.formatting.blackArgs": ["--line-length", "88"],
    "editor.formatOnSave": true,
    "python.analysis.typeCheckingMode": "basic",
    "[python]": {
        "editor.defaultFormatter": "ms-python.python",
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
            "source.organizeImports": true
        }
    }
}

Python Debugging

VS Code offers robust Python debugging:

  1. Set breakpoints by clicking in the gutter
  2. Press F5 to start debugging the current file
  3. Use the Debug toolbar to control execution:
    • Continue (F5)
    • Step Over (F10)
    • Step Into (F11)
    • Step Out (Shift+F11)
    • Restart (Ctrl+Shift+F5)
    • Stop (Shift+F5)
  4. Inspect variables in the Variables pane
  5. Use the Debug Console to execute code in the current context

For more complex projects, configure launch.json with custom debug configurations.

Setting Up VS Code for Web Development

Since we're focusing on full stack development, let's also configure VS Code for HTML, CSS, and JavaScript.

Essential Web Development Extensions

HTML Development Features

VS Code has built-in support for HTML:

CSS Development Features

CSS editing is enhanced with:

JavaScript Development Features

JavaScript support includes:

Web Development Workflow

A typical web development workflow in VS Code:

  1. Create HTML, CSS, and JavaScript files
  2. Use Emmet to quickly write HTML structure
  3. Start Live Server to preview in browser
  4. Make changes and see real-time updates
  5. Use built-in tools to debug JavaScript
  6. Format documents with Prettier

Example settings.json for web development: 


{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.printWidth": 100,
    "prettier.tabWidth": 2,
    "prettier.singleQuote": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

VS Code Tips and Tricks

Here are some lesser-known features and productivity boosters for VS Code:

Command Palette Power

The Command Palette (Ctrl+Shift+P) is more powerful than most realize:

Zen Mode and Focus

Remove distractions with VS Code's focus features:

Integrated Task Running

Automate repetitive tasks:

  1. Create a tasks.json file in the .vscode folder
  2. Define custom tasks for building, testing, deploying, etc.
  3. Run tasks from the Command Palette with "Tasks: Run Task"
  4. Bind tasks to keyboard shortcuts

// Example tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Run Current Python File",
            "type": "shell",
            "command": "python",
            "args": ["${file}"],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "label": "Start Flask Server",
            "type": "shell",
            "command": "flask",
            "args": ["run"],
            "options": {
                "env": {
                    "FLASK_APP": "app.py",
                    "FLASK_ENV": "development"
                }
            }
        }
    ]
}

Multicursor and Selection Techniques

Beyond the basics, try these multicursor techniques:

Terminal Tricks

Make the most of the integrated terminal:

Workspace Organization

For complex projects:

Performance Optimization

Keep VS Code running smoothly: 


// Performance-related settings
{
    "files.exclude": {
        "**/.git": true,
        "**/node_modules": true,
        "**/__pycache__": true
    },
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/*.code-search": true,
        "**/venv": true,
        "**/.venv": true
    },
    "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/**": true,
        "**/.venv/**": true
    }
}

Troubleshooting Common Issues

Even the best tools sometimes have issues. Here's how to handle common VS Code problems:

Extension Problems

Performance Issues

Language Service Issues

Git Integration Problems

Debugging Issues

Getting Help

When you encounter issues that you can't resolve:

The Future of VS Code

VS Code continues to evolve with monthly updates. Here are some trends and upcoming features to watch:

AI-Assisted Development

VS Code is increasingly incorporating AI to help developers:

These AI assistants are like having an experienced pair programmer constantly at your side, suggesting improvements and spotting potential issues.

Remote Development

VS Code is expanding its remote development capabilities:

These tools enable you to work in consistent, powerful environments regardless of your local machine's capabilities.

Collaborative Editing

Real-time collaboration features are increasingly important:

These features transform VS Code from a solo workspace into a collaborative environment, like turning an individual workshop into a shared studio.

Web-Based Editing

VS Code is becoming available in more contexts:

These web-based options allow you to code from any device with a browser, further breaking down the barriers to development.

Practical Exercise: VS Code Setup and Exploration

Let's put what we've learned into practice with a hands-on exercise:

Exercise Setup

  1. Ensure VS Code is installed on your system
  2. Create a new folder called "vscode-practice" on your desktop
  3. Open VS Code and use File > Open Folder to open this folder

Task 1: Basic Editor Skills

  1. Create a new file called "index.html" (File > New File)
  2. Type "!" and press Tab to generate an HTML boilerplate
  3. Inside the body tag, add a heading and paragraph of your choice
  4. Practice using multiple cursors: add a class to both your heading and paragraph
  5. Use keyboard shortcuts to duplicate lines, move lines, and delete lines
  6. Save the file (Ctrl+S)

Task 2: Extension Installation

  1. Open the Extensions view (Ctrl+Shift+X)
  2. Search for and install "Live Server"
  3. Right-click on index.html in the Explorer view and select "Open with Live Server"
  4. Observe how changes to the file are automatically reflected in the browser

Task 3: Python Setup

  1. Install the Python extension if not already installed
  2. Create a new file called "app.py"
  3. Add the following Python code: 
    
def greet(name):
    """
    Returns a greeting message for the provided name.
    """
    return f"Hello, {name}! Welcome to VS Code."

def main():
    user_name = input("Please enter your name: ")
    message = greet(user_name)
    print(message)
    
    # TODO: Add more functionality here

if __name__ == "__main__":
    main()
  4. Practice using VS Code features:
    • Hover over function names to see their docstrings
    • Use F12 to navigate to function definitions
    • Use the "Problems" tab to see any issues
    • Run the Python file using the play button in the top-right

Task 4: Terminal and Git

  1. Open the integrated terminal (Ctrl+`)
  2. Initialize a Git repository in your folder: 
    
git init
  3. Notice how the Source Control icon in the Activity Bar now shows changes
  4. Click the Source Control icon to see your changes
  5. Stage your files by clicking the + icon next to each file
  6. Add a commit message and commit your changes

Task 5: Customization

  1. Open settings (Ctrl+,)
  2. Try changing a few settings:
    • Change the color theme (Color Theme in the search box)
    • Adjust the font size (Font Size in the search box)
    • Enable word wrap (Word Wrap in the search box)
  3. Create a custom snippet:
    • File > Preferences > User Snippets
    • Select "python.json"
    • Add a snippet for a docstring: 
      
"Docstring": {
    "prefix": "docs",
    "body": [
        "\"\"\"",
        "${1:Description of the function}",
        "",
        "Args:",
        "    ${2:param_name} (${3:type}): ${4:Description of the parameter}",
        "",
        "Returns:",
        "    ${5:type}: ${6:Description of the return value}",
        "\"\"\"",
        "$0"
    ],
    "description": "Function docstring"
}
    • Try using your snippet in app.py by adding a new function and typing "docs" followed by Tab

Bonus Tasks

Conclusion: VS Code as Your Development Partner

Throughout this session, we've explored Visual Studio Code—a powerful, flexible tool that will serve as your primary development environment throughout this course and likely well into your professional career.

Remember that mastering your tools is an investment that pays dividends every day. The time you spend learning VS Code's features and customizing it to your preferences will be repaid through increased productivity and a more enjoyable development experience.

As you continue your journey as a developer, your relationship with VS Code will evolve:

Remember that VS Code is continuously improving, with new features and extensions released regularly. Stay curious and open to learning new tricks—there's always another productivity enhancement waiting to be discovered.

In our next sessions, we'll build upon this foundation as we explore Python programming fundamentals and web development concepts. Your familiarity with VS Code will allow you to focus on learning these technologies rather than struggling with your tools.

Assignment: VS Code Proficiency

To reinforce your VS Code skills, complete the following tasks:

  1. VS Code Setup and Customization:
    • Install VS Code if you haven't already
    • Install the recommended extensions for Python and web development
    • Configure at least five settings to match your preferences
    • Create at least two custom snippets that you think will be useful
    • Choose a color theme and icon theme that you find appealing
    • Take a screenshot of your customized VS Code
  2. Keyboard Shortcut Mastery:
    • Create a markdown document called "vscode_shortcuts.md"
    • List at least 15 keyboard shortcuts that you find most useful
    • For each shortcut, include:
      • The key combination
      • What the shortcut does
      • A brief example of when you would use it
    • Practice using these shortcuts for at least one day
  3. Python Environment Setup:
    • Create a Python project with a proper folder structure
    • Set up a virtual environment within VS Code
    • Configure linting and formatting for Python
    • Create a simple Python program with multiple files
    • Practice debugging by setting breakpoints and stepping through code
    • Document your setup process and any challenges you encountered
  4. Web Development Workflow:
    • Create a simple web project with HTML, CSS, and JavaScript files
    • Use Emmet abbreviations to quickly generate HTML structure
    • Set up Live Server to preview your web pages
    • Use the CSS preview and color picker features
    • Practice using multiple cursors for bulk editing
    • Create a short screencasting showing your workflow
  5. VS Code Features Exploration:
    • Create a document called "vscode_features.md"
    • Explore the Command Palette and discover five commands you didn't know about
    • Experiment with at least three extensions not mentioned in this lesson
    • Try using workspace features with multiple folders
    • For each feature or extension, write a brief description and how it might be useful

Submit your completed assignment, including all documents, screenshots, and any code you created, before the next class session. The goal is not just to complete the tasks, but to begin developing an efficient, personalized workflow in VS Code.

Additional Resources

Books and Courses:

YouTube Channels: