diff --git a/code-studio-toc.html b/code-studio-toc.html
index e2f00ef..985a994 100644
--- a/code-studio-toc.html
+++ b/code-studio-toc.html
@@ -164,6 +164,22 @@
UI Builder
+ Languages
+
+
Configure the Syncfusion Code Studio
diff --git a/code-studio/Languages/javascript-debug-steps.md b/code-studio/Languages/javascript-debug-steps.md
new file mode 100644
index 0000000..fdd27c2
--- /dev/null
+++ b/code-studio/Languages/javascript-debug-steps.md
@@ -0,0 +1,111 @@
+---
+title: "Syncfusion Code Studio Languages"
+description: "Professional guide for JavaScript development and debugging setup in Code Studio"
+classification: "User Guide - Troubleshoot"
+platform: syncfusion-code-studio
+keywords: JavaScript, debugging, development, troubleshoot, code-studio, syncfusion
+---
+
+# JavaScript Development and Debugging Setup Guide for Code Studio
+
+This comprehensive guide will help you set up JavaScript development and debugging in Code Studio.
+
+## Code Studio Extensions Setup
+
+### Required Extensions
+
+To enable JavaScript development and debugging in Code Studio, you need to install the following extensions:
+
+#### 1. Live Server Extension
+- **Purpose**: Launches a local development server with live reload feature for static and dynamic pages
+- **Installation**: Search for "[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)" in the Extensions view (Ctrl+Shift+X)
+
+### Installation Steps
+
+1. Open Code Studio
+2. Navigate to Extensions view (Ctrl+Shift+X)
+3. Search for and install the 'Live Server' extension
+4. Restart Code Studio to activate the extension
+
+## Working with JavaScript Projects
+
+### Opening JavaScript Projects
+
+#### 1. Open a JavaScript Project
+Use one of the following methods to open your JavaScript project:
+- **File Menu**: Go to `File > Open Folder` and select your project directory
+- **Command Palette**: Press `Ctrl+Shift+P`, type "Open Folder", and select your project directory
+
+### Running JavaScript Projects
+
+#### Using Live Server (for Browser-based JavaScript)
+1. **Install Live Server Extension** (if not already installed)
+2. **Right-click on your `index.html` file**
+3. **Select "Open with Live Server"**
+4. Your browser will open automatically with your application
+
+#### Using Code Studio Run Features
+1. **Run JavaScript File**:
+ - Open your JavaScript file (`.js`)
+ - Press `Ctrl+F5` to run without debugging
+ - Or use the Run button in the top-right corner
+
+### Debugging JavaScript Projects
+
+#### Setting Up Debug Configuration
+
+##### For Browser-based JavaScript Applications
+1. **Create Launch Configuration**:
+ - Open Run and Debug view (`Ctrl+Shift+D`)
+ - Click the "create a launch.json file" link
+ - Select "Web App (Chrome)" or "Web App (Edge)"
+ - Automatically configure the current file path
+ - Select the configuration and run
+
+#### Quick Debug
+1. **Debug JavaScript File**:
+ - Open your JavaScript file (`.js`)
+ - Press `F5` to run with debugging
+ - For browser-based files, ensure your local server is running
+
+#### Debugging Features
+
+Once debugging is active, you can use the following features:
+- **Set Breakpoints**: Click in the gutter next to line numbers or press `F9`
+- **Step Through Code**:
+ - `F10` - Step Over
+ - `F11` - Step Into
+ - `Shift+F11` - Step Out
+ - `F5` - Continue
+- **Inspect Variables**: Hover over variables or use the Variables panel
+- **Watch Expressions**: Add expressions to the Watch panel
+- **Debug Console**: Evaluate JavaScript expressions during debugging
+- **Call Stack**: View the current execution stack
+
+## Troubleshooting
+
+### Common Issues and Solutions
+
+#### 1. Debug Session Won't Start
+**Problem**: Clicking F5 or "Run and Debug" doesn't start debugging session
+
+**Solutions**:
+- **For Browser-based Apps**:
+ - Ensure your local server is running
+ - Check if the URL in `launch.json` matches your server URL
+ - Verify your HTML file path is correct
+- **General**:
+ - Restart Code Studio
+ - Check the Debug Console for error messages
+
+#### 2. Breakpoints Not Working
+**Problem**: Breakpoints are set but debugger doesn't stop at them
+
+**Solutions**:
+- **Browser-based JavaScript**:
+ - Enable source maps in browser developer tools
+ - Ensure you're debugging (F5) not just running (Ctrl+F5)
+ - Check that breakpoints are set on executable lines (not comments or empty lines)
+ - Clear browser cache and restart debugging session
+- **General**:
+ - Reload the window: Press `Ctrl+Shift+P` and type "Developer: Reload Window"
\ No newline at end of file
diff --git a/code-studio/Languages/ruby-debug-steps.md b/code-studio/Languages/ruby-debug-steps.md
new file mode 100644
index 0000000..cb1f86a
--- /dev/null
+++ b/code-studio/Languages/ruby-debug-steps.md
@@ -0,0 +1,178 @@
+---
+title: "Syncfusion Code Studio Languages"
+description: "Professional guide for Ruby development and debugging setup in Code Studio"
+classification: "User Guide - Troubleshoot"
+platform: syncfusion-code-studio
+keywords: Ruby, debugging, development, troubleshoot, code-studio, syncfusion
+---
+
+# Ruby Development and Debugging Setup Guide for Code Studio
+
+This comprehensive guide will help you set up Ruby development and debugging in Code Studio.
+
+## Prerequisites
+
+Before setting up Ruby development in Code Studio, ensure you have the following prerequisites:
+
+### 1. Install Ruby
+1. Download Ruby from [rubyinstaller.org](https://rubyinstaller.org/downloads/)
+2. Choose **Ruby+Devkit version** (recommended: Ruby 3.1 or higher)
+3. During installation:
+ - Check "Add Ruby executables to your PATH"
+ - Accept the default installation directory
+
+### 2. Verify Ruby Installation
+Open PowerShell as Administrator and run the following commands:
+```powershell
+ruby --version
+gem --version
+```
+
+If any command fails or shows an error, restart your terminal or computer and try again.
+
+### 3. Update RubyGems (Optional but Recommended)
+Open PowerShell as Administrator and execute the following commands:
+```powershell
+# Update RubyGems system
+gem update --system
+
+# Install Rails framework (optional, if needed for your projects)
+gem install rails
+```
+
+## Code Studio Extensions Setup
+
+### Required Extensions
+
+To enable Ruby development and debugging in Code Studio, you need to install the following extensions:
+
+#### 1. Ruby LSP
+- **Purpose**: Provides language server protocol support for Ruby, including syntax highlighting, code completion, and IntelliSense
+- **Installation**: Search for "[Ruby LSP Extension Documentation](https://marketplace.visualstudio.com/items?itemName=Shopify.ruby-lsp)" in the Extensions view (Ctrl+Shift+X)
+
+#### 2. VSCode rdbg Ruby Debugger
+- **Purpose**: Enables debugging capabilities for Ruby applications with breakpoints, variable inspection, and step-through debugging
+- **Installation**: Search for "[VSCode rdbg Ruby Debugger Documentation](https://marketplace.visualstudio.com/items?itemName=KoichiSasada.vscode-rdbg)" in the Extensions view (Ctrl+Shift+X)
+
+### Installation Steps
+
+1. Open Code Studio
+2. Navigate to Extensions view (Ctrl+Shift+X)
+3. Search for and install both "Ruby LSP" and "VSCode rdbg Ruby Debugger" extensions
+4. Restart Code Studio to activate the extensions
+
+## Required Ruby Gems
+
+Install the necessary debugging gem:
+
+```powershell
+# For Ruby debugging support
+gem install debug
+```
+
+## Working with Ruby Projects
+
+### Opening Ruby Development Projects
+
+Once you have completed the setup, you can start working with Ruby projects in Code Studio:
+
+#### 1. Open a Ruby Project
+Use one of the following methods to open your Ruby project:
+- **File Menu**: Go to `File > Open Folder` and select your Ruby project directory
+- **Command Palette**: Press `Ctrl+Shift+P`, type "Open Folder", and select your project directory
+- **Drag and Drop**: Drag your project folder directly into Code Studio
+
+### Running Ruby Projects
+
+#### Using Code Studio Run Features
+1. **Run Ruby File Directly**:
+ - Open your Ruby file (`.rb`)
+ - Press `Ctrl+F5` to run without debugging
+ - Or right-click in the editor and select "Run Ruby"
+
+#### Using Terminal Execution
+1. **Open Integrated Terminal**:
+ - Press `Ctrl+`` (backtick) to open the terminal
+ - Navigate to your file directory if needed
+
+2. **Run the Ruby File**:
+ ```powershell
+ # Run a single Ruby file
+ ruby filename.rb
+ ```
+
+### Debugging Ruby Projects
+
+#### Quick Debug
+1. **Debug Ruby File Directly**:
+ - Open your Ruby file (`.rb`)
+ - Press `F5` to run with debugging
+ - Or right-click in the editor and select "Debug Ruby"
+
+#### Using Debug Panel
+1. **Set Up Debug Configuration**:
+ - Open Run and Debug view (`Ctrl+Shift+D`)
+ - Click "Run and Debug" button
+ - Click the "create a launch.json file" link
+ - Select "Ruby rdbg" from the dropdown menu
+ - Choose "Debug current file with rdbg" option
+
+2. **Launch Debug Session**:
+ - Code Studio will execute your Ruby file with debugging capabilities
+ - The debug toolbar will appear at the top of the editor
+
+#### Debugging Features
+
+Once debugging is active, you can use the following features:
+- **Set Breakpoints**: Click in the gutter next to line numbers or press `F9`
+- **Step Through Code**:
+ - `F10` - Step Over
+ - `F11` - Step Into
+ - `Shift+F11` - Step Out
+ - `F5` - Continue
+- **Inspect Variables**: Hover over variables or use the Variables panel
+- **Watch Expressions**: Add expressions to the Watch panel
+- **Debug Console**: Evaluate Ruby expressions during debugging
+
+## Troubleshooting
+
+### Common Issues and Solutions
+
+#### 1. Ruby Not Recognized in Terminal
+**Problem**: When running `ruby --version`, you get "'ruby' is not recognized as an internal or external command"
+
+**Solutions**:
+- Restart Code Studio and your computer after Ruby installation
+- Verify Ruby is installed and added to PATH:
+ ```powershell
+ # Check if Ruby is in PATH
+ echo $env:PATH
+
+ # Manually add Ruby to PATH if needed (adjust path as needed)
+ $env:PATH += ";C:\Ruby32-x64\bin"
+ ```
+- Reinstall Ruby with "Add Ruby executables to your PATH" option checked
+
+#### 2. Debug Session Won't Start
+**Problem**: Clicking F5 or "Run and Debug" doesn't start debugging session
+
+**Solutions**:
+- Install the `debug` gem: `gem install debug`
+- Verify Code Studio rdbg Ruby Debugger extension is installed and enabled
+- Check if `launch.json` configuration is correct
+- Try creating a new `launch.json` file:
+ - Open Run and Debug view (`Ctrl+Shift+D`)
+ - Click "create a launch.json file"
+ - Select "Ruby rdbg"
+- Restart Code Studio after installing extensions
+
+#### 3. Breakpoints Not Working
+**Problem**: Breakpoints are set but debugger doesn't stop at them
+
+**Solutions**:
+- Ensure you're running with debugging (`F5`) not just running (`Ctrl+F5`)
+- Verify the `debug` gem is installed: `gem list debug`
+- Check that breakpoints are set on executable lines (not comments or empty lines)
+- Make sure your Ruby file is saved before debugging
+- Reload the window: Press `Ctrl+Shift+P` and type "Developer: Reload Window"
+- For advanced debugging techniques, refer to this [Ruby trace inspector guide](https://dev.to/ono-max/intro-to-trace-inspector-that-displays-ruby-trace-logs-with-pretty-ui-3pi7)
\ No newline at end of file
diff --git a/code-studio/Languages/swift-debug-steps.md b/code-studio/Languages/swift-debug-steps.md
new file mode 100644
index 0000000..cf80bd8
--- /dev/null
+++ b/code-studio/Languages/swift-debug-steps.md
@@ -0,0 +1,192 @@
+---
+title: "Syncfusion Code Studio Languages"
+description: "Professional guide for Swift development and debugging setup in Code Studio"
+classification: "User Guide - Troubleshoot"
+platform: syncfusion-code-studio
+keywords: Swift, debugging, development, troubleshoot, code-studio, syncfusion
+---
+
+# Swift Development and Debugging Setup Guide for Code Studio (macOS)
+
+This comprehensive guide will help you set up Swift development and debugging in Code Studio on macOS.
+
+## Prerequisites
+
+Before setting up Swift development in Code Studio, ensure you have the following prerequisites:
+
+### 1. Install Xcode Command Line Tools
+Open Terminal and run the following command:
+```bash
+xcode-select --install
+```
+
+If Xcode Command Line Tools are already installed, you'll see a message indicating they're already installed.
+
+### 2. Install Xcode (Recommended)
+1. Download Xcode from the [Mac App Store](https://apps.apple.com/us/app/xcode/id497799835)
+2. Launch Xcode and accept the license agreement
+3. Let Xcode install any additional components it requires
+
+### 3. Verify Swift Installation
+Open Terminal and run the following commands:
+```bash
+swift --version
+```
+
+If the command fails, ensure Xcode Command Line Tools are properly installed.
+
+### 4. Install Swift Package Manager (Built-in)
+Swift Package Manager comes bundled with Swift. Verify it's working:
+```bash
+swift package --version
+```
+
+## Code Studio Extensions Setup
+
+### Required Extensions
+
+To enable Swift development and debugging in Code Studio, you need to install the following extensions:
+
+#### 1. Swift Extension
+- **Purpose**: Provides language server protocol support for Swift, including syntax highlighting, code completion, and IntelliSense
+- **Installation**: Search for "[Swift Extension Documentation](https://marketplace.visualstudio.com/items?itemName=sswg.swift-lang)" in the Extensions view (Cmd+Shift+X)
+
+#### 2. CodeLLDB Debugger
+- **Purpose**: Enables debugging capabilities for Swift applications with breakpoints, variable inspection, and step-through debugging
+- **Installation**: Search for "[CodeLLDB Documentation](https://marketplace.visualstudio.com/items?itemName=vadimcn.vscode-lldb)" in the Extensions view (Cmd+Shift+X)
+
+### Installation Steps
+
+1. Open Code Studio
+2. Navigate to Extensions view (Cmd+Shift+X)
+3. Search for and install both "Swift" and "CodeLLDB" extensions
+4. Restart Code Studio to activate the extensions
+
+## Working with Swift Projects
+
+### Opening Swift Development Projects
+
+Once you have completed the setup, you can start working with Swift projects in Code Studio:
+
+#### 1. Open a Swift Project
+Use one of the following methods to open your Swift project:
+- **File Menu**: Go to `File > Open Folder` and select your Swift project directory
+- **Command Palette**: Press `Cmd+Shift+P`, type "Open Folder", and select your project directory
+
+### Running Swift Projects
+
+#### Using Terminal Execution
+1. **Open Integrated Terminal**:
+ - Press `Ctrl+`` (backtick) to open the terminal
+ - Navigate to your file directory if needed
+
+2. **Run Swift Code**:
+ ```bash
+ # Build and run a Swift package
+ swift run
+
+ # Build a Swift package
+ swift build
+ ```
+
+#### Using Code Studio Run Features
+1. **Run Swift File Directly**:
+ - Open your Swift file (`.swift`)
+ - Press `Cmd+F5` to run without debugging
+ - Or use the Run button in the top-right corner
+
+### Debugging Swift Projects
+
+#### Setting Up Debug Configuration
+
+1. **Create Launch Configuration**:
+ - Open Run and Debug view (`Cmd+Shift+D`)
+ - Click the "create a launch.json file" link
+ - Select "LLDB" from the dropdown menu
+ - Click the "Run and Debug" button
+
+#### Quick Debug
+1. **Debug Swift File**:
+ - Open your Swift file (`.swift`)
+ - Press `F5` to run with debugging
+ - For single files, you might need to compile first:
+ ```bash
+ swiftc -g filename.swift -o main
+ ```
+
+#### Debugging Features
+
+Once debugging is active, you can use the following features:
+- **Set Breakpoints**: Click in the gutter next to line numbers or press `F9`
+- **Step Through Code**:
+ - `F10` - Step Over
+ - `F11` - Step Into
+ - `Shift+F11` - Step Out
+ - `F5` - Continue
+- **Inspect Variables**: Hover over variables or use the Variables panel
+- **Watch Expressions**: Add expressions to the Watch panel
+- **Debug Console**: Evaluate Swift expressions during debugging using LLDB commands
+
+## Troubleshooting
+
+### Common Issues and Solutions
+
+#### 1. Swift Not Recognized in Terminal
+**Problem**: When running `swift --version`, you get "command not found: swift"
+
+**Solutions**:
+- Install Xcode Command Line Tools: `xcode-select --install`
+- Verify Xcode Command Line Tools path:
+ ```bash
+ xcode-select -p
+ ```
+- Reset Xcode Command Line Tools path if needed:
+ ```bash
+ sudo xcode-select --reset
+ ```
+- Add Swift to PATH manually (if needed):
+ ```bash
+ echo 'export PATH="/usr/bin:$PATH"' >> ~/.zshrc
+ source ~/.zshrc
+ ```
+
+#### 2. Debug Session Won't Start
+**Problem**: Clicking F5 or "Run and Debug" doesn't start debugging session
+
+**Solutions**:
+- Ensure CodeLLDB extension is installed and enabled
+- Build your Swift project first: `swift build`
+- Check if your program path in `launch.json` is correct
+- For single Swift files, compile with debug symbols:
+ ```bash
+ swiftc -g filename.swift -o main
+ ```
+- Update the `program` path in `launch.json` to point to your compiled binary
+- Restart Code Studio after installing extensions
+
+#### 3. Breakpoints Not Working
+**Problem**: Breakpoints are set but debugger doesn't stop at them
+
+**Solutions**:
+- Ensure you're compiling with debug symbols (`-g` flag)
+- Make sure you're running with debugging (`F5`) not just running (`Cmd+F5`)
+- Check that breakpoints are set on executable lines (not comments or empty lines)
+- Verify your Swift file is saved before debugging
+- For Swift packages, ensure debug build: `swift build -c debug`
+- Reload the window: Press `Cmd+Shift+P` and type "Developer: Reload Window"
+
+#### 4. Swift Package Build Errors
+**Problem**: Swift package won't build or run
+
+**Solutions**:
+- Check `Package.swift` file syntax
+- Ensure all dependencies are properly declared
+- Clean and rebuild:
+ ```bash
+ swift package clean
+ swift build
+ ```
+- Update Swift Package Manager:
+ ```bash
+ swift package update
+ ```
\ No newline at end of file
diff --git a/code-studio/Languages/typescript-debug-steps.md b/code-studio/Languages/typescript-debug-steps.md
new file mode 100644
index 0000000..08e179e
--- /dev/null
+++ b/code-studio/Languages/typescript-debug-steps.md
@@ -0,0 +1,284 @@
+---
+title: "Syncfusion Code Studio Languages"
+description: "Professional guide for TypeScript development and debugging setup in Code Studio"
+classification: "User Guide - Troubleshoot"
+platform: syncfusion-code-studio
+keywords: TypeScript, debugging, development, troubleshoot, code-studio, syncfusion
+---
+
+# TypeScript Development and Debugging Setup Guide for Code Studio
+
+This comprehensive guide will help you set up TypeScript development and debugging in Code Studio.
+
+## Prerequisites
+
+Before setting up TypeScript development in Code Studio, ensure you have the following prerequisites:
+
+### 1. Install Node.js and npm
+1. Download Node.js from [nodejs.org](https://nodejs.org/downloads/)
+2. Choose **LTS version** (recommended: Node.js 18 or higher)
+3. During installation:
+ - Accept the default installation directory
+ - Check "Automatically install the necessary tools" if prompted
+
+### 2. Verify Node.js and npm Installation
+Open PowerShell as Administrator and run the following commands:
+```powershell
+node --version
+npm --version
+```
+
+If any command fails or shows an error, restart your terminal or computer and try again.
+
+### 3. Install TypeScript Globally (Optional but Recommended)
+Open PowerShell as Administrator and execute the following command:
+```powershell
+# Install TypeScript compiler globally
+npm install -g typescript
+
+# Install ts-node for direct TypeScript execution (optional)
+npm install -g ts-node
+```
+
+## Required Node.js Packages
+
+For TypeScript development, install the following packages in your project:
+
+```powershell
+# Navigate to your project directory
+cd your-project-directory
+
+# Initialize npm project if not already done
+npm init -y
+
+# Install TypeScript as development dependency
+npm install --save-dev typescript @types/node
+
+# Install ts-node for direct execution (optional)
+npm install --save-dev ts-node
+
+# Create TypeScript configuration file
+npx tsc --init
+```
+
+## Working with TypeScript Projects
+
+### Opening TypeScript Development Projects
+
+Once you have completed the setup, you can start working with TypeScript projects in Code Studio:
+
+#### 1. Open a TypeScript Project
+Use one of the following methods to open your TypeScript project:
+- **File Menu**: Go to `File > Open Folder` and select your TypeScript project directory
+- **Command Palette**: Press `Ctrl+Shift+P`, type "Open Folder", and select your project directory
+- **Drag and Drop**: Drag your project folder directly into Code Studio
+
+### Running TypeScript Projects
+
+#### Using Code Studio Run Features
+1. **Compile and Run TypeScript File**:
+ - Open your TypeScript file (`.ts`)
+ - Press `Ctrl+F5` to run without debugging
+ - Alternatively, right-click in the editor and select "Run Code"
+
+#### Using Terminal Execution
+1. **Open Integrated Terminal**:
+ - Press `Ctrl+`` (backtick) to open the terminal
+ - Navigate to your project directory if needed
+
+2. **Compile and Run the TypeScript File**:
+ ```powershell
+ # Method 1: Compile then run
+ tsc filename.ts
+ node filename.js
+
+ # Method 2: Direct execution with ts-node (if installed)
+ ts-node filename.ts
+
+ # Method 3: Using npm scripts (if configured in package.json)
+ npm run build
+ npm start
+ ```
+
+### Debugging TypeScript Projects
+
+#### Quick Debug
+1. **Debug TypeScript File Directly**:
+ - Open your TypeScript file (`.ts`)
+ - Press `F5` to run with debugging
+ - Alternatively, right-click in the editor and select "Debug TypeScript File"
+
+#### Using Debug Panel
+1. **Set Up Debug Configuration**:
+ - Open Run and Debug view (`Ctrl+Shift+D`)
+ - Click the "Run and Debug" button
+ - Click the "create a launch.json file" link
+ - Select "Node.js" from the dropdown menu
+ - Choose the "Launch Program" option
+
+2. **Configure for TypeScript**:
+ - Update the `launch.json` configuration for Chrome debugging with source map support:
+ ```json
+ {
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Debug TypeScript App",
+ "type": "chrome",
+ "request": "launch",
+ "url": "http://localhost:3000",
+ "webRoot": "${workspaceFolder}",
+ "sourceMaps": true,
+ "sourceMapPathOverrides": {
+ "webpack:///./src/*": "${webRoot}/src/*",
+ "webpack://ej2-quickstart/./src/*": "${webRoot}/src/*",
+ "webpack:///src/*": "${webRoot}/src/*",
+ "webpack:///*": "*"
+ },
+ "skipFiles": [
+ "${workspaceFolder}/node_modules/**/*.js",
+ "/**/*.js"
+ ]
+ }
+ ]
+ }
+ ```
+
+3. **Launch Debug Session**:
+ - Code Studio will execute your TypeScript file with debugging capabilities
+ - The debug toolbar will appear at the top of the editor
+
+#### Debugging Features
+
+Once debugging is active, you can use the following features:
+- **Set Breakpoints**: Click in the gutter next to line numbers or press `F9`
+- **Step Through Code**:
+ - `F10` - Step Over
+ - `F11` - Step Into
+ - `Shift+F11` - Step Out
+ - `F5` - Continue
+- **Inspect Variables**: Hover over variables or use the Variables panel
+- **Watch Expressions**: Add expressions to the Watch panel
+- **Debug Console**: Evaluate TypeScript/JavaScript expressions during debugging
+- **Call Stack**: View the current execution stack
+
+## Troubleshooting
+
+### Common Issues and Solutions
+
+#### 1. TypeScript Not Recognized in Terminal
+**Problem**: When running `tsc --version`, you get "'tsc' is not recognized as an internal or external command"
+
+**Solutions**:
+- Restart Code Studio and your computer after Node.js installation
+- Install TypeScript globally: `npm install -g typescript`
+- Use npx to run the TypeScript compiler: `npx tsc --version`
+- Verify Node.js and npm are installed and in PATH:
+ ```powershell
+ # Check if Node.js is in PATH
+ echo $env:PATH
+
+ # Check npm global packages location
+ npm config get prefix
+ ```
+- Add npm global packages to PATH if needed
+
+#### 2. Debug Session Won't Start
+**Problem**: Clicking F5 or "Run and Debug" doesn't start debugging session
+
+**Solutions**:
+- Install the required packages: `npm install --save-dev ts-node @types/node`
+- Verify that Code Studio's JavaScript debugger is enabled
+- Check that the `launch.json` configuration is correct
+- Ensure that `tsconfig.json` exists in your project root
+- Try creating a new `launch.json` file:
+ - Open Run and Debug view (`Ctrl+Shift+D`)
+ - Click "create a launch.json file"
+ - Select "Node.js"
+- Restart Code Studio after installing packages
+
+#### 3. Breakpoints Not Working
+**Problem**: Breakpoints are set but debugger doesn't stop at them
+
+**Solutions**:
+- Ensure you're running with debugging (`F5`) and not just running (`Ctrl+F5`)
+- Verify that source maps are enabled in `tsconfig.json`:
+ ```json
+ {
+ "compilerOptions": {
+ "sourceMap": true,
+ "inlineSourceMap": false
+ }
+ }
+ ```
+- Verify breakpoints are set on executable lines (not comments, empty lines, or type definitions)
+- Make sure your TypeScript file is saved before debugging
+- Clear compiled JavaScript files and rebuild: `npx tsc --build --clean`
+- Reload the window: Press `Ctrl+Shift+P` and type "Developer: Reload Window"
+
+#### 4. Module Import Errors
+**Problem**: TypeScript shows import errors or cannot find modules
+
+**Solutions**:
+- Install the required type definitions: `npm install --save-dev @types/node @types/module-name`
+- Verify the `tsconfig.json` module resolution settings:
+ ```json
+ {
+ "compilerOptions": {
+ "moduleResolution": "node",
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true
+ }
+ }
+ ```
+- Verify package is installed: `npm list package-name`
+- Use TypeScript Importer extension for auto-import suggestions
+
+#### 5. Webpack Configuration for TypeScript Development
+**Problem**: Need to set up Webpack for TypeScript projects with proper debugging support
+
+**Solutions**:
+- Install the required Webpack packages:
+ ```powershell
+ npm install --save-dev webpack webpack-cli webpack-dev-server ts-loader
+ ```
+- Create or update a `webpack.config.js` file in your project root with debugging-optimized settings:
+ ```javascript
+ module.exports = {
+ mode: 'development',
+ devtool: 'source-map',
+ entry: './src/app.ts',
+ output: {
+ filename: 'bundle.js',
+ path: __dirname + '/dist',
+ publicPath: '/dist/'
+ },
+ resolve: {
+ extensions: ['.ts', '.js']
+ },
+ module: {
+ rules: [
+ {
+ test: /\.ts$/,
+ use: 'ts-loader',
+ exclude: /node_modules/
+ }
+ ]
+ },
+ devServer: {
+ static: './',
+ port: 3000,
+ hot: true
+ }
+ };
+ ```
+- Add npm scripts to your `package.json`:
+ ```json
+ {
+ "scripts": {
+ "build": "webpack",
+ "dev": "webpack serve --open",
+ "watch": "webpack --watch"
+ }
+ }
+ ```
\ No newline at end of file