DevStack

Transform your VSCode into a productivity powerhouse. DevStack consolidates 81+ essential development tools into one seamless extension, delivering everything you need without the bloat.

Download From VSCode Marketplace

Core Features

Virtual File System & Navigation

✓Unlimited quick access - Pin any number of files, folders, URLs, and commands
✓Smart organization - Custom folders, subfolders, and batch operations
✓Instant access - One-click navigation to your most-used resources

Workflow Automation

✓Chain Execution - Sequence commands for complex workflows (git add → commit → push)
✓Smart Formatters - Live preview code formatting with detailed explanations
✓Batch Operations - Rename multiple files, remove unused imports, clean up code
✓Instant access - One-click navigation to your most-used resources

Development Tools

✓Snippet Manager - Create, edit, and organize code snippets with live preview
✓Theme Builder - Real-time theme customization with granular controls
✓Command Palette Pro - Quick access to VSCode commands with search
✓Markdown Editor - Built-in renderer with comprehensive cheat sheet

Project Management

✓Remix Integration - Route management, testing, and conventions
✓ShadCN Components - One-click component installation
✓GitHub Sync - Automated version control workflows
✓Extension Management - Development lifecycle automation

Productivity Enhancers

✓Clipboard History - Access your last 20 clipboard items
✓Bookmarks - Quick line-specific bookmarks
✓Unused Code Finder - Identify and clean up unused functions
✓Search Enhancement - Advanced project-wide search capabilities

Productivity Enhancers

✓Clipboard History - Access your last 20 clipboard items
✓Bookmarks - Quick line-specific bookmarks
✓Unused Code Finder - Identify and clean up unused functions
✓ Search Enhancement - Advanced project-wide search capabilities

🎯 Why DevStack?

✓Replaces 50+ extensions - Everything you need in one package
✓Zero performance impact - Lightweight with no background processes
✓Project-agnostic - Global and workspace-specific configurations
✓Constantly evolving - Regular updates with new features

🔧 Perfect For

✓Full-stack developers managing complex projects
✓Teams sharing consistent development environments
✓Productivity enthusiasts who want streamlined workflows
✓Extension minimalists seeking comprehensive functionality

File Configurations

✓Examples can be found in the configation section near the end of the readme

Overview

Virtual File System Section

Virtual Filing System

A comprehensive organization system that removes the need for multiple extensions while providing efficiency in whatever context you're coding.

A virtual filling system that is displayed in a explorer pane where you can virtually add anything you want including but not limited to:

✓file
✓folder
✓URL
✓VSCode Command
✓PowerShell Command
✓Bash Command
✓Markdown (.md)
✓Snippet
✓Chain Commands
✓Concurrent commands

Files

✓Quick access to your most-used files.
✓Add files to custom folders and subfolders.
✓Edit display labels for files.
✓Remove files from the navigation pane.
✓Copy file paths with a single click.
✓Reveal files in your system’s file explorer.
✓Add multiple files to the quick access pane at once.

Folders

✓Create new categories.
✓Rename existing categories.
✓Reorder categories (move up or down).
✓Delete categories when no longer needed.
✓Use subfolders for better organization.
✓Right-click and drag to move items.
✓Move items up or down one position.
✓Edit labels of both global and workspace folders.
✓NEW — Create or delete global or workspace folders.
✓Toggle global state; this is optional for each config object.

URLs & Commands

✓Access URLs directly from the navigation panel.
✓Integration with VSCode commands.
✓Support for PowerShell commands.
✓Execution of Bash commands.
✓Open applications via terminal commands.
✓Manage Markdown files.
✓Organize code snippets.

Features

✓Despite it looking complex a simple and effective UI that keeps you away from the config file
✓- Easily create, edit, and move folders and their items
✓- For creating chains, the command input and title are displayed at the top, along with a folder selector showing your config folders to choose the chain command’s location. Other parent chain command fields are locked.
✓Below that is a form to add new commands with label, path (command), and type. Adding commands updates the parent chain automatically.
✓Commands are listed below for review.
✓A 'Continue' button appears at the bottom right when ready.
✓The next screen locks all fields except the execution list, allowing you to reorder commands as needed. Upon completion, the chain and parent commands are saved, hiding child commands to avoid UI clutter.
✓- Eliminates the need to manually edit the config for these tasks.
✓- In short, anything that can be done (or previously limited due to complexity or VSCode interface constraints) will now be available for execution through this UI.

Itemized list of features that can be found on the UI

Sidebar Navigation and Command/Task Execution:
- The sidebar contains three menus to choose from:
- Navigation — browse pages within the new UI.
- DevStack Commands — mirrors the VSCode UI; clicking a command runs it in your active workspace.
DevStack:
- Create, edit, and delete commands and items easily.
- Create chain commands without opening the config file.
---
Markdown Editor:
- The old Markdown editor is still available if you prefer it.
- New rich-text editor saves files to your global user folder, accessible across projects.
- Sidebar includes:
- Cheat Sheet — click any item to copy its formatting to your clipboard.
- Outline — creates bookmarks for each heading for quick navigation.
- Files — a UI file explorer for your Markdown files.
- Renderer — toggle the live preview on or off.
- Choose between inline or split preview modes.
---
Color Wheel:
- Full color palette.
- Handy small features that enhance working with colors.
---
Lucide Icons:
- Clicking copies the React component to the clipboard.
- Improved search with broader parameters across icon libraries.
- Unified search results regardless of icon library naming differences.
- Not fully complete across all libraries yet, but the goal is full coverage.
---
VSCode Commands Reference:
- Includes about 450 of the most commonly used VSCode commands (out of ~3500 total).
- Searchable with dropdowns to browse by category.
- Fuse.js enabled for fuzzy searching.
---
Markdown Reference:
- Includes all GitHub-flavored Markdown formatting supported by the GitHub renderer.
---
Theme Builder:
- Fully operational with default, manual, and custom options.
- UI updates live as you adjust colors.
- Extended features to:
- Copy Tailwind config for use in any project.
- Copy VSCode theme config to clipboard.
- Save VSCode theme to your workspace’s `.vscode/settings.json`
- Save VSCode theme globally, without overwriting local workspace themes.
- Overall, the theme builder turned out better than expected, making theme configurations and saving very easy while taking up no where near as much time to build
---
Formatter:
- Live preview updates instantly as you change any formatting option.
- Viewer is sticky, so you can scroll through options without losing sight of changes.
- 33 of 72 planned formatters included so far.
- Working towards full coverage to avoid needing external extensions or leaving files unformatted.
---
Default Apps / Functions:
- Allows detailed explanations of each item beyond what’s in extension settings.
- Helps you understand what each toggle or setting does before changing it.
---
Add Missing Imports Configurator:
- Comes preconfigured with many popular libraries but you can add your own.
- Included libraries:
- lucide
- shadCN components
- remix-run/node
- remix-run/react
- remix-utils
- react
- MSAL React
- Microsoft Graph Client
- TanStack React Table
- TanStack Match Sorter Utils
- date-fns
- fuse.js
- papaparse
- resend
- stripe
- crypto
- @twilio/conversations
- sonner
- react-signature-canvas
- @react-pdf/renderer
- pdf-lib
- lodash, acious, clsx, dayjs, prisma, vscode, fs, path
---
Create Monorepo:
- Sets up a monorepo project with shadcn components and STR installed.
Create Single App:
- Creates a project using `npx create-react-router@latest`, then sets up and configures STR for single-app use.
Convert To Monorepo:
- Converts a single app into a monorepo, installing shadcn components and STR.
Build and Deploy Project:
- TurboRepo-like experience with a UI instead of CLI/config files.
- Preconfigured build options: quick deploy, standard build, production ready, full pipeline, and custom builds.
- On load, updates project data before sending to configurator for up-to-date info.
- Scans for current projects in the app folder.
- Checks compatibility to prevent combining incompatible apps.
STR - Init:
- Creates STR config file in the current project.
STR - Setup & Configure:
- Sets up STR, choosing between monorepo or single app configuration.
STR - Update Prisma Scripts:
- Adds necessary Prisma scripts to `package.json` for build and deploy functionality.
- See task runner section for more details.
And for anyone worried about performance: I currently have 15 tabs open, music playing, 3 workspaces open, 2 dev servers running, SQL databases active, Riot client open, sometimes gaming—all without issues or needing to close anything.

NOTE

A VSCode workspace is required in order to interact with most of the web ui, any function that needs data from vscode / config file data, will not work if it doesn't have access to a workspace.

Pages like lucide icons, color wheel, md reference sheet, vscode cmds reference, exmaple configs and the theme builder will still work if no workspace is open

Filing system is virtual; when a file is created, moved, or edited within the extension, the original file (if any) remains unchanged. The configuration is stored in a JSON file that tracks the 'filing system'.

Folders support only two levels of depth. Going deeper was deemed unnecessary and defeats the purpose. However, hidden items can be toggled visible or hidden, allowing a practical depth of three levels.

Markdown files are created inside the `.vscode` folder for storage and can be organized freely within the navigator for access.

Usage - VSCode UI

Video of UI dashboard will be placed at the end of this section.

Add to CRM Navigator

-Add the current file to the navigator via right-click in the item explorer.
-Use the dropdown menu under the 'Add Items' submenu.

Edit Label

-Right-click item in navigator

Remove File

-right click item and select delete

Copy Path

-in the vscode panel, right click the item

Reveal in Explorer

-in the vscode panel, right click the item

Quickpic menu located on the bottom status bar on the left named DevStack

