version v0.0.1

Author: NSTechBytes

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.vscode-test/
+*.vsix

.vscode-test.mjs

@@ -0,0 +1,5 @@
+import { defineConfig } from '@vscode/test-cli';
+
+export default defineConfig({
+	files: 'test/**/*.test.js',
+});

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=733558
+	// for the documentation about the extensions.json format
+	"recommendations": [
+		"dbaeumer.vscode-eslint",
+		"ms-vscode.extension-test-runner"
+	]
+}

.vscode/launch.json

@@ -0,0 +1,17 @@
+// A launch configuration that launches the extension inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			]
+		}
+	]
+}

.vscodeignore

@@ -0,0 +1,10 @@
+.vscode/**
+.vscode-test/**
+test/**
+.gitignore
+.yarnrc
+vsc-extension-quickstart.md
+**/jsconfig.json
+**/*.map
+**/eslint.config.mjs
+**/.vscode-test.*

CHANGELOG.md

@@ -0,0 +1,5 @@
+
+
+## [v0.0.1]   2025/11/02
+
+- Initial release

README.md

@@ -1,2 +1,86 @@
-# html-view
- View and preview HTML files inside VS Code.
+## 🖥️ **HTML View - VS Code Extension**  
+📄 **Preview and View HTML files inside VS Code with ease!**  
+
+
+
+### 🔥 **Features**  
+✅ **Live HTML Preview** in a WebView panel  
+✅ **Supports Linked CSS & JS Files**  
+✅ **Handles Internal Links (`#about`) Correctly**  
+✅ **Opens External Links in Browser**  
+✅ **Supports `CTRL + ALT + V` Shortcut for Quick Preview**  
+
+---
+
+### 🚀 **Installation**  
+#### **From VS Code Marketplace**  
+1. Open **VS Code**  
+2. Go to **Extensions** (`Ctrl + Shift + X`)  
+3. Search for `"HTML View"`  
+4. Click **Install**  
+
+#### **Manual Installation**  
+1. Download the `.vsix` file from [Releases](https://github.com/NSTechBytes/html-view/releases)  
+2. Open VS Code and go to `Extensions` → Click `...` → `Install from VSIX`  
+3. Select the downloaded `.vsix` file  
+
+---
+
+### 🎯 **Usage**  
+#### **Method 1: Command Palette**  
+1. Open an HTML file in VS Code  
+2. Press `Ctrl + Shift + P`  
+3. Type `"Preview HTML"` and press **Enter**  
+
+#### **Method 2: Keyboard Shortcut**  
+- Press `Ctrl + Alt + V` to instantly preview the current HTML file  
+
+---
+
+### ⚙️ **How It Works**  
+- The extension **creates a WebView panel** to render HTML files  
+- It **ensures that internal fragment links (`#about`) stay inside the WebView**  
+- **External links (`https://example.com`) open in your default browser**  
+- It **resolves relative paths for CSS/JS files** automatically  
+
+---
+
+### 📌 **Keybindings**  
+| Command            | Description           | Shortcut      |  
+|-------------------|-------------------|--------------|  
+| `htmlView.preview` | Open HTML Preview | `Ctrl + Alt + V` |  
+
+---
+
+### 🛠️ **Development**  
+#### **Clone & Run Locally**  
+```sh
+git clone https://github.com/NSTechBytes/html-view.git
+cd html-view
+npm install
+```
+#### **Run in VS Code**  
+1. Open the project in VS Code  
+2. Press `F5` to start a new VS Code instance with the extension loaded  
+
+---
+
+### 🐛 **Bug Reports & Suggestions**  
+Found a bug? Have an idea?  
+👉 **[Create an Issue](https://github.com/NSTechBytes/html-view/issues)**  
+
+---
+
+### ❤️ **Support**  
+If you like this extension, consider ⭐ starring the repo!  
+
+---
+
+### 🏆 **Author**  
+**Nasir Shahbaz**  
+🔗 [GitHub](https://github.com/NSTechBytes) | [Website](https://nstechbytes.pages.dev/)  
+
+---
+
+### 📜 **License**  
+Apache 2.0 License. See [LICENSE](LICENSE) for details.  

eslint.config.mjs

@@ -0,0 +1,25 @@
+import globals from "globals";
+
+export default [{
+    files: ["**/*.js"],
+    languageOptions: {
+        globals: {
+            ...globals.commonjs,
+            ...globals.node,
+            ...globals.mocha,
+        },
+
+        ecmaVersion: 2022,
+        sourceType: "module",
+    },
+
+    rules: {
+        "no-const-assign": "warn",
+        "no-this-before-super": "warn",
+        "no-undef": "warn",
+        "no-unreachable": "warn",
+        "no-unused-vars": "warn",
+        "constructor-super": "warn",
+        "valid-typeof": "warn",
+    },
+}];

images/html-view.png

@@ -0,0 +1,13 @@
+{
+	"compilerOptions": {
+		"module": "Node16",
+		"target": "ES2022",
+		"checkJs": false,  /* Typecheck .js files. */
+		"lib": [
+			"ES2022"
+		]
+	},
+	"exclude": [
+		"node_modules"
+	]
+}