Code Editor Guide

This comprehensive guide will help you master the Helse Web code editor. Learn how to write, debug, and collaborate on code efficiently.

Getting Started

Creating a Code Project

Interface Overview

Layout Components

The code editor interface consists of:

• File Explorer (Left sidebar): Browse project files and folders
• Editor Pane (Center): Write and edit code with syntax highlighting
• Terminal (Bottom panel): Run commands and view output
• Git Panel (Right sidebar): Manage version control
• Toolbar (Top): Quick actions and settings

Navigating the Editor

Writing Code

Syntax Highlighting

The editor automatically detects file types and applies appropriate syntax highlighting:

• Detected from extension: .js → JavaScript, .py → Python, etc.
• Manual selection: Use the language selector in the bottom-right
• 50+ languages: Comprehensive language support

IntelliSense (Auto-Completion)

Get intelligent code suggestions as you type:

Code Snippets

Insert common code patterns quickly:

Type the trigger and press Tab to expand.

Multi-Cursor Editing

Edit multiple locations simultaneously:

• Add cursor above/below: Ctrl+Alt+Up/Down (Windows/Linux) or Cmd+Option+Up/Down (Mac)
• Add cursor at click: Hold Alt and click
• Select all occurrences: Ctrl+Shift+L (Windows/Linux) or Cmd+Shift+L (Mac)
• Select next occurrence: Ctrl+D (Windows/Linux) or Cmd+D (Mac)

Code Formatting

Auto-Formatting

Format your code automatically:

Supported formatters:

• JavaScript/TypeScript: Prettier, ESLint
• Python: Black, autopep8
• Go: gofmt
• Rust: rustfmt
• C/C++: clang-format

Format on Save

Enable automatic formatting when saving:

1. Open settings (Ctrl+,)
2. Search for "format on save"
3. Enable the option
4. Your code formats automatically when you save

Finding and Replacing

Search in Current File

• Find: Ctrl+F (Windows/Linux) or Cmd+F (Mac)
• Replace: Ctrl+H (Windows/Linux) or Cmd+H (Mac)
• Find next: F3 or Enter
• Find previous: Shift+F3 or Shift+Enter

Search Across Files