-Auto-add, commit, and push changes.
-Auto-upgrade patch and push the repo.
-Push repo, upgrade patch, create/install/reveal VSIX in Windows file system, open default browser, and navigate to Microsoft’s dashboard for manual VSIX upload (for VSCode extension development). Useful for a hard VSCode reset.
-‘Yeet!’ — loops looking for new VSIX, pushes repo, upgrades patch, creates/installs/pushes new VSIX to marketplace, then soft-resets VSCode.
-Add chain item.
-Add VSCode command.
-Add Bash command.
-Add PowerShell command.
-Create Markdown file.
-Create Markdown file with cheat sheet open side-by-side.
-Add snippet.
-Add folder.
-Add URL.
-Open snippet viewer.
-Open formatters.
-Open Markdown cheat sheet.
-Open VSCode cheat sheet.
-Open theme configurator.
-Edit JSON config.
-Share config with friends.
-Edit default settings.
-Refresh.

Import / Export

-On the extensions title bar
-Under configuration
-There are several options to choose from when it comes to handling the config file
-Giving you complete granular control, if you wanted it
-Exporting the config, creates a file in the root of your workspace

Configuration Files

-File exmaple in configuration section
-ID file: .vscodeocrmnavigatorid.txt
-Global config file: AppData/Roaming/Code - Insiders/User/globalStorage/skyler.ocrmnav/global-navigator-config.json
-Workspace config file: AppData/Roaming/Code - Insiders/User/globalStorage/skyler.ocrmnav/project-configs/project-{uniqueID}.json
-Global snippet file: AppData/Roaming/Code - Insiders/User/globalStorage/skyler.ocrmnav/ocrmnavigator.code-snippets
-Global folders - APPS_AND_PROJS, CMDS, WEB, SNIPPETS, MD, OTHER
-Workspace folders - PRIMARY, SECONDARY, UTILS, COMPONENTS

Commands

Empowering you with quick access commands where you can preset any flags you want, saving you from constantly referring to the documentation.

Features

✓for adding, editing, and managing items or commands
✓use the viewer’s dropdown menu or the navigation if the viewer is already open and running
✓in the create submenu
✓select any the cmd option

PowerShell and Debian Bash Commands

This feature does not use the usual bash command execution.

Features

✓Instead of just running a single command in the vscode folder, this opens a new terminal and executing it in the wsl debian instance
✓for adding, editing, and managing items or commands
✓use the viewer’s dropdown menu or the navigation if the viewer is already open and running
✓in the create submenu
✓select any the cmd option
✓Create any command with the runtime flags you need.

Commands Cheat Sheet

Features

✓Command reference sheet featuring 360 of the most commonly used commands.
✓Searchable by command or browsable by category.

Chain Execution

Chain execution lets you run VSCode commands, shell commands, PowerShell commands, and more. Makes even the most menial or complex repetitive tasks simple with one-click solutions.

Features

✓What if you want to chain 10–20 commands together and execute them with a single button press? Even if you want to push that to 50 commands, no problem—handle any project functionality you need. For the first time in VSCode, there’s no limit on quantity or length, so the only thing stopping you from creating powerful functionality is you.
✓Chain any commands listed in the config file.
✓Each command must have a unique name; for chained commands, use the hidden flag to keep them out of the nav.
✓Hidden commands let you build long sequences without cluttering your navigation.
✓Set command flags once and forget about them.
✓Control execution order to handle commands with prerequisites.

Usage

-In the viewer’s submenu under 'Create', select 'Chain'.
-If the viewer is already open, the navigation inside also lets you create chain commands.
-Follow the on-screen instructions to complete the setup.

Running Commands Concurrently

Replacing STR, this gives you the ability to run commands concurrently like turbo repo or how str does, straight from devstack

Before moving str over and merging it, I did try to replicate its functionality in terms of multiple processes being piped through a single terminal, displaying all of its output when running concurrent tasks.

At the time I thought it couldn't be done from the vscode extension, after several attempts. There are ways to run tasks concurrently, very easily infact but almost all of them run them in the background with no way to add input of any kind thus not allowing you to cancel the running task/s among other things.

While I was taking a break from one of my clients projects, I started working on it again, didn't think it was gonna work but somehow I managed to get it working. I'm not going to get rid of str yet, I need to convert some more of its code before I do that... But theres no point in keeping it anymore as this was the last functionality that the extension was missing to fully replace it. So the command line aspect of str, will be fully removed. I'm probably not the only one in regards to this, when the ui was introduced I think I may have used the cli instead of the ui, once. Along with that the str ui pane, will also be removed. As there is no point to it anymore since the same functionality can be achived with the devstack pane. Since all the other functionality was already converted, it will be staying obviously, but will no longer have the STR abbreviation in its name.

Similar to chains, other than the fact instead of being called chain, its called concurrent. I also worked in the code that, concurrent can run ANY command / task available via devstack, just like chain does. So if you need to open a pdf while running a build script, so be it. Or if you want to add vs code commands to your concurrent tasks, this was something that str... could NOT do, due to only being able to run terminal commands. With running this from the extension, concurrent can now do anything that this extension has to offer.

This is a nice outcome as I find having that last bit of code from str being tacked on, adding uneeded complexity for new users.

There is one single drawback. The terminal will also display the command being executed, in terms of the text being displayed. This is something I could not find workaround on but the benefits out weigh the single drawback. Especially since that one terminal outputs so much text anyway.

With this update, I made another small change to the ui interface for creating commands. I found that, if I wanted to create another command similar to one that was already implemented, for example adding another project to a mono repo and wanted to create the same commands for the new project, I would have to open the config in order to reference them. Instead I placed a command with search capabilites on the creation screen where you can search through your commands already in the config file, thus saving you time of having to open it and dig through it.

Features

✓Concurrently run commands through a single terminal
✓Concurrent commands have one parent command, and as many child commands as you would like
✓Child commands can be hidden from view in ui with the the hidden: true flag
✓No limit on the amount of commands able to be executed
✓No limit on what type of commands you would like to run, for example:
✓- you can open files
✓- open urls
✓- run vs code commands
✓- can execute chain commands, weird I know but hear me out. If you wanted to run a set of commands that needed to be ran sequentially instead of concurrently, during your concurrent command execution... now you can
✓- bash commands
✓So just like the chain command you have access to run anything you want
✓Below you will find an example config, just in case the ui for creating them isnt working
✓Personally, I'm happy how this turned out because it not only opens up what you can do with a concurrent command, but also gives greater control than what was possible with str.
✓I will come back to work on this last item, but if you want to add a chain to a concurrent command, you will have to edit the config file, any other type can be done through the ui. It will take me more than a min to code, because I would like it so that when you click on the chain command in the list, its commands will display to the right of it, so you can adjust the order in which they are executed along with adding commands to that chain command. Given the posibility of multiple chains within the same concurrent command, I know it will take me a while to complete.
✓If you want to continue running the old set up, just download a previous version, 2.0.128 for example should be a stable version with no issues

Configuration

[
  {
    "label": "dev:all",
    "path": "devApp, devCalc",
    "type": "concurrent"
  },
  {
    "label": "devApp",
    "path": "cd apps/app && pnpm run dev",
    "type": "powershellCommand",
    "hidden": true
  },
  {
    "label": "devCalc",
    "path": "cd apps/calc && pnpm run dev",
    "type": "powershellCommand",
    "hidden": true
  },
  {
    "label": "clean:all",
    "path": "cleanApp, cleanProd, cleanCalc, cleanRoot",
    "type": "concurrent"
  },
  {
    "label": "cleanApp",
    "path": "cd apps/app && foreach ($path in @('.cache', 'build', 'node_modules', 'pnpm-lock.yaml',  'public\\build' )) { if (Test-Path $path) { Remove-Item -Path $path -Recurse -Force -ErrorAction SilentlyContinue } }",
    "type": "powershellCommand",
    "hidden": true
  },
  {
    "label": "cleanProd",
    "path": "cd apps/prod && foreach ($path in @('.cache', 'build', 'node_modules', 'pnpm-lock.yaml',  'public\\build' )) { if (Test-Path $path) { Remove-Item -Path $path -Recurse -Force -ErrorAction SilentlyContinue } }",
    "type": "powershellCommand",
    "hidden": true
  },
  {
    "label": "i:all",
    "path": "iapp, iProd, iRoot, iCalc",
    "type": "concurrent"
  },
  {
    "label": "iRoot",
    "path": "pnpm i --prefer-offline --no-cache",
    "type": "powershellCommand",
    "hidden": true
  },
  {
    "label": "iapp",
    "path": "cd apps/app && pnpm install --ignore-workspace && cd ../..",
    "type": "powershellCommand",
    "hidden": true
  },
  {
    "label": "iProd",
    "path": "cd apps/prod && pnpm install --ignore-workspace && cd ../..",
    "type": "powershellCommand",
    "hidden": true
  },
  {
    "label": "iCalc",
    "path": "cd apps/calc && pnpm install --ignore-workspace && cd ../..",
    "type": "powershellCommand",
    "hidden": true
  }
]

NOTE

- tested thoroughly and works, I dont remember if I have a section yet for this, but leaving this here as a reminder to check when I have time to go over how the dash works on creating them

- the accidental addition of chained command execution works well, I have not had one single issue with a command since this was added

Project Agnostic Configuration

Features

