Visual Studio Code Extension

.markdownlintignore

@@ -1,5 +1,8 @@
 /node_modules
 packages/sandcastle/node_modules
+extensions/VSCode/node_modules
+extensions/VSCode/out
+extensions/VSCode/src/templates
 /ThirdParty
 /Tools/**
 

.vscode/launch.json

@@ -39,6 +39,18 @@
             "runtimeExecutable": "npm",
             "runtimeArgs": ["run", "test", "--", "--includeName", "${fileDirnameBasename}${/}${fileBasenameNoExtension}", "--debug"],
             "console": "integratedTerminal"
+        },
+        {
+            "name": "Run VS Code Extension",
+            "type": "extensionHost",
+            "request": "launch",
+            "args": [
+                "--extensionDevelopmentPath=${workspaceFolder}/extensions/VSCode"
+            ],
+            "outFiles": [
+                "${workspaceFolder}/extensions/VSCode/out/**/*.js"
+            ],
+            "preLaunchTask": "npm: compile - extensions/VSCode"
         }
     ],
     "compounds": [

CONTRIBUTORS.md

@@ -175,6 +175,7 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for details on how to contribute to Cesiu
   - [Luke McKinstry](https://github.com/lukemckinstry)
   - [Ryan Veenstra](https://github.com/r-veenstra)
   - [Jason Sobotka](https://github.com/keyboardspecialist)
+  - [Margarita Kartaviciute](https://github.com/MKartaviciute)
 - [Northrop Grumman](http://www.northropgrumman.com)
   - [Joseph Stein](https://github.com/nahgrin)
 - [EOX IT Services GmbH](https://eox.at)

eslint.config.js

@@ -13,6 +13,8 @@ export default [
       "Source/*",
       "**/ThirdParty/",
       "Tools/**/*",
+      "extensions/VSCode/out/**",
+      "extensions/VSCode/tutorials/**",
       "index.html",
       "index.release.html",
       "Apps/HelloWorld.html",

extensions/VSCode/.env.example

@@ -0,0 +1,6 @@
+# Environment Variables Template
+# Copy this file to .env and add your actual values
+
+# Cesium Ion Access Token
+# Get your token from: https://ion.cesium.com/tokens
+CESIUM_ION_ACCESS_TOKEN=your_cesium_ion_access_token_here

extensions/VSCode/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/naming-convention": "warn",
+    "@typescript-eslint/semi": "warn",
+    "curly": "warn",
+    "eqeqeq": "warn",
+    "no-throw-literal": "warn",
+    "semi": "off"
+  },
+  "ignorePatterns": ["out", "dist", "**/*.d.ts"]
+}

extensions/VSCode/.gitignore

@@ -0,0 +1,6 @@
+out
+node_modules
+.vscode-test/
+*.vsix
+.DS_Store
+.env

extensions/VSCode/.vscodeignore

@@ -0,0 +1,10 @@
+.vscode/**
+.vscode-test/**
+src/**
+.gitignore
+.yarnrc
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts

extensions/VSCode/ENV_SETUP.md

@@ -0,0 +1,49 @@
+# Environment Variables
+
+This extension uses environment variables for sensitive configuration values like API tokens.
+
+## Setup
+
+1. Copy `.env.example` to `.env`:
+   ```bash
+   cp .env.example .env
+   ```
+
+2. Edit `.env` and add your actual values:
+   ```bash
+   CESIUM_ION_ACCESS_TOKEN=your_actual_token_here
+   ```
+
+3. Reload VS Code or restart the extension to load the new token
+
+## Getting a Cesium Ion Access Token
+
+1. Go to [https://ion.cesium.com/tokens](https://ion.cesium.com/tokens)
+2. Sign in or create an account
+3. Create a new token or use an existing one
+4. Copy the token and paste it in your `.env` file
+
+## Automatic Token Injection
+
+The extension **automatically loads** the `CESIUM_ION_ACCESS_TOKEN` from your `.env` file when:
+
+- Opening tutorials from the Cesium Tutorials panel
+- Rendering tutorials from workspace files (with auto-reload on file changes)
+
+Tutorial files use the placeholder `YOUR_CESIUM_ION_ACCESS_TOKEN`, which is automatically replaced with your actual token at runtime. You don't need to manually edit the tutorial files!
+
+## Security
+
+- The `.env` file is ignored by git (listed in `.gitignore`)
+- Never commit your `.env` file to version control
+- Use `.env.example` as a template for required variables
+- Share `.env.example` with your team, not `.env`
+- Tokens are injected at runtime, not saved to tutorial files
+
+## Exported Tutorial Files
+
+When you export tutorials to your workspace, the files will still contain the `YOUR_CESIUM_ION_ACCESS_TOKEN` placeholder. This is intentional for security:
+
+- The extension automatically replaces it when rendering
+- You can manually replace it if you want to run tutorials outside VS Code
+- Or use your own build process to inject tokens from environment variables

extensions/VSCode/README.md

@@ -0,0 +1,100 @@
+# Cesium Sandcastle Extension
+
+A Visual Studio Code extension that provides access to Cesium Sandcastle tutorials and allows you to visualize the Cesium globe directly in the editor.
+
+## Features
+
+- **📚 Tutorials Browser**: Browse Cesium Sandcastle tutorials organized by category
+- **🔍 Tutorial Search**: Quick filtering by name or keyword
+- **📦 Tutorial Export**: Export tutorials as modern npm projects or legacy CDN format
+- **🌍 Cesium Globe Viewer**: Render and preview Cesium scenes inside VS Code
+- **⚡ Live Reload**: Auto-refresh on file changes for both npm and CDN projects
+- **🎯 Smart Project Detection**: Automatically detects Cesium code in any workspace file
+- **🚀 Dev Server Integration**: Automatic Vite dev server with dynamic port detection
+
+## Usage
+
+### Browsing Tutorials
+
+1. Click on the **Cesium icon** in the Activity Bar to open the Tutorials panel
+2. Browse tutorials organized by category
+3. Use the **search icon** to filter tutorials by name or keyword
+4. Click **"Export Tutorial to Workspace"** button to export a tutorial to your workspace
+
+### Exporting Tutorials
+
+When exporting a tutorial, choose your preferred format:
+
+**Modern npm Project** (Recommended)
+
+- Full Vite + Cesium ES modules setup
+- IntelliSense and TypeScript support
+- Hot Module Replacement (HMR)
+- Run with `npm install` then `npm run dev`
+- Token stored securely in `.env` file
+
+#### CDN
+
+- Simple HTML with Cesium CDN links
+- No build step required
+- Open `index.html` directly in browser
+- Token hardcoded in `main.js`
+
+### Rendering Cesium Views
+
+**From Tutorials Panel:**
+
+- Click any tutorial to open it in the Cesium Globe viewer
+
+**From Workspace Files:**
+
+- Right-click on any `.js`, `.html`, or `.css` file
+- Select **"Render Cesium View"**
+- Works with both npm and CDN projects
+- Auto-detects Cesium code and project type
+
+**For npm Projects:**
+
+- Dev server starts automatically on available port
+- Opens in VS Code Simple Browser
+- Live reload on file changes
+
+**For CDN Projects:**
+
+- Renders directly in Cesium Globe panel
+- Live updates when you save files
+
+## Requirements
+
+- Visual Studio Code 1.85.0 or higher
+
+## Configuration
+
+### Setting Up Cesium Ion Access Token
+
+Tutorials require a Cesium Ion access token to work properly. You have two options:
+
+1. **Automatic Prompt** (Recommended)
+   - Open any tutorial - you'll be prompted to enter your token
+   - Token is saved for future use
+
+2. **Manual Setup via .env File**
+   - Copy `.env.example` to `.env` in the extension directory
+   - Add your token: `CESIUM_ION_ACCESS_TOKEN=your_token_here`
+   - Get your token from: [https://ion.cesium.com/tokens](https://ion.cesium.com/tokens)
+
+3. **Command Palette**
+   - Run `Cesium: Set Cesium Ion Access Token` from Command Palette
+   - Enter your token when prompted
+
+See [ENV_SETUP.md](ENV_SETUP.md) for detailed instructions.
+
+## Known Issues
+
+None at this time.
+
+## Release Notes
+
+### 0.0.1
+
+Initial release with basic tutorial browsing and globe visualization.