A multi-purpose Visual Studio Code extension that opens a React-based webview to help you boost productivity — all within VS Code.
Take notes, validate JSON, explore Stack Overflow, view coding stats, and more — all in one place!

• Write and save quick notes
• JSON Validator
• Stack Overflow shortcut
• Coding stats panel
• Cleanup Tool
• Color picker
• Theme switcher (light/dark)
• Language switcher
• Internet connectivity checker
• Plugin System with GitHub, ESLint, and Testing integration
• GitHub Integration: Access commits, issues, and repository data
• ESLint Integration: Real-time code linting and quality analysis
• Test Runner: Execute and manage tests with Jest/Mocha support
• Stores notes using browser localStorage
• Loads saved notes automatically
• Provides Dev tips
• Built with React, Webpack, and VS Code API

Make sure you have the following installed:

• Node.js (v16+ recommended)
• Visual Studio Code
• npm (comes with Node.js)

bash git clone https://github.com/your-username/VS-code-Extension.git
cd VS-code-Extension

npm install

npx webpack

Wondering how to run the extension? here you go:

1. Open the folder in VS Code
2. Press F5 to launch an Extension Development Host.
3. In the new VS Code window, open Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and search: "Show React Webview"

StackMate now includes a powerful plugin system! Access it by:

1. Command Palette: Ctrl+Shift+P → "Open Plugin Manager"
2. Dashboard: Click the "Plugin Manager" card
3. Search: Type @plugins in the search bar

• GitHub Integration: @github - View commits, issues, and repo data
• ESLint: @eslint - Real-time code linting
• Test Runner: @test - Execute tests with Jest/Mocha

• extension.openPluginManager - Open plugin interface
• extension.runESLint - Lint current file
• extension.runTests - Run test suite

See PLUGIN_SYSTEM.md for detailed documentation.

vscode-notes-extension/
├── .vscode/
│ └── launch.json # VS Code debugger config
├── dist/
│ └── bundle.js # Webview output by Webpack
├── src/
│ ├── App.js # React component for notes
│ └── index.js # Entry file for Webpack
├── extension.js # Main VS Code extension logic
├── package.json # Project metadata & dependencies
├── webpack.config.js # Webpack config file
└── README.md # This file

In package.json, you can add:

"scripts": { "build": "webpack", "watch": "webpack --watch"}

then run: npm run build # One-time build npm run watch # Auto-rebuild on changes

Want to improve this extension? Awesome!

1. Fork the repo.

2. Create a new branch: command: git checkout -b feature/your-feature

3. Make your changes and build: command: npx webpack

4. Commit and push: commands: git add . git commit -m "Add: your message" git push origin feature/your-feature

5. Open a Pull Request.

1. Missing CLI error? Run: npm install -D webpack-cli

2. Not seeing your changes? Rebuild with npx webpack and restart the Extension Host window.