✓On workspace switch, creates a new workspace-specific config file and merges it with your global config to form a virtual filing system displayed in the navigator.
✓Both global and workspace items can be configured individually within their respective files.
✓The snippets file is saved globally when using the extension’s snippet editor.
✓Notes, reminders, todos, and their settings are now global.
✓The export/import feature simplifies manual config file editing.
✓Incoming updates in progress:
✓- Ability to toggle global access for folders and their contents.
✓- Edit labels of default folders.

MD Section

MD Editor

Features

✓A rich text Markdown editor that saves to your global user folder, giving you access to your .md files across all projects.
✓Sidebar includes:
✓Cheat Sheet — click any item to copy its formatting snippet directly to your clipboard.
✓Outline — automatically creates bookmarks for each heading to help you navigate your document.
✓Files — a UI file explorer to view and open any of your saved Markdown files.
✓Renderer — toggle on or off to see your content rendered in real time.
✓Choose between inline rendering or split view.
✓Focus mode for distraction-free writing.
✓Switch between split and inline modes seamlessly without losing your Markdown formatting.
✓Export your .md file and save it wherever you like.
✓Also supports opening any external .md file outside of the global config directory.
✓Added localstorage w/ debounced saves, so incase of a accidental page reload or a lapse in connection, or even just forget to save, whatever you were working on will still be there

Features

✓A second, technically third, editor has been added for users to use
✓While there is nothing wrong with the other editor, I just wanted to try a new library out to see its features
✓Once it receives the added features the other has, it will be more feature rich than the one previously mentioned
✓Using monaco some of the features that are avialable that are not in the other editor are:
✓- tabs, with auto save per tab so if your page reloads, all of your data will still be there. Even after multiple days
✓- languages, this can also be set per tab
✓- renaming tabs
✓- full screen display
✓- scroll map
✓- honestly, there is literally a ton more and to much to list here
✓Soon this editor will also recieve the sidebar cheatsheet, and md creator

MD Cheat Sheet

Features

✓Comprehensive Markdown cheat sheet accessible anytime without leaving VS Code, separate from the editor
✓Includes 100% of GitHub-flavored Markdown formatting examples.
✓A sidebar cheat sheet has also been added to the new md editor

Readme Generator

Section Format

Features

✓located in the md editor in the new ui
✓In the side bar click any of the section you want to add to the readme and just paste anywhere you want them to go, starting you off perfectly for that section
✓a ton of pre build readmes to follow their theme or to get ideas from

Snippets Section

Snippets

Enabling you to create, edit and manage your snippets faster, but importantly, in a much better way

Features

✓Creates a new snippet in your global snippets file.
✓A dedicated page lets you enter all snippet details before creation.
✓If your clipboard contains content, it will auto-fill the body on page load.
✓You can select a folder to automatically add the snippet to DevStack within VS Code.
✓A switch at the top allows replacing spaces with underscores in the title and prefix—by default, the title is also used as the prefix.
✓Press Ctrl + S to save the snippet and navigate to the viewer with your new snippet preselected.
✓The prefix field is prefilled with 'jsx' or 'tsx'.
✓When creating multiple snippets, saving will return you to the snippets home screen, where Ctrl + N starts a new one.

Config File

✓A global master file serves as the centralized location for all your snippets.
✓Whenever you create a new project or open one that doesn’t yet have this global file, it copies the data into the `.vscode/` folder, giving you access to snippets for inline insertion while coding.

Global snippets file location

-AppData/Roaming/Code - Insiders/User/globalStorage/skyler.ocrmnav/ocrmnavigator.code-snippets

Snippets Viewer

Features

✓Contains a search bar with fuzzy search capabilities at the top; as you type, a dropdown shows about the first 7 matching results.
✓Selecting a snippet displays it in the box below.
✓While a snippet is selected, you can choose to edit or delete it, and at any time, you can create or import new snippets.
✓selectiong any of the snippets, opens the editor
✓More or less the same as when you create a snippet

Editor Context Snippets

Features

✓Right-click in the editor
✓Select 'Context Snippets' under the 'DevStack' submenu
✓Displays a QuickPick
✓allowing you to search or scroll through all of your snippets
✓item
✓inserts at cursor once a snippet is selected

Formatter Section

File Type Formatter

Features

✓Whether you're brand new or experienced, setting up and using your formatter is simple and intuitive.
✓You won't need to Google every option—each setting is clearly explained so you know exactly what it does.
✓The formatter opens in an Electron viewer. Select a formatting type to see a live preview along with its available options.
✓This is something I always wanted when configuring formatters, and never found—so I built it in.
✓Live preview shows exactly what each change does in real time, making it easy even for beginners to configure without research.
✓As you scroll through the settings, the live preview scrolls with you, so you can always see the effect of your changes.
✓Right-click anywhere in the file and choose the extension’s formatter to apply formatting.
✓Currently supports 33 out of 72 planned formatters—each change updates the preview immediately.
✓The preview panel is sticky, so as you scroll through formatting options, you can still see the live output without losing your place.
✓Support for more formatters is on the way. As I work in different formats, I add what's missing to avoid needing extra extensions or leaving files unformatted.
✓added all of the currently available formatters to be set as default within vscode

Inline Imports

Features

✓converts imports into single line
✓at the same time converting @/ to ~/
✓right click in editor, under formatters select formatters

Remove Trailing Commas

Features

✓Right-click in the editor and select from the Formatters submenu to remove trailing commas from JSON files.

Batch Rename

Features

✓Select file(s) in the VSCode explorer.
✓Opens a .txt file listing the names in a single column.
✓Mass edit file names and/or extensions.

Add Missing Imports w/ Global Config

Features

✓Right-click in the editor and select 'Add Missing Imports'.
✓Also, there is an option to configure a globally accessed file for commonly used imports.
✓Configure the global imports file to streamline your import statements.

Add ESlint & Prettier configs

Features

✓Right-click in the editor or explorer.
✓Select 'Add ESLint & Prettier configs'.

Remix-Run

Specific features used with the remix-run platform. npx create-remix@latest... Remix v2 is now part of React Router!... sigh...

create-remixv2

Still want to use npx create-remix?

Use this in its place:

✓$ npx create-remixv2
✓Uses the same platform, just a different builder to create your remix app
✓lets you choose pkg mgr and template at build time, lets you choose from remixs base templates and 30 of the most used stacks
✓wont add anymore stacks as you can reference the stack you want on the cli when you run the command user/repo

Auto Create Action

Create complex actions with a click.

Features

✓Form Detection
✓Scans for both <Form> and fetcher.Form components
✓Also detects programmatic submissions via fetcher.submit()
✓Intent + Schema Parsing
✓Extracts intent from form data
✓Detects schema via {/** user */} comments (defaults to test)
✓Detects schema via a comment above the form that the function will be able to search for the schema object followed by its data, the second word in the comment will be for update functions, for the where aspect
✓ie: // Inventory id
✓ie: {/** Inventory id */}
✓Prisma Method Inference
✓Auto-detects CRUD operation based on intent name:
✓deleteProgress → prisma.[schema].delete()
✓updateItem → prisma.[schema].update()
✓Incremental Updates
✓Checks existing action for duplicate intents
✓Preserves auth/session logic
✓Appends new conditions before the final return
✓VS Code Integration
✓Works with active editor
✓Shows warnings when no forms are found

Custom Remix Stack - 8an3/Bane

Mono repo variant coming soon, both will be converted to react-router once I make the switch

Clone

git clone https://github.com/8an3/bane-stack.git

Clone

git clone https://github.com/8an3/bane-stack-monorepo.git

Features

✓The goal? Starting off with a project, that already has the recources to complete everything you need to code. From hero sections, to sidebars, to pre configured tables... That way your not off wondering the internet looking for ideas, components or code, thus wasting a huge amount of time.
✓Intentionally leaving the core of the stack, the default remix stack w/ vite, unchanged as most of the time this is one of the items that seems to take the least amount of time when building your app. Your only doing it once for the project, not 1-10 times per route

Tech

✓Radix ui / shadCN components
✓v1 route convention
✓Superuser Task Runner
✓TanStack Tables
✓React Day Picker
✓Remix Auth
✓Contains default route template
✓pre-made sidebar with header and footer dropdowns
✓Clean pre configured tanstack table, one for any type of data, and another designed for a ticketing system
✓Adding all of shadCN blocks w/ its own submenu that branches by category - currently adding them to a section in my stack, so the code is already added, just import where you want to use them, there is a section to view them when you get a dev server up and running - not completed

Overview of some of the items you can find within the project

Blocks

✓sidebars
✓calendars
✓charts
✓dashboards

Custom UI

✓announcement
✓ButtonStyled
✓callout
✓data
✓debouncedInput
✓filter
✓fuzzyFilter
✓fuzzySort
✓incId
✓loadErrorPage
✓loading
✓loadingPage
✓nav
✓nav
✓nav
✓NavButton
✓NavButtonStyled
✓options
✓PaginationButton
✓smallTable
✓team
✓tooltipButton
✓table

Examples

✓Authentication
✓Cards
✓Dashboard
✓Forms
✓Mail
✓Music
✓Playground
✓Tasks

Sections

✓BentoGrid
✓Blog
✓Changelog
✓ConfigSection
✓Contact
✓Content
✓CTA
✓DisplayCode
✓DisplayGithubInstall
✓DisplayInstallCode
✓DisplayInstallCodeArray
✓FeatureSection
✓HeroSection
✓ImageSection
✓JsonSection
✓Newsletter
✓NoteSection
✓PageHeader
✓PageNav
✓Pricing
✓SectionTitle
✓Stats
✓Team
✓Testimonial
✓TsxSection
✓UsageSection
✓UsageSectionNoDash

