Vscode vs Core

Pros

• Extensive ecosystem: VS Code has a vast library of extensions, themes, and plugins, making it highly customizable for various programming languages and workflows.
• Regular updates: Microsoft frequently releases updates with new features, bug fixes, and performance improvements, ensuring the editor stays current and competitive.
• Cross-platform compatibility: VS Code runs on Windows, macOS, and Linux, providing a consistent development experience across different operating systems.
• Integrated terminal and Git support: Built-in terminal and Git integration streamline development workflows and version control tasks.

Cons

• Resource consumption: VS Code can be resource-intensive, especially when multiple extensions are installed, potentially slowing down older or less powerful machines.
• Learning curve for advanced features: While the basic functionality is intuitive, mastering all of VS Code's features and shortcuts may require time and effort.
• Electron-based limitations: Being built on Electron, VS Code may not be as performant as some native code editors, particularly for very large files or projects.
• Potential privacy concerns: Some users may have reservations about Microsoft's data collection practices, although telemetry can be disabled in the settings.

Pros

• Extensible Architecture: OpenSumi provides a highly extensible and modular architecture, allowing developers to easily customize and extend the IDE framework to suit their specific needs.

• Rich Feature Set: The framework offers a comprehensive set of features out of the box, including file management, code editing, debugging, and version control integration.

• Active Development: The project is actively maintained and regularly updated, ensuring that users have access to the latest improvements and bug fixes.

• Cross-platform Support: OpenSumi is designed to work across multiple platforms, making it versatile for various development environments.

Cons

• Learning Curve: Due to its extensive feature set and modular architecture, there may be a steeper learning curve for developers new to the framework.

• Documentation Challenges: While documentation exists, some users might find it lacking in certain areas or not as comprehensive as they would like, especially for more advanced use cases.

• Limited Community: Compared to some other popular IDE frameworks, OpenSumi has a smaller community, which may result in fewer third-party extensions and resources.

• Performance Overhead: As with many extensible frameworks, there might be some performance overhead compared to more lightweight or specialized IDEs, especially for large projects.

Extension API Usage

This snippet demonstrates how to create a simple VS Code extension that adds a new command:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
        vscode.window.showInformationMessage('Hello World from VS Code!');
    });

    context.subscriptions.push(disposable);
}

Language Server Protocol Implementation

This snippet shows how VS Code implements the Language Server Protocol for providing language features:

import * as lsp from 'vscode-languageserver-protocol';

connection.onCompletion(
    (textDocumentPosition: lsp.TextDocumentPositionParams): lsp.CompletionItem[] => {
        return [
            { label: 'TypeScript', kind: lsp.CompletionItemKind.Text },
            { label: 'JavaScript', kind: lsp.CompletionItemKind.Text }
        ];
    }
);

Custom Editor API

This snippet demonstrates how to create a custom editor in VS Code:

class CustomEditor implements vscode.CustomTextEditorProvider {
    resolveCustomTextEditor(
        document: vscode.TextDocument,
        webviewPanel: vscode.WebviewPanel,
        token: vscode.CancellationToken
    ): void | Thenable<void> {
        webviewPanel.webview.html = this.getHtmlForWebview(webviewPanel.webview);
        // Set up communication between the webview and extension
    }
}

Extension API Usage

This snippet demonstrates how to use the Extension API to register a command and add it to the menu:

import { Injectable, Autowired } from '@opensumi/di';
import { IMenuRegistry, ICommandService, CommandRegistry } from '@opensumi/ide-core-browser';

@Injectable()
export class MyExtension {
  @Autowired(IMenuRegistry)
  private menuRegistry: IMenuRegistry;

  @Autowired(ICommandService)
  private commandService: ICommandService;

  activate() {
    CommandRegistry.registerCommand({ id: 'myCommand', execute: () => console.log('Command executed') });
    this.menuRegistry.registerMenuItem(MenuId.EditorContext, { command: 'myCommand', group: '1_modification' });
  }
}

File System Provider Implementation

This snippet shows how to implement a custom file system provider:

import { Injectable } from '@opensumi/di';
import { URI, IFileSystemProvider, FileSystemProviderCapabilities } from '@opensumi/ide-core-browser';

@Injectable()
export class CustomFileSystemProvider implements IFileSystemProvider {
  capabilities = FileSystemProviderCapabilities.FileRead | FileSystemProviderCapabilities.FileWrite;

  async readFile(resource: URI): Promise<Uint8Array> {
    // Custom implementation to read file
  }

  async writeFile(resource: URI, content: Uint8Array, opts: FileWriteOptions): Promise<void> {
    // Custom implementation to write file
  }
}

Installation

1. Visit the Visual Studio Code website.
2. Download the appropriate version for your operating system (Windows, macOS, or Linux).
3. Run the installer and follow the on-screen instructions.

Basic Usage

Opening a Project

1. Launch Visual Studio Code.
2. Click on "File" > "Open Folder" in the top menu.
3. Select the folder containing your project files.

Creating a New File

1. In the Explorer sidebar, right-click on the folder where you want to create the file.
2. Select "New File" from the context menu.
3. Enter the file name with the appropriate extension (e.g., index.html or script.js).

Editing and Saving

1. Open a file by clicking on it in the Explorer sidebar.
2. Make your changes in the editor.
3. Save the file by pressing Ctrl+S (Windows/Linux) or Cmd+S (macOS).

Example: Creating an HTML File

1. Create a new file named index.html.
2. Copy and paste the following HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First VS Code Project</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first project using Visual Studio Code.</p>
</body>
</html>

3. Save the file.
4. Right-click on the file in the Explorer sidebar and select "Open with Live Server" (you may need to install the Live Server extension first).

This will open your HTML file in a web browser, allowing you to see the results of your code.

Installation

To get started with OpenSumi Core, follow these steps:

1. Ensure you have Node.js (version 14 or later) installed on your system.

2. Clone the repository:

git clone https://github.com/opensumi/core.git
cd core

3. Install dependencies:

yarn install

Basic Usage

Here's a simple example of how to use OpenSumi Core in your project:

1. Create a new file called example.ts in your project directory.

2. Add the following code to example.ts:

import { Injector } from '@opensumi/di';
import { BrowserModule } from '@opensumi/ide-core-browser';

const injector = new Injector([BrowserModule]);

const app = injector.get(BrowserModule);
app.start().then(() => {
  console.log('OpenSumi Core application started');
});

3. Run the example:

ts-node example.ts

This basic example initializes the OpenSumi Core application with the BrowserModule. You can expand on this by adding more modules and customizing the application according to your needs.

For more detailed information and advanced usage, please refer to the official documentation.