跳到主要内容

Web IDE and VS Code

Web IDE is like the "online version of VS Code", allowing you to enjoy the features of a professional programming editor in your browser. No need to install any software, just open the web page and start coding. Its functions are almost as powerful as the local VS Code.

Main Features​

Editor Features​

Intelligent Editing: Code has color coding for easy reading, auto-prompt and completion while typing, intelligent error checking and fixing, and automatic code formatting.

Terminal Integration: Built-in command line terminal, supports split-screen display, can run various commands, and easily manage files and environments.

Extension Support​

Pre-installed Extensions: Python development environment, Jupyter Notebook support, Git version control, Docker container management, remote development tools, and intelligent code suggestions.

Extension Management: Can install new extensions, disable unnecessary extensions, and extension features are rich, improving development efficiency.

Environment Configuration​

Workspace Settings​

  1. Basic Configuration

    {
      "editor.fontSize": 14,
      "editor.tabSize": 4,
      "editor.wordWrap": "on",
      "files.autoSave": "afterDelay",
      "terminal.integrated.fontSize": 14
    }

  2. Python Configuration

    {
      "python.linting.enabled": true,
      "python.formatting.provider": "black",
      "python.linting.pylintEnabled": true,
      "jupyter.notebookFileRoot": "${workspaceFolder}"
    }

Shortcut Key Settings​

  1. Common Shortcuts

    keybindings:
      editor:
        format_document: "Shift + Alt + F"
        quick_fix: "Ctrl + ."
        go_to_definition: "F12"
        find_all_references: "Shift + F12"
      terminal:
        new_terminal: "Ctrl + `"
        split_terminal: "Ctrl + Shift + 5"
      notebook:
        run_cell: "Shift + Enter"
        add_cell: "B"
        change_to_markdown: "M"

  2. Custom Shortcuts

    {
      "key": "ctrl+shift+r",
      "command": "jupyter.runAllCells",
      "when": "editorTextFocus && jupyter.hascodecells"
    }

Jupyter Integration​

Notebook Support​

  1. Create Notebook

    # Through the command palette
    Ctrl/Cmd + Shift + P
    > Create New Jupyter Notebook

    # Through the file menu
    File > New File > Jupyter Notebook

  2. Interactive Development

    # Execute code in a cell
    # Select Python kernel
    import numpy as np
    import pandas as pd

    # Display variables
    %whos

    # Magic commands
    %%time
    for i in range(1000000):
        pass

Debugging Features​

  1. Breakpoint Debugging

    # Set breakpoint
    def process_data(data):
        # Set breakpoint here
        result = complex_calculation(data)
        return result

    # Start debugging
    if __name__ == "__main__":
        data = load_data()
        result = process_data(data)

  2. Variable Inspection

    # In the debug console
    > print(data.shape)
    > data.head()
    > type(result)

Git Integration​

Basic Operations​

  1. Repository Operations

    # Clone repository
    git clone https://github.com/username/repo.git

    # Initialize repository
    git init

  2. Version Control

    # Stage changes
    git add .

    # Commit changes
    git commit -m "Describe changes"

    # Push changes
    git push origin main

Graphical Interface​

  1. Source Code Management

    • View file status
    • Compare changes
    • View commit history
    • Manage branches

  2. Merge Conflicts

    conflict_resolution:
      - Open conflicting file
      - Choose to keep changes
      - Mark as resolved
      - Commit changes

Remote Development​

SSH Connection​

Configure Connection

  • Set remote server address
  • Configure username and port
  • Set authentication file
  • Test connection success

Remote Operations

  • Connect to remote host
  • Open remote folder
  • Develop in remote environment
  • Manage remote files

Container Development​

Docker Configuration: Use Python 3.9 image, mount working folder, set Python path, configure development environment.

Container Operations: Open project in container, rebuild development container, manage container environment, ensure environment consistency.

Performance Optimization​

Editor Optimization​

  1. Performance Settings

    {
      "editor.minimap.enabled": false,
      "editor.renderWhitespace": "none",
      "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/node_modules/**": true
      }
    }

  2. File Handling

    {
      "files.exclude": {
        "**/__pycache__": true,
        "**/.pytest_cache": true,
        "**/*.pyc": true
      }
    }

Resource Management​

  1. Memory Optimization

    memory_settings:
      max_memory: "2GB"
      garbage_collection: "aggressive"
      file_watcher_limit: 1000

  2. Cache Management

    cache_settings:
      clear_on_start: false
      max_size: "1GB"
      retention_period: "7d"

Usage Tips​

Development Tips​

Workflow Optimization: Use workspace to manage projects, synchronize configurations to cloud, save work regularly, use Git to manage code versions.

Efficiency Improvement: Learn common shortcuts, use code snippet templates, configure auto-save function, fully utilize smart suggestions.

Team Collaboration​

Code Standards: Auto-format code on save, auto-sort imports, enable code checking, maintain consistent code style.

Shared Settings: Set line length limit, auto-remove extra spaces, add newline at end of file, use unified configuration in team.

Summary​

Web IDE and VS Code provide a powerful online programming environment. By using them properly, you can develop online (no need to install software, just open the web page to program), enjoy professional experience (enjoy all powerful features of VS Code), collaborate with teams (support multi-person collaborative development), and ensure consistent environment (ensure consistency of development environment).

Remember, Web IDE makes professional programming accessible. Start with simple code editing, gradually master advanced features, and you will become an efficient developer!