Utils

Ecommerce

✓CategoryFilters
✓CategoryPage
✓CategoryPreviews
✓CheckoutForm
✓CheckoutPage
✓DetailsScreen
✓FeedComponents
✓GridLists
✓HomeScreen
✓IncentiveSection
✓LandingPage
✓OrderDetailsPage
✓OrderHistory
✓OrdersSummaries
✓PageHeadings
✓PricingPage
✓ProductLists
✓ProductOverviews
✓ProductPages
✓ProductQuickviews
✓ProductsFeatures
✓PromoSection
✓ReviewsSection
✓SectionHeadings
✓SettingsScreen
✓ShoppingCart
✓ShoppingCartPage
✓StackedLayouts
✓StackedLists
✓StorefrontPages
✓StoreNav

Auth

✓Remix auth w/ login and logout routes, consisting of username / password
✓along with the sessions and authenticator pre-configured
✓Also comes with Remix OTP
✓Routes are placed in the components folder under /auth/otp
✓otp's session function and authenticator are placed in /modules/auth/otp

Open Route File In Browser

Features

✓Right-click in the editor.
✓Open the Remix submenu.
✓- 'Open current route in browser' opens your default browser to the selected page or route.
✓- 'Preview URL' copies the URL to your clipboard.
✓- made port dynamic by editor context

Create Route Files

Features

✓Right-click in the editor.
✓Open the Remix submenu.
✓Select any available option to insert at the cursor position.

Context Components / Functions

Features

✓Right-click in the editor.
✓Open the Remix Components submenu.
✓Select any option to insert at the cursor position.

V2 -> V1 Routing Convention Conversion

Features

✓Converts routes from the v1 routing convention to the v2 routing convention. If any issues occur, it restores routes to their original state.
✓Right-click in any editor and select 'Convert v1 routing to v2' from the Remix submenu.
✓As a precaution for rare bugs, be sure to push your project before running this command.

Create Single Project Function

Features

✓viewers dropdown menu, under master apps

Create Mono Repo Project

Main apps included are remix, shadcn components, tailwind, and various others

Features

✓viewers dropdown menu, under master apps

Convert Single Project App To Mono Repo

Features

✓converts the app into the same configuration of mono repo as above

Routing Convention Conversion Remix-Run

Converts routes from the v1 routing convention to the v2 routing convention. If any issues occur during conversion, routes will be restored to their original state.

Features

✓Right-click in any editor and select 'Convert v1 routing convention to v2' from the Remix submenu.
✓As a precaution against rare bugs, be sure to push your project before running.

Create Tests for Routes and Actions In Remix-Run

Converts routes from the v1 routing convention to the v2 routing convention. If any issues occur during conversion, routes will be restored to their original state.

Features

✓Right-click a file in the editor and select 'Create Test For Route & Action'.
✓Creates a results page at `routes/tests/dashboard.tsx` if it doesn't already exist.
✓Generates test files in `routes/tests` with filenames matching the files being tested.
✓Visit the dashboard and click 'Run' to view results for all created tests.
✓Automatically pulls actions and creates tests for every `prismaexport` function.
✓For updates requiring parameters, it fetches the first object from the database for that model.
✓Ensures proper testing by reading the model from the schema file to provide correct parameter types (e.g., String, Boolean).

Install Auth in Remix w/ Auth Routes

Features

✓Right-click `package.json` and select 'Install Auth in Remix w/ Auth Routes'.
✓- including all of its scaffolding, editor context
✓in the viewers drop down, under Projects

Install OTP Into Remix w/ Auth Routes

Features

✓Right-click `package.json` and select 'Install OTP Into Remix w/ Auth Routes'.
✓Creates login, logout, and all necessary files for OTP functionality, then installs dependencies.

Convert Remix-Run File to Platform Agnostic

Features

✓- Initial testing was succesful but I have not had the time to thoroughly test this, mileage may vary
✓- converts a remix run route, to one of 6 commonly used
✓- after right clicking file in the editor, quick pick menu displays with the available options
✓- converts all remix run functionality to the chosen platforms flavour

React-Router

npx create-remix@latest... Remix v2 is now part of React Router!... sigh...

Features

File / Folder Based Routing

