브라우저 기반 고급 코드 편집기

This project is an advanced, feature-rich integrated development environment (IDE) built entirely within the browser, using vanilla JavaScript, HTML, and CSS. It showcases a modern, modular architecture and a wide range of features that you would expect from a desktop IDE.

Features

• Multi-file, multi-tab code editing: Work on multiple files at once with a familiar tab-based interface.
• Sophisticated file explorer: Easily navigate your project's file and folder structure.
• Real-time syntax highlighting: Powered by the Monaco Editor, with support for HTML, CSS, JavaScript, Markdown, and JSON.
• Intelligent auto-completion: Context-aware code completion to speed up your workflow.
• Asynchronous linting: Real-time feedback in your JavaScript files with ESLint, running in a background Web Worker to ensure a smooth UI.
• Live preview panel: See your web projects update in real-time as you edit your HTML, CSS, and JavaScript.
• Local persistence: Your project state is saved to IndexedDB, so you can pick up right where you left off, even after closing the browser.
• Modular architecture: A clean, modular codebase that uses Web Workers for performance-critical tasks.

Demo

To run the project locally, you will need a local web server to serve the files. This is because the Monaco Editor's Web Workers and our linter worker cannot be loaded from file:// URLs.

Step-by-step instructions:

1. Clone the repository:

   git clone https://github.com/your-username/browser-ide-workbench.git
   cd browser-ide-workbench

2. Start a local web server. If you have Python installed, you can use its built-in server:

   python -m http.server

   Alternatively, you can use npx:

   npx serve

3. Open the project in your browser. Navigate to http://localhost:8000 (or the address provided by your server).

You should now see the IDE running in your browser, with the default project loaded.

How it works

This project is built from the ground up with a focus on a clean, modular architecture. Here's a quick overview of the key components:

• index.html: The main entry point of the application, containing the basic HTML structure.
• styles/main.css: The stylesheet for the application, using modern CSS for a responsive layout.
• src/main.js: The main JavaScript file, responsible for initializing the application.
• src/vfs.js: The virtual file system, which manages files and folders in memory.
• src/storage.js: The storage service, which saves the project state to IndexedDB.
• src/editor-manager.js: The editor manager, which handles the Monaco Editor and the multi-tab interface.
• src/file-explorer.js: The file explorer, which renders the file system and handles file selection.
• src/preview-manager.js: The preview manager, which updates the live preview panel.
• src/linter.js: The Web Worker for ESLint, which lints JavaScript code in the background.
• src/linter-manager.js: The linter manager, which communicates with the linter worker.