• Search in all files: Ctrl+Shift+F (Windows/Linux) or Cmd+Shift+F (Mac)
• Include/exclude patterns: Use glob patterns (e.g., *.js, !node_modules/**)
• Replace across files: Click replace icon in search panel

Regular Expressions

Enable regex search with the .* button in the search box:

/function\s+\w+\(/g    # Find all function declarations
/TODO:\s*(.+)/g        # Find all TODO comments

File Management

Working with Files

File Tree Operations

• Create folder: Right-click → "New Folder"
• Rename: Right-click → "Rename" or press F2
• Delete: Right-click → "Delete" or press Delete
• Duplicate: Right-click → "Duplicate"
• Move: Drag and drop files/folders

Working with Git

Initializing a Repository

Making Commits

Viewing Diffs

See exactly what changed:

• Inline diff: Changed lines highlighted in the editor
• Side-by-side diff: Click on a modified file in Git panel
• Diff viewer: Shows old vs. new code

Branching

Manage branches effectively:

1. View branches: Click branch name in status bar
2. Create branch: Click "Create Branch" icon
3. Switch branches: Select from dropdown
4. Merge branches: Use Git panel merge tool

Push and Pull

Sync with remote repositories:

• Push: Upload local commits to remote
• Pull: Download and merge remote changes
• Fetch: Download remote changes without merging
• Sync: Push and pull in one action

Using the Terminal

Opening the Terminal

• Toggle terminal: Ctrl+`` (backtick) or Ctrl+Shift+`` for new terminal
• Multiple terminals: Click + icon to create additional terminals
• Split terminal: Click split icon for side-by-side terminals

Terminal Features

• Working directory: Automatically set to your project folder
• Full shell access: Bash, PowerShell, Zsh, or custom shell
• Copy/paste: Right-click for context menu
• Clear terminal: Type clear or cls

Common Terminal Tasks

Installing Dependencies

# Node.js
npm install express

# Python
pip install pandas numpy

# Ruby
gem install rails

# Rust
cargo add serde

Running Scripts

# Node.js
npm start
node app.js

# Python
python main.py
python -m pytest

# Go
go run main.go

Building Projects

# Node.js
npm run build

# Rust
cargo build --release

# Go
go build

Collaboration

Real-Time Co-Editing

Work with teammates on the same files:

• Live cursors: See where others are editing (colored cursors with names)
• Simultaneous edits: Multiple people edit different parts
• Conflict prevention: Auto-merging of changes
• Presence awareness: See who's online in the project

Code Comments and Discussions

Add inline comments to code:

Debugging (Beta)

Setting Breakpoints

1. Click in the gutter (left margin) next to line numbers
2. A red dot appears indicating a breakpoint
3. Click again to remove the breakpoint

Starting a Debug Session

1. Open the Debug panel (Debug icon in sidebar)
2. Click "Start Debugging" or press F5
3. Your program runs until it hits a breakpoint

Debug Controls

Watch Variables

• View variable values in the Variables panel
• Add watch expressions to track specific values
• Inspect object properties by expanding them

Keyboard Shortcuts

Essential Shortcuts

See the complete Keyboard Shortcuts Reference for all shortcuts.

Settings and Customization

Editor Settings

Access settings with Ctrl+, (Windows/Linux) or Cmd+, (Mac):

• Font: Family, size, and ligatures
• Tab size: Spaces per tab (2, 4, etc.)
• Line numbers: Show/hide, relative numbers
• Minimap: Code overview on the right
• Word wrap: Soft wrap long lines
• Auto-save: Automatic saving interval

Themes

Choose from built-in themes or create custom themes:

1. Open command palette (Ctrl+Shift+P)
2. Type "Color Theme"
3. Select from available themes

Popular themes:

• Dark: Monokai, One Dark Pro, Dracula
• Light: GitHub Light, Solarized Light

Keybindings

Customize keyboard shortcuts:

1. Open command palette
2. Type "Keyboard Shortcuts"
3. Search for command and reassign key

Or choose a preset:

• VS Code
• Sublime Text
• Vim
• Emacs

Best Practices

Code Organization

• Use folders: Organize code by feature or module
• Naming conventions: Clear, descriptive file and variable names
• Consistent formatting: Enable format on save
• Comment your code: Explain complex logic

Version Control

• Commit frequently: Small, focused commits
• Descriptive messages: Explain what and why
• Branch strategy: Use feature branches
• Review before commit: Check diffs

Performance

• Close unused files: Reduce memory usage
• Use search efficiently: Narrow search scope with patterns
• Limit extensions: Only install necessary extensions
• Regular cleanup: Remove unused files and dependencies

Collaboration

• Communicate changes: Use commit messages and comments
• Code reviews: Review teammate's code
• Consistent style: Follow team coding standards
• Document decisions: Add comments for complex logic

Troubleshooting

Common Issues

Syntax Highlighting Not Working

1. Check file extension is correct
2. Manually select language from status bar
3. Reload the editor

IntelliSense Not Appearing

1. Ensure language support is installed
2. Check for syntax errors in file
3. Press Ctrl+Space to manually trigger

Terminal Not Responding

1. Click in terminal to focus
2. Press Ctrl+C to cancel current command
3. Close and open new terminal if needed

Git Changes Not Showing

1. Ensure Git is initialized in project
2. Refresh Git panel
3. Check .gitignore for excluded files

Advanced Features

Task Automation

Create automated tasks:

1. Create .vscode/tasks.json in project
2. Define tasks (build, test, deploy)
3. Run with Ctrl+Shift+B

Code Snippets Creation

Create custom snippets:

1. Open command palette
2. Type "Configure User Snippets"
3. Select language
4. Add your snippet definitions

Extensions (Coming Soon)

Related Guides

Next Steps

• Explore language-specific features
• Learn about Git workflows
• Check keyboard shortcuts reference

Need Help?

• Search our documentation
• Contact support@helse.ai
• Join our developer community