✓Directory Structure Convention
✓src/
✓ routes/
✓ index.tsx -> /
✓ about.tsx -> /about
✓ users/
✓ index.tsx -> /users
✓ [id].tsx -> /users/:id
✓ $userId.tsx -> /users/* (catch-all)
✓ _layout.tsx -> Layout wrapper
✓ _error.tsx -> Error boundary
✓ admin/
✓ _layout.tsx -> Nested layout
✓ dashboard.tsx -> /admin/dashboard

Features

✓File-Based Routing:
✓index.tsx → /
✓about.tsx → /about
✓[param].tsx → /:param
✓$slug.tsx → /* (catch-all)
✓Nested Routes:
✓Folders create nested routes
✓Supports layout routes with _layout.tsx
✓Remix-Like Conventions:
✓Automatic route parameter conversion
✓Support for loader/action functions
✓Error boundaries
✓Dynamic Imports:
✓Routes are loaded dynamically
✓Supports code splitting

Theme Section

VSCode Color Theme Builder

Features

✓Preset Themes - Apply professionally designed, cohesive color schemes across your entire UI in under 15 seconds
✓Quick Customization - Modify core colors (background, foreground, primary, etc.) with a streamlined interface that updates the entire UI consistently in under 5 minutes
✓Full Color Palette - Click any color from the comprehensive palette and instantly apply it anywhere in your theme
✓Manual Control - Fine-tune every individual color element for complete customization (time varies by preference)
✓Real-Time Preview - Watch your theme changes apply instantly as you design, with live UI updates in the builder

Export & Save Options

✓Copy as Tailwind - Generate Tailwind CSS classes from your theme for use in any project
✓Copy as VSCode - Export theme to clipboard for manual application elsewhere
✓Save to Workspace - Automatically saves to .vscode/settings.json (prompts for workspace selection if multiple are open)
✓Save Globally - Applies theme to your global VSCode settings for use across all new workspaces (respects local workspace themes when present)
✓The theme builder exceeded original expectations by creating a seamless workflow from design to implementation. The ability to craft a custom theme for your project and instantly apply it to your VSCode environment with a single click transforms the development experience, making theme consistency across web projects and editor environment effortless and intuitive.

Blacked Out

The effect is a clean, all-black theme (obviously), removing all the attention-grabbing features (the unicorn puke), so you can keep coding without stopping to fix things and get back into flow

Features

✓Under 'Configuration' submenu in the Extensions dropdown
✓Quickly applies the all-black theme
✓The theme really helps reduce eye strain during long coding sessions due to its low brightness — especially noticeable on larger screens (50"+). If you're using a big monitor like me, give it a shot — it might become your new default UI theme because of the massive reduction in screen glare
✓Added this as a separate feature in the Theme Configurator for quicker and easier access

Theme Config

-Disables all unicorn puke used throughout the UI
-Mutes the text color in:
-- Sidebars
-- Unfocused labels
-- Status bar
-- Window top bar
-- Dropdown menus
-- Toasts
-- Editor text is set to a near-white for easy readability

Window Differentiator

his feature is intended for use with Blacked Out, or if you prefer using the same color theme globally

Features

✓Applies a random color to the status bar, window top bar, and activity bar
✓Extremely helpful when working with multiple workspaces, providing a subtle, non-intrusive UI indicator to show which workspace is currently focused — all while keeping your preferred theme intact
✓Instead of manually editing settings for every new project, this keeps your default theme intact and only updates 3 values in `settings.json` with a randomly chosen color from a default list — saving time and preventing confusion after coding for a few minutes in the wrong window
✓Colors are chosen from shadCN’s palette, typically the 900 or 950 variants — I excluded rose, fuchsia, and a few others I couldn’t stand

Reset - Window Differentiator

Features

✓Replaces the values used in the above feature with those from the Blacked Out theme to restore your default setup

ShadCN Section

Add ShadCN Components

Features

✓Right click in editor
✓In the shadCN submenu
✓select an option you would like to insert
✓inserts component at cursor

Install ShadCN w/ Components

Features

✓Or select viewers
✓In the project submenu
✓select install shadcn with components

GitHub Section

GitHub Repo Management

Features

✓In the quick pick menu on the status bar (bottom-left corner), find and select 'DevStack'
✓choose one of the first four options
✓Added automatic add, commit, push, and versioning features
✓Includes behind-the-scenes handling of clean or dirty local repositories to ensure execution regardless of state.

Open Repo in Browser

Features

✓Right-click in the editor or explorer.
✓Select 'Open GitHub Repo in Browser'.
✓Opens your default browser to the repository.

Open GitHub Repo At File

This is NOT replacing the original variant

Features

✓- instead of just opening your repo in the browser, it will navigate to the file within the repo from where you activated this function
✓- I use this, way more than I thought I would. But it triggers me every time I use it, then having to still navigate to the file from where I activated the function. Some code bases, we all know how easy it is to get around. But if it's a larger code base with github's annoying nuances within the sidebar nav... fuck that... I know, talk about first world coding problems, but still triggers me when it shouldn't obviously this extension pampers you
✓- it should reside right underneath the original variant for easy access
✓- sigh, the dev host is bugging out not allowing me to test... fuck, well... when in doubt, yeet, I guess
✓- ***Borat voice: 'Yeet was great success!'***

Prisma Section

Create Include Object

Features

✓highlight, then right click on the schema object name in editor and select create includes object
✓it will grab all the nested relations from your schema and produce an object where it will include all relative schemas automatically
✓going 2 deep
✓In the images I'll show how to best work with it
✓1. above your prisma function type the schema object capatalized
✓2. highlight and right click and select the option under prisma
✓3. the include variable will be built for you automatically
✓for the action portion, almost same as above, but instead type the schema object where you would put data: and repeat the remaining steps

Create Action Object

Features

✓same as above but for create/update prisma statements
✓right click in editor, under prisma select Create action object
✓going 2 deep

Click To Schema Object

Features

✓Right-click a model name anywhere in your project.
✓Select 'Open Schema Object' under the Prisma submenu.
✓Opens your schema file at the location where that object is defined.

Generate Crud Resolvers / Rest End Points

Features

✓Hover to highlight or select items and generate resolvers or REST endpoints
✓Preview by hovering to highlight or select, then generate resolvers or REST endpoints
✓
✓Open the Prisma submenu
✓Select 'CRUD'

VSCode Extension Managment For Devs

When working on VSCode extensions, added a feature for easier installing and upgrading. Accessible via the quick pick menu on the status bar, working seamlessly whether the workspace is clean or dirty.

'Clean' and 'dirty' refer to whether your local repository matches the remote repository. Upgrading requires your local repo to be in sync with the remote. More importantly, this feature automatically adds versioning to each push with zero extra effort, enabling you or your users to reference older code easily.

Features

auto add commit and push

✓Saves all files.
✓Stages all changed files.
✓Commits with an automatic message.
✓Finally, pushes the commit to the remote repository.

auto upgrade patch

✓Continuation from above.
✓Upgrades the patch version.
✓Pushes changes to GitHub.

auto upgrade patch, create and reveal vsix

✓Continuation from above.
✓Creates the VSIX package.
✓Opens Windows File Explorer at the VSIX location for quick upload.
✓Automatically opens Microsoft Publisher’s Extensions page.
✓Installs the VSIX in VSCode and reloads extensions while updating on Microsoft’s site.

yeet, slight difference from above, as the name states its just a one button click to do everything

✓Saves all files.
✓Starts a wait sequence for a new `.vsix` file to appear in the root folder.
✓Displays a toast notification to cancel the wait sequence.
✓Pushes changes to the repository.
✓Upgrades the patch version.
✓Builds the package.
✓Installs the package.
✓Reloads the UI.
✓Pushes the VSIX package to the marketplace.

System Files Section

File Nesting

Features

✓Currently in developement...

Reveal In Explorer

Features

✓Right click a file in the navigator to reveal in explorer

Copy Path

Features

✓Right click a file in the vscode panel and select copy path

UI Section

Bookmarks

Features

✓Right-click the line in the file you want to bookmark and select 'Bookmark'.
✓Keeps up to 20 bookmarks.
✓Bookmarks accessible through the status bar button.

Remove Extension Produced Messages

Currently in developement...

Features

✓Removes all console.log messages.
✓Suppresses all vscode.window.showInformationMessage toasts.
✓Suppresses all vscode.window.showErrorMessage toasts.
✓All messaging is centralized. A status bar button labeled '$(warning) Messages' opens a quick pick dialog with color-coded messages:
✓- Grey: console.log and info messages.
✓- Red: errors.
✓- Green: success messages.
✓Note: The first version didn’t work as expected and is currently disabled. It will be reworked.
✓The goal is to remove all toasts from this extension and centralize messaging.

Search Bar

Features

✓Button on the title bar for faster access.
✓Experimental second quick-access panel designed for fast searching—useful for large projects where certain files are accessed often enough to matter, but not often enough to occupy space in the main quick access panel. Includes items from the first panel too. Still in testing.
✓Configuration is done by editing the config file directly.
✓Uses the same object structure as the main nav config.
✓Currently limited to the workspace scope, since its items are only relevant per workspace.
✓Accessible from the extension UI.

Clipboard History Pro

Features

✓Button in the status bar that opens a quick pick showing the last 20 clipboard items.
✓Hover over an item to see the full content in a tooltip.
✓Click an item to copy its contents back to your clipboard.
✓Clipboard history accessible via the status bar button.

Reference Section

Color Wheel

Bringing ShadCN's color picker to you within, vscode

Features

✓Instead of relying on sources outside VSCode, this creates a more seamless, efficient workflow — a recurring theme focused on cutting down time wasted switching to the browser to find information. I'll be reviewing other commonly used sources and integrating them as well
✓Opens an editor with a webview
✓Displays all colors with V3 HEX, V4 OKLCH, and V4 CSS Custom Properties
✓Toggle to include or exclude the hashtag when copying a color value to the clipboard
✓Copies the selected color value to the clipboard

Lucide Icons

Features

✓w/ Fuzzy Search
✓Wider Search Params - each icon has a pool of params that wil provide the correct icon even if the user searches by another libraries name
✓includes customizer that provides its values within a className
✓when selected the jsx object, with or without the className, will be copied to your clipboard with the correct naming convention for jsx/tsx and ready to be pasted where ever its needed
✓added pagination, updates to size, width and color are instant

Tailwind Converter

Converters are currently all over the map, in terms of their outputs. Ranging in colors, they all seem to be close enough aside from a few really getting the input wrong. This hasn't been tested thoroughly so whatever your result is, if its not close I apoligize but this will be a tool that I will continue to chip away at in chasing perfection with conversions.

Features

✓v3 to v4 tailwind conversion and vice versa
✓takes your entire root or dark input for example:
✓ --background: 0 0% 100%;
✓--foreground: 0 0% 3.9%;
✓--card: 0 0% 100%;
✓--card-foreground: 0 0% 3.9%;
✓--popover: 0 0% 100%;
✓--popover-foreground: 0 0% 3.9%;
✓--primary: 0 0% 9%;
✓--primary-foreground: 0 0% 98%;
✓but includes an example input via ui button

Notes, To-Dos And Things

The universal productivity companion that grants access, anywhere - from your IDE to your phone to any web browser.

Features

✓Currently still a seperate extension but the merge is in development
✓Wider Search Params - each icon has a pool of params that wil provide the correct icon even if the user searches by another libraries name
✓includes customizer that provides its values within a className
✓when selected the jsx object, with or without the className, will be copied to your clipboard with the correct naming convention for jsx/tsx and ready to be pasted where ever its needed
✓added pagination, updates to size, width and color are instant

Task, Notes and Things is a comprehensive productivity solution designed for developers and teams who need their notes, todos, and reminders accessible across every device and platform. Unlike traditional note-taking apps that lock you into proprietary ecosystems, this app leverages GitHub as your single source of truth, giving you the power of version control, collaboration, and universal accessibility.

Features

✓Virtually, every dev has had to make a notes / to do / reminder app. So why is it that, there isn't a decent option available in the marketplace. All the options I tried had the jankiest ui's. Then, there isn't even an option that supports presenting the data to you via your phone or anywhere else outside vscode
✓App Goal: Whenever and no matter what I am, I have access to the data, where I can add, edit or delete data, along with the same data being accessible in vscode, ofcourse
✓How is there not even an option, that has decent, albeit jank, ui
✓The VSCode implementation, I implore people to atleast try it if you need it. I would ask that you create your own mobile versions ( if it isn't already, I will make the library public so all you have to do is install locally, install libraries ( because vercel needs a lockfile ), push to github and create the project on vercel ). The only reason I'm leaving access open is because, there is no option out there. For newer users, do not even attempt to make your own mobile version the way I did. People can barely learn the GITHUB cli, nevermind creating a back end that acts like github and ensure no data loss / curruption. This is why I'm leaving access open.
✓The reason for this, I'm paying out for to host it and such. I don't mind, if you are uncomfortable deploying, that you use the provided mobile version. You just login via your github credentials, removing the need to create an account
✓The web version, went through a overhaul and be because I'm working from home, and never leaving, I have't had the change to extensively test, everything tested thus far is currently working.

The Complete Ecosystem

✓This isn't just another note-taking app. It's a complete productivity ecosystem that adapts to how you actually work:
✓- VSCode Extension - Seamlessly integrated into your development workflow
✓- Mobile App - Full-featured mobile experience with offline capabilities
✓- Web Access - Open any browser, access your GitHub repo, instant productivity
✓- GitHub Integration - Every note, todo, and reminder is version-controlled and shareable
✓- Team Collaboration - Real-time sync ensures everyone stays updated
✓- Offline Support - Keep working even without internet, sync when reconnected

Built for Real Workflows

✓Designed around the reality of modern development work
✓- you're not always at your desk
✓- you don't always have the same tools available
✓- and you often need to collaborate with others.
✓Whether you're a solo developer managing personal projects or part of a team shipping enterprise software, Task, Notes and Things scales to your needs without getting in your way.

Configuration

File & Data Organization

-Uses GitHub repositories as a single source of truth for both the VSCode extension and mobile version.
-File Priorities
-Priority - Important items that need attention
-Normal - Standard everyday items
-Completed - Archived finished items
-Trash - Soft delete (like Windows recycle bin)
-Coming Up - Reminders with scheduled notifications
-Sync & Collaboration
-Real-time sync - At runtime, syncs local items with GitHub repo to ensure you have the most up-to-date data
-Public or private repos - Enables all of GitHub's features in correlation with this extension
-Team collaboration - Whether you're a small team on a personal project or a development company, ensures fresh data is shared with the entire user base in real time
-Web accessibility - Access your data wherever, whenever through the web version
-User management - Add, edit, or remove user access easily
-Easy sharing - If your notes contain important information, they're easily cloned or shared without hassle

VSCode Extension

-Quick Actions
-- Create files with buttons on their respective tabs within the navigator
-- Lists each item by title for easy overview
-Todo Lists
-Navigator preview - View todo items in the navigator without opening files
-One-click checking - Check or uncheck items easily in the navigator
-Auto-sync - Whenever an item's checked state changes, it automatically syncs with GitHub
-Click to edit - Click any item's title to open its file in the editor
-Editing Experience
-Markdown editing - Edit in familiar .md files with all your usual tools
-Auto-save sync - Changes automatically sync to your repo when you save
-Reminder notifications - Toast notifications appear in VSCode when reminders are due

Mobile Version

-Organization
-- All files listed by title
-- Reminders automatically organized by date
-- Local data storage for offline access
-Offline Support
-Offline editing - Continue working without internet access
-Smart sync - When connection is restored, syncs with GitHub to grab missing data
-Push on reconnect - Uploads any data created/edited while offline
-Viewing Modes
-Title View
-- Browse all files by title
-- Select to open respective file
-Check/Edit Mode *(Todo lists only)*
-- Merges all todo lists and displays all items together
-- More efficient workflow for reviewing all list items
-- No need to open, review, close, repeat for each list
-- Check items directly - updates line item and syncs with GitHub
-Settings Dashboard
-Full GitHub integration - Access all GitHub features from the settings
-Repository management - Create new repos for new 'databases'
-User management - Add or remove users from your current repo
-Complete control - Everything achievable without visiting GitHub directly

Notes, To-Dos And Things - Mobile App

Clone

git clone https://github.com/8an3/NTRSync-Mobile.git

Features

✓login via github credentials
✓each category of file type will have its own page to list items
✓create, edit delete items, and check off to do list items
✓upon connection resoration, sync with github, allowing access when offline
✓to do lists views
✓- displaying a list of to do lists by their title and priority
✓ - when a list is clicked, it will open that files to do list
✓- check mode
✓ - cannot edit any line items description
✓ - converts all to do lists, into one large uninteruppted list
✓ - each line item becomes a button, when clicked will changed the completed status
✓ - allowing the user view and edit line items, in a much easier, less time consuming fashion
✓ - when ever a line item changes, save the data to the relevant file and pushes to github
✓whenever a value, pushes to github, unless offline
✓when offline, saves locally in your browser, when back up, syncs dirty data
✓enabling zero downtime

Configuration

File & Data Organization

-Uses GitHub repositories as a single source of truth for both the VSCode extension and mobile version.
-File Priorities
-- **Priority** - Important items that need attention
-- **Normal** - Standard everyday items
-- **Completed** - Archived finished items
-- **Trash** - Soft delete (like Windows recycle bin)
-- **Coming Up** - Reminders with scheduled notifications
-Sync & Collaboration
-- **Real-time sync** - At runtime, syncs local items with GitHub repo to ensure you have the most up-to-date data
-- **Public or private repos** - Enables all of GitHub's features in correlation with this extension
-- **Team collaboration** - Whether you're a small team on a personal project or a development company, ensures fresh data is shared with the entire user base in real time
-- **Web accessibility** - Access your data wherever, whenever through the web version
-- **User management** - Add, edit, or remove user access easily
-- **Easy sharing** - If your notes contain important information, they're easily cloned or shared without hassle

Config Section

Share With Friends

Default Apps Configuration

Features

✓Allows you to control which features you have access to.
✓Configuration is located in:
✓- The extension’s settings accessible through its marketplace listing.
✓- The config submenu via the title bar dropdown.
✓- The new UI coming soon.

View Config Example

Features

✓In UI
✓In the sidebar click example configs

// #dev

replicating // #region and // #endregion, but instead of messing with anything that you already in place this uses // #dev and // #enddev

Features

✓- I tried for 3 hours to muscle vscode for a solution, without adding another feature. The issue, and I cannot be the only one that runs into this, working with larger files wanting certain sections to fold on file open. I didn't want to fold everything, for example as you can assume my package.json file for this extension... is stupid to say the least. BUT with all the object structures I didn't want everything to fold, then I would have the same issue, but just in reverse. Sooooo, without any luck I had to make another feature.
✓- on file open it folds all #dev regions
✓- IF the region has child #dev regions, the parent stays open while its children fold
✓- provider a vscode providor so the folding icons display for all #dev regions, allowing them to act exactly like the vscode variant already in place
✓- a button in the extensions title bar emulates the open file feature, but whenever its triggered
✓- it will not trigger on file switching, only on file open
✓- Now this is great and all with taking care of one part of the solution. BUT if you have the same issue with package.json files, the next part will provide that solution. Not only for packages for extensions, but even projects that have a lot of devdeps and deps in the file since some libraries like to split up the 100 or so 'addons' they have. You could use this to fold deps and devdeps at open.
✓- As you already know, you cannot leave comments in package.json, at the same time you cannot use jsonc for package, as far as I can tell anyways. Maybe someone out there knows the secret to that, if you do message me, because I can't find it within the documentation on whether this can be done.
✓- in your clean package.json, place "clean-package": "node scripts/build.js" within scripts
✓- create package.dev.jsonc
✓ - this will now be the file that you do everything with, leaving the original file alone
✓- in scripts/build.js place the following ( the code will be placed after this section )
✓- At this point you have a couple of options, you can incorporate it into a custom chain function in the extension. Meanwhile, if you are working on an extension and want to package and publish along with everything else needed to be done, at the touch of a button, located in the DevStack quickpic ( located in the status bar ), labeled 'build extension +++'. It will:
✓ - save all open editors
✓ - build your package.json file from package.dev.jsonc
✓ - push to git
✓ - upgrade patch
✓ - build vsce package
✓ - finally, publishing the package with vsce publish
✓- But if you aren't working on an extension you can still use the script to build your package.json into a clean state without comments. All the while providing a second option for folding that auto folds on file open, while #region sections do not fold automatically and both can be used within the same file to benefit from both features at the same time.
✓There was one oversight in the code, that is already fixed, but I had forgotten to first take the version number place it into jsonc, THEN continue with the remaining code. Ensuring that the scripting doesnt stay locked at one version number when executing

Usage

Item

-- // #dev
-- //#dev
-- // #dev commment
-- //#dev commment
-- // #enddev
-- //#enddev

scripts/build.js


// scripts/build.js
const fs = require('fs');
const path = require('path');

try {
    const packageDevPath = path.join(__dirname, '..', 'package.dev.jsonc');
    const packageJsonPath = path.join(__dirname, '..', 'package.json');
    
  if (!fs.existsSync(packageDevPath)) {
        console.error('❌ package.dev.jsonc not found!');
        process.exit(1);
    }
    
    if (!fs.existsSync(packageJsonPath)) {
        console.error('❌ package.json not found!');
        process.exit(1);
    }
    
    // Step 1: Read current version from package.json
    console.log('📖 Reading current version from package.json...');
    const currentPackageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
    const currentVersion = currentPackageJson.version;
    
    if (!currentVersion) {
        console.error('❌ No version found in package.json!');
        process.exit(1);
    }
    
    
    // Step 2: Update version in package.dev.jsonc
    console.log('📝 Updating version in package.dev.jsonc...');
    let devContent = fs.readFileSync(packageDevPath, 'utf8');
    
    // Replace version in package.dev.jsonc (handles both quoted formats)
    // This regex looks for "version": "any.version.here" and replaces the version part
    const versionRegex = /("version"s*:s*")([^"]+)(")/g;
    const updatedDevContent = devContent.replace(versionRegex, `$1${currentVersion}$3`);
    
    // Write updated package.dev.jsonc back
    fs.writeFileSync(packageDevPath, updatedDevContent, 'utf8');
    console.log('✅ Version updated in package.dev.jsonc');
    
    
    console.log('📖 Reading package.dev.jsonc...');
    const content = fs.readFileSync(packageDevPath, 'utf8');
    
    // Split into lines and filter out dev marker lines
    const lines = content.split('
');
    const cleanedLines = lines.filter(line => {
        const trimmed = line.trim();
        // Remove lines that contain dev markers with // comments (any spacing)
        return !(trimmed.includes('//') && trimmed.includes('#dev')) && 
               !(trimmed.includes('//') && trimmed.includes('#enddev'));
    });
    
    // Join back together
    let cleanJson = cleanedLines.join('
');
    
    // Remove trailing commas before closing brackets/braces (more thorough)
    cleanJson = cleanJson
        .replace(/,(s*
?
s*[}]])/g, '$1')  // Handle commas before newlines and closing braces/brackets
        .replace(/,(s*[}]])/g, '$1');         // Handle commas directly before closing braces/brackets
    
    console.log('🔍 Attempting to parse JSON...');
    
    try {
        const parsed = JSON.parse(cleanJson);
        console.log('✅ JSON validation passed');
        
        // Write the clean package.json
        fs.writeFileSync(packageJsonPath, cleanJson, 'utf8');
        console.log('✅ Successfully copied package.dev.jsonc → package.json');
        console.log('🧹 Removed //#dev and //#enddev lines');
        
    } catch (parseError) {
        console.error('❌ JSON Parse Error:', parseError.message);
        
        // Write debug file for inspection
        fs.writeFileSync(path.join(__dirname, '..', 'debug-output.json'), cleanJson, 'utf8');
        console.error('📝 Output written to debug-output.json for inspection');
        
        process.exit(1);
    }
    
} catch (error) {
    console.error('❌ Build script failed:', error.message);
    process.exit(1);
}

Left Off Note

A reusable single use note accessible via right click in editor so we can save the file and line number for the bookmark that opens vscode when clicked

Features

✓- a reusable single use note accessible via right click in editor so we can save the file and line number for the bookmark that opens vscode when clicked
✓- cursory overview: to leave your self notes on what you were working on last, what you had planned at that point so you can immediatly jump back into the code, whether its been a day, week, a month, or was too busy with another project
✓- ability to leave:
✓ - checklist
✓ - unordered list
✓ - ordered list
✓ - code examples
✓ - ai prompts answers, incase you were working on something and need to stop working at a moments notice ( I find at weird times, it doesn't always save everything
✓ - leave a bookmark of file and line number of where you left off
✓ - maybe even upload a single file
✓ - either long / short note
✓ - to auto set the date and time when the file was last saved
✓ - save the context as meta data in the file in vscode before the browser requests it on load
✓ - or if the file already exists, a button appears in the extensions title bar, opening the browser and displaying the note
✓ - saves globally, whether you have one instance open or 10 will grab the correct instances note, at the same time saving to the correct instances note. This makes it a lot easier for the end user, by removing the responsibility to save to the correct instance / instance file
✓ - Building it browser side leaves us with unlimited possibilies / options, instead of getting pidgeon holed in vscodes interface

Configuration

File Management

-item
-item
-item
-item

Configuration

[
  {
    "label": "add",
    "path": "git add .",
    "type": "powershellCommand"
  },
  {
    "label": "commit",
    "path": "git commit -m 'message'",
    "type": "powershellCommand"
  },
  {
    "label": "push",
    "path": "git push",
    "type": "powershellCommand"
  }
]

Usage

Item

-item
-item
-item
-item

NOTE

Have already been using this idea for a while, but in the form of a note. Being what it is, it creates a couple of issue. Unless I create a list of them, which I dont want, at that point they just become your everyday to do list practically. Which this isn't trying to be that, and it being project specfic meets that requirement and allows one for each project

Shortcuts

I don't know why I didn't start this earlier, but while Im here...

Features

✓- Just so it doesn't compete with any familiar short cuts that are already in place. Instead of ctrl, alt will be used in its place
✓- side note, instead of having to come back here when you first start to use them, refer to the bookmarks quickpic, located in the status bar on the left

Usage

Shortcuts

-- Task, notes and things quick pick
- - technically in a different extension, because at the time I didn't know how to code the extension to be open in two seperate explorer panes simultaneously, on either side of the vscode instance... ( I'm not doing this now, as adding this would be a big change. With the the recent down time of the ui dashboard in mind, I will sideline this for now but it will be added to the to do list. )
- - alt + shift + t
-- Context Snippets
- - alt + shift + s
-- Clipboard++ History
- - alt + shift + c
-- Show Bookmarks
- - alt + shift + b
-- DevStack Quickpic
- - alt + shift + d
-- Open UI Dashboard
- - alt + shift + a
- - I know, the chosen character doesn't make sense, but 'd' was taken and 'u', needs two hands
-- Errors plus
- - ( Not suggested to use yet, as I'm still in the process of testing and it's not going the way I want in its current state, because of this it will not be added to the bookmarks reference, likewise for the following item )
- - alt + shift + e
-- Show Error History
- - alt + shift + h

Create Export Index ( Simple Registry )

Features

✓- right click on folder
✓- creates an index file in that folder
✓- recursively export *'s each file within that folder to tidy up import statements
✓- Not going to lie... I did not expect this to work as well as it does, or as smooth, or as quick as every other extension that claims to do this function, does not. Either crashing vscode, creating random index files somewhere else, with god knows what imports and more. Like wtf. I've been using this for a while now... and it works perfectly, as advertised.
✓- made this one specifically to work along side the ui library, as the quantity is wide in both actual components and categories.

Configuration

-item
-item
-item
-item

Configuration

[
  {
    "label": "add",
    "path": "git add .",
    "type": "powershellCommand"
  },
  {
    "label": "commit",
    "path": "git commit -m 'message'",
    "type": "powershellCommand"
  },
  {
    "label": "push",
    "path": "git push",
    "type": "powershellCommand"
  }
]

Usage

-item
-item
-item
-item

NOTE

item

Config Reference Sheet

DevStack Config

[
  {
    "label": "APPS_AND_PROJS",
    "expanded": false,
    "type": "folder",
    "global": true,
    "items": [
      {
        "label": "CRM",
        "path": "code-insiders -n f:/OpinionatedCRM",
        "type": "powershellCommand"
      },
      {
        "label": "Catalyst Software",
        "path": "code-insiders -n f:/Catalyst-Software",
        "type": "powershellCommand"
      },
      {
        "label": "CatalystPOS",
        "path": "code-insiders -n f:/CatalystPOS",
        "type": "powershellCommand"
      },
      {
        "label": "VLC w/ playlist",
        "path": "cd /mnt/f/music && '/mnt/c/Program Files/VideoLAN/VLC/vlc.exe' 1Firreee.xspf",
        "type": "debianCMD"
      }
    ]
  }
]

VSCode Cmds

[
  {
    "label": "add",
    "path": "git add .",
    "type": "powershellCommand"
  },
  {
    "label": "commit",
    "path": "git commit -m 'message'",
    "type": "powershellCommand"
  },
  {
    "label": "push",
    "path": "git push",
    "type": "powershellCommand"
  }
]

Chain Cmds

{
  "label": "Auto Push",
  "path": "add, commit, push",
  "type": "chain"
}

Superuser Task Runner Config

[
  {
    "label": "add",
    "path": "git add .",
    "type": "powershellCommand"
  },
  {
    "label": "commit",
    "path": "git commit -m 'message'",
    "type": "powershellCommand"
  },
  {
    "label": "push",
    "path": "git push",
    "type": "powershellCommand"
  }
]

STR - Parent Chain Command - Execution Type - Variety

[
  {
    "nuclear:all": {
      "sequential": true,
      "tasks": [
        "clean:all",
        "i:all",
        "build:all",
        "build:prod",
        "db:all",
        "db:prod",
        "patch:all",
        "dev:all"
      ]
    }
  }
]

STR - Child Chain Command

[
  {
    "push:app": {
      "directory": "apps/app",
      "command": "git add * && git commit -m \"Cleaning w/ push\" && git push"
    }
  }
]

STR - Parent Chain Command - Execution Type - Dev Servers

[
  {
    "dev:all": {
      "tasks": [
        "dev:app",
        "dev:calendar",
        "dev:pdf",
        "dev:server",
        "dev:api",
        "dev:publicSite",
        "dev:adminPortal",
        "dev:userPortal",
        "dev:headOfficePortal"
      ]
    }
  }
]

Open workspace in new window, if using code instead of code-insiders, use code instead

{
  "label": "CRM",
  "path": "code-insiders -n f:/workspace",
  "type": "powershellCommand"
}

json

{
  "label": "CRM",
  "path": "code-insiders -n f:/workspace",
  "type": "powershellCommand"
}

Open Windows Applications

{
  "label": "PGAdmin",
  "path": "& \"c:/Program Files/PostgreSQL/16/pgAdmin 4/runtime/pgAdmin4.exe\"",
  "type": "powershellCommand"
}

VSCode commands

{
  "label": "toggle terminal",
  "path": "workbench.action.terminal.toggleTerminal",
  "type": "command"
}

Opening files - in vscode editor

{
  "label": "admin dash",
  "path": "apps/app/app/routes/adminDash.tsx",
  "type": "file"
}

.md

{
  "label": "appIdeas.lawyerApp",
  "path": ".vscode//ocrmnavigator//.md//appIdeas.lawyerApp.md",
  "type": "file"
}

URLS

{
  "label": "8an3/OpinionatedDealerCRM",
  "path": "https://github.com/8an3/OpinionatedDealerCRM",
  "type": "url"
}

Snippets

{
  "label": "shad accordian",
  "path": ".vscode/ocrmnavigator/ocrmnavigator.code-snippets",
  "type": "snippet"
}

Debian bash cmds

{
  "label": "VLC w/ playlist",
  "path": "cd /mnt/f/music && '/mnt/c/Program Files/VideoLAN/VLC/vlc.exe' 1Firreee.xspf",
  "type": "debianCMD"
}

Debian bash cmds

if you actually want to open a playlist in vlc, you have to follow this to the tee. You need to cd into the folder where your playlist is, then call vlc from the debian containered path, finally give the playlist as a single argument. I dont know why... but it doesn't work any other way. Their docs haven't been updated since xp... so... ya...

Chain and hidden feature

[
  {
    "label": "Commit And Push Current Proj",
    "path": "saveall, commitpush",
    "type": "chain"
  },
  {
    "label": "Save All and Upgrade Patch",
    "path": "saveall, plusversion",
    "type": "chain"
  },
  {
    "label": "saveall",
    "path": "workbench.action.files.saveAll",
    "type": "command",
    "hidden": true
  },
  {
    "label": "plusversion",
    "path": "git add * && git commit -m \"Cleaning w/ push\" && git push && pnpm version patch && git push && git push --tags",
    "type": "powershellCommand",
    "hidden": true
  },
  {
    "label": "commitpush",
    "path": "git add . && git commit -m \"Cleaning w/ push\" && git push",
    "type": "powershellCommand",
    "hidden": true
  }
]

Development

New Features

✓Items placed here are awaiting for their own sections to be made and included among the others, or is currently in developement / testing:
✓Note: Editor / Context Menu
✓- Some items are being re-arranged, not only it being rediculous that the context menu is now just the entire height of the screen ( plus some ). I didnt want to do this too early and move frequently used items into submenus, just to move them back out. But after extended use, now knowing which items get used less I can safely move them into submenus
✓ - 'remix' submenu is now called 'special functionality', and will reside with-in 'remix' ( previously called 'remix components' )
✓ - it will be the first item in the context menu
✓ - 'open object in schema'
✓ - moved to 'prisma' sub menu
✓ - 'snippets' submenu is being removed
✓ - its items will be added to the top of the 'DevStack' submenu
✓Find Errors, Missing Imports & More
✓- I ran out of ideas on what to call these things a long time ago ( Not suggested to use yet, as I'm still in the process of testing and it's not going the way I want in its current state, its docs will be left here, unless its completely removed from the extension )
✓- This does NOT emply background processes, it has to be TRIGGERED in order for it to run. Thus not bogging down / slowing your vscode instance. The complete opposite of what similar features would do in extensions.
✓- With the decision of no background processes, instead I'm including some nice to have features that will help dev times
✓- to access right click the editor and click on 'Find Errors, Missing Imports & More'
✓ - short cut: alt + shift + e
✓- Quick pick menu located at bottom left status bar, that displays a history of your error messages.
✓ - short cut: alt + shift + h
✓- Once an error is clicked it triggers several functions:
✓ - tries to fix the error automatically, using vscodes built in engine
✓ - if that doesn't work, trigger copilot autocomplete suggestions
✓ - if that doesn't work, it opens copilot chat ( if available )
✓ - once open, sending the error message and related code as a prompt in the chat
✓ - it first send the first 5-10 surrounding lines, if no fix is suggested then offers to send the entire function that is effected
✓ - thus automatically triggering a response by copilot
✓ - if it cannot send a chat directly to copilot, it tries to open the chat sidebar
✓ - if unsuccessful, it finally tries to send a interactive editor message to copilot
✓- stores the last 5 fixes in state, in case you need / want to roll back more than just one
✓- for cross file dependencies, it uses vscodes built in engine
✓- ***this feature... is a test, just to see how well it works, if it even does. I have no idea if it will work great or just suck ass. So if you no longer have aceess to it, well then you know it was the latter.***
✓ - stores successful fix patterns locally
✓ - the error type along with its context
✓ - builds over time ( will only be used IF you use this feature. At the same time, it will just be code, so I'm not expecting this to bloat and take up too much memory, if it ends up doing this. This feature will get trashed )
✓ - thus allowing us to send copilot a successfull fix on a similar error, enabling us to get a much greater quality response from the ai engine with a higher probability of a successful fix
✓ - I don't have much hope for this to be honest, but you never know, it could be kick ass. I've been trying a lot of different tactics with prompts to ensure, not only outputting exactly what I want, but trying to increase its success rate with minimal effort. So intead of sitting there, giving it pixel by pixel dimensions employing this strategy you are trying to make it replace you and this takes so much time, you might as well just code. But I have found success with a specialized prompt catering to what I'm currently coding. Over time this allows me to refine the prompt, and ensuring the ai's output is perfect. While it still produces errors from time to time, I find it to be dramatically a lot less.
✓Recent fixes:
✓- DevStack - Cmds home - with how large the config can get, it was stupid to be dragging an item around, the click and drag will work on moving items within a folder, to change the items folder location, right click the item and select the folder under 'move to', placing it at the end of the selected folder
✓This is more of a note to myself, review entire readme to ensure everything is up to date due to the amount of changes that have occured, add / remove anything needed

Future Dev

✓Visualize schema object, start from scratch and build it on the browser side
✓bring generate readme and cheat sheet over to the new editor
✓Merge 'To-do, Notes and Things'
✓- will create a seperate pane for the merge, enabling both panes to be open simultaneously on either side of the vscode instance
✓- no new features will be added to this 'part' of the extension outside of the merge
✓convert remix stack to react-router

NOTE

Don’t be afraid to send ideas — as you can tell, I’m not shy about including anything if it’s smart or useful. That said, if your idea relies on background processes running frequently to work, feel free to send it, but don’t expect it to be implemented. The goal is to avoid bogging down VSCode in any way

If I think your idea is truly awesome and the performance trade-off is worth it, I’ll include it

Long story short: the platform they chose to build VSCode uses way more resources than it could have. Combine that with poorly built extensions that constantly eat resources, and you get the performance issues people complain about. That’s why I’m 99% sure I won’t include anything that runs in the background or needs to run frequently / constantly

Speaking of performance — if you're working in a large project and notice a hit to performance, I’ll include a JSON code snippet with settings you can tweak to get a LOT of that performance back

Tips

After saving these values, work backwards — start by removing this one from the list... // Remove **/*: true to re-enable watching for other files

{
  "files.watcherExclude": {
    "**/.git/**": true,
    "**/node_modules/**": true,
    "**/dist/**": true,
    "**/build/**": true,
    "**/public/**": true,
    "**/.cache/**": true,
    "**/false/**": true,
    "**/*": true
  },
  "javascript.validate.enable": false,
  "typescript.validate.enable": false,
  "search.followSymlinks": false,
  "git.enabled": false,
  "git.autorefresh": false,
  "git.allowForcePush": false,
  "search.useIgnoreFiles": false,
  "search.quickOpen.includeSymbols": false,
  "editor.quickSuggestions": {
    "other": false,
    "comments": false,
    "strings": false
  },
  "git.decorations.enabled": false,
  "scm.diffDecorations": "none",
  "security.workspace.trust.enabled": false
}

After saving these values, work backwards — start by removing this one from the list... // Remove **/*: true to re-enable watching for other files

That setting is obviously aggressive — but hey, maybe it fits your use case. It’s a slow process, I know (I’ve done it), but go through each setting one at a time. These values basically disable almost everything in vscode with a background process. Personally, I couldn’t care less about GitHub syncs — I turned that off. But I know some people can't live without it. Same goes for the others. If I remember right, there was only one I didn't want to disable. But the performance boost when setting all of these to false? Fucking massive.

In my largest project, I have every one of these set to false — including Git and diff decorations. I'll include those settings too. Before: constant CPU spikes, 10–15 seconds of full-throttle lag, sometimes nonstop. After: smooth sailing. My system hasn’t even touched 50% usage since. I haven’t had to revisit these settings at all, but you might find even more tweaks.

If you're still seeing issues after this, try figuring out what’s always or frequently running in the background — and kill it. For example, GitHub querying your repo and scanning for local changes can eat up way more than it should.

Issues

Currently down...

✓At this time, no issues to report that I'm aware of

NOTE

If you see an issue, let me know. I’m the only one working on this, and honestly, the feature list is getting ridiculous.

If something breaks because of a new feature I added and I didn’t catch it—give me some time and I will get to it.

Demo

Quick demo on youtubeWell, its not quick in length, but I try to go over everything quickly.

About

DevStack began as a personal productivity experiment - a collection of development tools I built to streamline my own workflow. What started as a hastily named project with zero marketing consideration has unexpectedly grown into something that resonates with developers worldwide. Features were only added when, I got too frustrated with the extension crashing, poorly designed ui, terrible application design, design choices that were horrible for the end-user, and more. A lot of the time, I just wanted to see if I could implement it and have it run smoother / faster.

The original name "OCRMNav" was admittedly terrible - a placeholder that stuck around far longer than it should have. I never added proper keywords, categories, or even a decent description. Yet somehow, this extension has found its way to thousands of developers who saw the same potential I did: the need for a comprehensive, all-in-one development toolkit.

The Evolution

When developers started reaching out with feature requests and feedback, I realized this wasn't just my personal tool anymore - it had become something the community wanted and needed. That's when I decided to rebrand to "DevStack" and give this project the attention it deserved.

Why It Worked (Despite Everything)

Sometimes the best solutions come from solving your own problems. DevStack succeeds because it addresses real developer pain points:

Too many extensions cluttering your VSCode

Poorly designed applications that use unneeded background processes which tank VSCodes performance

Repetitive workflow tasks that beg for automation

The constant context switching between tools

and much more

Moving Forward

Today, DevStack is a proper extension with clear documentation, thoughtful features, and a roadmap driven by community feedback. While I'm amazed anyone discovered it in its original state, I'm grateful for every developer who took a chance on a poorly named extension and helped shape it into what it is today. With everything above in consideration, I'm stunned anyone even found the project in its previous state, and after seeing horrible documentation due to only writing it for myself ( some things were even written as if I was talking to myself, haha ) and then shockingly still installing it. Makes no sense, unless the data in the dashboard is unhinged, which I don't see that being the case ( ... how did it even come up in searchs? )

Note For Any Included Libraries

Any libraries that were included in this extension ie: lucide icons, ShadnCN, tailwind etc. I did not create or had anything to do with the development of these libraries.

Their implementation in this extension is nothing but an extension of that library and its data. Just allowing / improving access to that libraries information within vscode for the end user and none of that libraries information was edited or left out for any purpose.

If you want to say thanks or give them feedback in regards to these libraries, contact them. If you have any comments about how the information is being presented to you within vscode, then contact me. For example, I did not make any of the icons for lucide, don't contact me for an idea about creating an icon. With saying that, if all the icons that are displayed, in vscode when you use this feature, are presenting one image across the 1000 or so buttons to click, then that's my dept, don't contact them, they will have no idea what your talking about. Thought to mention this because someone did contact me about a new icon and I wouldn't want you to waste your time.