Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>DevStackNew to Visual Studio Code? Get it now.
DevStack

DevStack

skyler

|
21 installs
| (0) | Free
DevStack - The Complete Developer Toolkit - Virtual file system, workflow automation, and more than 55+ other development tools / features in one seamless extension. Cutting down dev times never before seen.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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

🚀 Core Features, but not limited to. See nav for full list.

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

Development Tools

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

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

🎯 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

About DevStack (Formerly OCRMNav)

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? )


  • I. Overview & Roadmap
    • Virtual Filing System
    • Chain Execution / Sequencer
    • Config file
    • Project Agnostic Configuration
    • VSCode Commands
    • Commands Cheat Sheet
    • PowerShell Commands
    • Debian WSL Bash Commands
    • Snippets
    • .md Editor and Viewer
    • .md Cheat Sheet
    • Formatter
    • JSON Comments
    • Remove All Comments
    • Remove Trailing Commas
    • Remove console.log
    • Search Bar
    • Share Config With Friends
    • Editeable Folder Icons
    • VSCode Color Theme Builder
    • Default Apps Configuration
    • File Nesting
    • Batch Rename
    • NTRSync - Notes, Todo and Reminders - w/ its own mobile app, installable on any platform including desktop
    • Unused Function Finder
    • Clipboard History Pro
    • Bookmarks
    • Extension Produced Messages
    • View Config Example
    • Open Route File In Browser - Remix Run
    • Create Route Files - Remix Run
    • Install ShadCN Components w/All Components
    • Remove Unused Imports
    • Add Missing Imports w/ Global Config
    • Reveal In Explorer
    • Copy Path
    • VSCode Extension Management For Devs
    • GitHub Repo Management
    • Routing Convention Conversion Remix-Run
    • Create Tests for Routes and Actions In Remix-Run
    • Install Auth in Remix w/ Auth Routes
    • Install OTP Into Remix w/ Auth Routes
    • Add ESLint & Prettier Configs
    • Open Repo in Browser
    • Click To Schema Object
    • Editor Context Snippets
    • Generate Crud Resolvers / Rest End Points
    • Context Snippets
    • Context Model Snippets
    • Blacked Out
    • Window Differentiator
    • Reset - Window Differentiator
    • Lucide Buttons
  • II. Development
  • III. Ideas
  • IV. Issues
  • V. Config Reference Sheet
  • VI. Demo Usage
  • VI. Note For Any Included Libraries

Overview / Roadmap

Virtual filing system

  1. Files
    • [x] Just like similar extensions you have quick access to the files you use most.
    • [x] Add files to custom folders and sub-folders
    • [x] Edit display labels for files
    • [x] Remove files from navigation
    • [x] Copy file paths with one click
    • [x] Reveal files in system explorer
    • [x] add multiple files to quick access pane at once, all files will be added to the same selected folder
  2. Folders
    • [x] Create new categories
    • [x] Rename existing categories
    • [x] Reorder categories (move up/down)
    • [x] Delete categories when no longer needed
    • [x] Sub folders for even more organization
    • [x] Right and click type movement
    • [x] For smaller movements, move up or down one
  3. URLs
    • [x] Instead of opening a browser and rummaging through your bookmarks, its your in your nav panel.
  4. VSCode Commands
  5. PowerShell Commands
  6. .md
  7. Snippets
  8. Apps
    • [x] opens applications through terminal commands, handy when some need many specfic flags/long file locations
  9. Bash Commands
    • [ ] add shortcuts for each parent folder ctl 1 for folder 1, ctl 2 and so on, allowing to use the arrow keys to quickly navigate to the item desired and pressing enter to execute
  10. and more...
Usage...
  • Add to CRM Navigator

    • Add current file to navigator - right-click item explorer
    • drop down menu, under the add items submenu
  • Batch Add to CRM Navigator

    • Select as many files as you want, then with right clicking, it will allow you to select what category you wish to put them in, or create one if there isnt one you would like those items
  • Edit Label

    • Right-click item in navigator
  • Moving Files

    • Move files to another folder. Theres no drag and drop avaialble, so this is the next best thing.
    • 1 In the nav, right click the item you would like to move, and select move file item
    • 2 right click the folder you would like to move it to, and select select as move destination, so instead of having to hold it while you drag it and potentially "dropping" it, you can open folders and take your time on where you want to place it and dont have to pre plan placement either, if you were looking to move it a couple of folders deep
    • otherwise you would have to open the config to move the item which can be easily done
    • either
    • 1 in the navs drop down menu, select configuration and edit config file and it opens directly in your opened editor
    • 2 open the global config file, and edit it from there
  • Remove File

    • in the nav, right click the item
  • Copy Path

    • in the nav, right click the item
  • Reveal in Explorer

    • in the nav, right click the item
  • By right clicking on a folder, you access add folder, subfolder, URL, snipper, subfolder, vscode command, edit label, remove folder, folder movement ( cant do drag and drop like files, but you can move them up or down one ), expance or collapse by default, toggle to hide item and edit config file

  • By right clicking any other items, you will have access to all the same functions, aside from folders and sub folders, but edit, move, delete and so on

  • Nav dropdown ( any of these items can also be pushed on to the nav bar )

    • Refresh Nav
    • Viewers
      • Snippets
      • MD cheat sheet
      • Configure Formatters
      • VSCode cheat sheet
      • VSCode theme configurator
    • OCRMSearch
    • Add items
      • Chain ( currently this is easier to accomplish in the config file, this will change and a ui implementation is coming)
      • Folder
      • VSCode command
      • URL
      • md
      • md and opens cheat sheet side by side
      • Snippet
      • Terminal command ( other commands coming soon )
    • Configuration
      • Edit json config
      • Import config
      • Export
      • Share config
      • View config exmaple
    • Edit defaults
      • Configure Formatters
      • Edit extensions defaults
      • Globally toggle hidden nav items ( if any are hidden, it will display them, and once your done you can turn it back on to hide all the items. This is to either easily edit them, or even use this feature as another level of folders)
    • Find unused functions
  • Quickpic menu located on the bottom status bar on the left named OCRMNav

    • Auto add commit and push
    • Auto upgrade patch, pushing repo in the process
    • Push repo, upgrade patch, create + install + reveal VSIX in windows filing system, opens default choice of browsers, navigates to microsofts dashboard to manually upload VSIX ( used for VSCode extension development ), if you want a hard reset of vscode
    • Yeet! starts for loop looking for newly created VSIX, pushes repo, upgrades patch, creates + installs + pushes new patch VSIX to marketplace, then soft resets VSCode for you
    • Add chain item
    • Add vscode cmd
    • Add bash cmd
    • Add powershell cmd
    • Create md file
    • Create md file w/ opening cheat sheet side by side
    • Add snippet
    • Add folder
    • Add url
    • Snippet viewer
    • Formatters
    • md cheat sheet
    • VSCode cheat sheet
    • Theme configurator
    • Edit json config
    • Share config w/ friends
    • Edit Default
    • Refresh

[!NOTE] When adding md files, they will be added in a folder in your .vscode for storage, but can be organized any way you want in the extension. This keeps your root directory looking clean, while giving you the organization you need.

Extensions filing system is virtual so the above will not actually be moved anywhere.

Same as files above. Folders only go 2 deep. Didn't see the point of going further than that kinda defeats the purpose of this. With the thought in mind, first level are most used items you need, while the collapsed folders are the second most used, and the subfolder being the third. Each folder and be set to open expanded or collapsed as default. You can also use the global display feature to use hidden items as another folder.

</td>

Image


Chain Execution

  • removes the need for so many extensions that provide execution in sequence of commands while providing effeciency in whatever context your coding
Usage...
  • add chain from context or quick pick menu, it will give instructions as you go
  • execute items in the order in which they are given
  • when giving items to execute provide their label followed by a comma, full example below, be mindful of capitalization
    • to execute the items labeled add, commit and push
    • when creating the sequencer the "command" would be - add, commit, push
  • for global access put items into one of the global folders, likewise for workspace only access
[
  {
    "label": "add",
    "path": "git add .",
    "type": "powershellCommand"
  },
  {
    "label": "commit",
    "path": "git commit -m 'message'",
    "type": "powershellCommand"
  },
  {
    "label": "push",
    "path": "git push",
    "type": "powershellCommand"
  }
]
  • sequencer format
{
  "label": "Auto Push",
  "path": "add, commit, push",
  "type": "chain"
}

Config file

  • [x] updates as you save, can either edit the config file itself or export it, edit then import the file with your edits
  • [x] Exports straight to your projects root
  • [x] Importing makes it easy to update config or send to friends if they like your set up

Global file location: AppData/Roaming/Code - Insiders/User/globalStorage/skyler.ocrmnav/global-navigator-config.json


Project Agnostic Configuration

  • [x] Whenever you switch workspaces, creates new workspace specific config file, then creates a temp config merging your global config with your workspace config to create the virtual filing system thats displayed in the navigator
  • [x] both the global items and workspace items can be configured individually on the file itself
  • [x] snippets file is globally saved when using the extensions snippet editor
  • [x] notes, reminders and todo along with its settings are now also global
  • the export/import feature should make quick work of editing the config file manually
Usage...

ID file: .vscode\ocrmnavigator\id.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
  • COMPONENTS
  • UTILS

VSCode Commands

  • [x] No limits on how many you can have, you can create as many directories / sub-directories of commands you need or ever want.
  • [x] Just a click away.
  • [x] I don't know why every extension seems to want to limit you on the amount of commands you have quick access to. From a quick count you can fit about 43 without scrolling, if you need that many who knows. But with scrolling, you can have all the commands, lol.
Format
{
  "label": "format",
  "path": "editor.action.formatDocument",
  "type": "command"
}

Commands Cheat Sheet

  • [x] Command reference sheet for those who need it. Didn't add commands as a default, since theres like 360 or even more maybe.
  • [x] You can search, or view by category.
Images...

Image


PowerShell Commands

  • [x] Same as commands above minus the cheat sheet
Format
{
  "label": "PWSH - Admin",
  "path": "Start-Process powershell -Verb RunAs",
  "type": "powershellCommand"
}

Debian Bash

  • [x] opens debian wsl bash shell, and runs the cmd
  • [x] like an actual shell, not running a powershell cmd with wsl -d Debian -e
Format
{
  "label": "VLC w/ playlist",
  "path": "cd /mnt/f/music && '/mnt/c/Program Files/VideoLAN/VLC/vlc.exe' 1Firreee.xspf",
  "type": "debianCMD"
}

Snippets

  • Creating
    • [x] Creates snippet in global snippet file
    • [x] In VSCode, it creates the snippet in a blank .tsx file so you can easily edit it in the editor
    • [x] Saves on close or when you save with ctrl + s
Usage...
  • Editing
    • [x] You ALSO edit your snippets in a .tsx file, with your snippet name on the top line.
  • Formating
    • [x] Your prefix gets created by converting your snippet name to all lower case letters and spaces turning into dashes ( - ). Thus giving you access to your snippets on the fly, just like any other ( Toggle State is then toggle-state as your prefix ).
    • [x] No more wasting time with double quotes, or trying to make it look good by lining everything up... just save and fucking code dudes.
    • [x] I know theres a work around, but still feels so clunky to us, in a tsx file, then in the snippets, then going back and click on the snippets file again to re render the snippets file and on and on. Where as with this one, you input the name, where you want to store it in the extension and if you already have the snippet in your clipboard it automatically pastes at file creation. Save, then move on to creating the next one. I find its not just the big things that can really waste your time. The small things you dont even notice or count towards wasting your time, but suck so much time out of your day... mainly due to dumb design decisions or the decision NOT to go back to improve it. Thats... basically the whole reason I HAD to start coding.
  • [x] when clicking on your snippet file in the navigator, it opens the snippet viewer with only that snippet visible for viewing
  • instead of just the entire snippet file, starting from the beginning
  • when viewing your snippet, you can edit, delete or create a new snippet, along with a search bar at the top to search through your current snippets and selecting a another to view/edit
  • editing or creating a new snippet opens up a temp tsx file, and if you already have your snippet in your clipboard it automatically pastes it for you for even quicker creating
  • incase the import feature breaks while I was fixing other things, theres a quick workaround
    • copy the contents of your current snippet file
    • paste them into the following file
    • AppData/Roaming/Code - Insiders/User/globalStorage/skyler.ocrmnav/ocrmnavigator.code-snippets
  • [x] New Full featured Viewer, from the viewer with search command to search and view the filtered list, after selecting bring you to a viewer. Where you can view, select to edit, create new, remove and now even includes the easiest importer Ive seen yet when dealer with snippets
  • [x] Import by letting you select whatever snippet file you want, leaves the original untouched but copies over into its snippet file, when importing, if you do not already have a SNIPPETS folder it will create it for you in the extensions pane so you can access them in the extensions file structure. Thus letting you import 2 or 3 snippet files if you need to.

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

Images...

Image


Image


Image


.md Editor and Viewer

  • [x] Create a md file, that opens a md renderer along side it.
  • [x] If you so choose and depends who wide your monitor is, can create an md file with the cheat sheet and renderer open all at once, with one click. Not gonna lie, the little touches with this extension make it nice to have.
  • [x] right click .md file in editor to view render
  • [x] using VS Code's built-in renderer. The built-in renderer follows GitHub Flavored Markdown specifications.
  • [ ] maybe, in the future build custom spec renderer that includes rendering more features than what is currently
  • [ ] Need to include more markdown examples. ie, accordian ( check other readmes for other examples ) but requires custom renderer
Images...

Image


Image


.md Cheat Sheet

  • [x] Comprehensive cheat sheet you can access any time without leaving vs code.
  • [x] when creating a md file through the extension, can open up to three new editors consisting of:
    • viewer
    • .md editor
    • cheatsheet

File Type Formatter

  • [x] Whether your brand new or a seasoned user, using and configuring your new formatter will be a breeze.
  • [x] You will not have to visit another site or do a google search to make sure the option your about to activate does, what you think it does.
  • [x] Formatter opens in web view panel, the types will be selectable with tabs, under each tab you view the options, read the description and configure the formatter to be exactly the way you want.
  • [x] I've never seen this else where, but I really wanted it when I was configuring my formatters... and never had it.
  • [x] Live preview to see what your changes do in real time. So if this is your second day coding, you can easily configure without having to do mountais of research.
  • [x] Right click anywhere in the file and select the extensions formatter to activate and format the file.
Images...

Image


JSON Comments

  • Right click in editor and select from the formatters submenu, creates new file in the config folder, copies the data over, where you can write all the comments you want, leaves orignal file clean of commments thus not triggering any issues / problems in your code

Remove All Comments

  • Right click in editor and select from the formatters submenu, removes all comments from file

Remove Trailing Commas

  • Right click in editor and select from the formatters submenu, removes trailing commmas in json files

Remove console.log

  • [x] remove console.log from file, folder, workspace
  • [x] right click in editor and select from formatters

Search Bar

  • [x] button on title for even quicker access
  • [x] testing out different functionality to see which works best, think of it as a second quick access panel that you quickly search file names (or whatever you save to it), with the first navs items included as well - the idea behind it, if your working with larger projects, and there are a group of files that you go to enough, but are burried far enough to be anoyed each time you have to dig for them, but dont go to them enough to let them take up space in the quick access panel... i dont know, we'll see...
  • config set up is done through editing the config file
  • same object structure as the navs man config
  • currently workspace only, as the items that would go in here would only be useful in that workspace

File location: .vscode/ocrmnavigator/search-config.json

{
    "items": [
    {
        "label": "CRM",
        "path": "code-insiders -n \"f:/OpinionatedCRM\"",
        "type": "powershellCommand"
    },
    {
        "label": "OCRMNav",
        "path": "code-insiders -n\"f:/OCRMNav\"",
        "type": "powershellCommand"
    },
    {
        "label": "NTRSync",
        "path": "code-insiders -n\":/ntrsync\"",
        "type": "powershellCommand"
    },
  ]
}

Editeable Folder Icons

  • [ ] right click in navigator to change folder icon
  • [ ] this is on the backburner

Share With Friends

  • [x] accessible through extensions title bars context menu under configuration, copies config into newly created folder in root directory, everything in the extensions folder is copied over and creating a .txt file named read me, instructing the person they are sharing with how to implement everything
  • if there are sensitive items, or ones you dont want to share delete manually from the output

Output folder location: shareWithFriends


VSCode Color Theme Builder

  • [x] preset default themes
  • [x] custom theme builder with granular color options
  • [x] apply theme in real time
  • [ ] need to redo customize theme tab, offer even more granular color choices for the vscode interface
  • [x] writes to global settings, leaving you to customize workspace themes
Images...

Image

---

Default Apps Configuration

  • [x] set which functions you have access to, configuration is located in the extensions settings accessible through its marketplace listing

File Nesting

  • [ ] should this be added...

Batch Rename

  • [x] Select file/s in the vscode explorer
  • [x] Opens a .txt file with the names in a single column
  • [x] Mass edit file names and/or extensions
Images...

Image


NTRSync - Notes, Todo and Reminders

( Separated into its own extension )

NTRSync VSCode Extension NTRSync Mobile

  • Was getting a little crowded on this app and to ensure everything was user friendly, decided to separate the two.

VSCode extension: I've noticed at times, the root project tries to add this as a submodule, but it doesn't do this in every workspace. This could be the result of me fixing things as I go with multiple workspaces open, and something happened somewhere. So you may never even see this issue but I'm currently working on the fix and wanted to offer the workaround in case it popped up. So in the meantime add .vscode/ntrsync to .gitignore in the root project, if it still persists git rm --cached .vscode/ntrsync -f

UPDATE: This no longer an issue with the fix implemented. Been coding for over a month now and havent seen this issue again. Leaving here in case of fringe cases

  • Mobile version got an overhaul, due to back end fidelity issues with repo syncing from a website to github. Everything has been fixed, just havent tested it thoroughly yet, but during first test works as good as any commercial product, if not better due to functionality. Hasnt been noted anywhere yet, but to do lists page ( displaying all lists ) the ui can convert between displaying an itemized list of your to do lists and an itemized list of everything contained in ALL to do lists. Thus allowing you to freely review and check off items as you scroll, instead of opening, reviwing, backing out then entering another list. To do list page, ui can either be displayed in edit mode where you can edit each to dos line item, or check mode where the entire line item becomes a button to toggle to do states. I dont know why there isnt a commercial product that offers that ui, keeps it organized but when you have 5 minutes to spare, it just makes reviewing everything a breeze. ( even if you have 5 or more to do lists ) Due to overhaul, its not "progressive" enough in its current state to install, but will soon get to that point. Will also have all offline functionality, so for anyone that looses access during the day at work this can still be used to add, edit, check off items or whatever and will push the data to the github repo once your phones gets a signal again. Repo is still the source of truth, but whether a push is successful or not you will not loose any data, as it keeps the local item state dirty. Once it gains access to the network again, it checks if any items are dirty locally and if so starts the push again.

  • added quickpick menu in status bar for git commands for unforeseen error messages

  • added custom git command option

  • mobile version will get its own version of this

📂 File Organization

Details...
  • Automatic Categorization:
    • 00_priority/ - Pinned/important items
    • 10_normal/ - Default storage
    • 90_completed/ - Archived items
    • 91_trash/ - Deleted items
  • Smart Numbering System:
    • Files auto-numbered (e.g., 10001_ProjectX.md)
    • Priority items get 00 prefix numbers
  • Label Support:
    • Use group.filename.md syntax (e.g., coding.BugFixes.md)
  • File Type:
    • To-do, notes, and reminders

✏️ Content Types

Type Extension Features
Notes .md Standard markdown
Todo _todo.md Checklist support
Reminders _reminder.md Time-based notifications

⚡ Workflow Automation

  • Automatic Sorting:
    • Priority items always appear first
    • Grouped by labels when present
  • Quick Actions:
    • One-click priority toggle
    • Instant archive to completed
    • Drag-and-drop reorganization

☁️ GitHub Sync

  • Real-time bidirectional sync
  • Automatic push on:
    • File changes
    • Priority changes
    • Completion/trash actions
  • Manual sync option
  • Conflict resolution via Git

NTRSync Mobile 📱

Your notes in sync, everywhere

  1. Touch-Friendly

    • 1-Tap Actions
      • ✅ Mark todos complete
      • 📌 Pin to priority
      • 🗑️ Move to trash
  2. Mobile-specific features "Works seamlessly with VS Code extension"

    • Always in Sync
      • 🔄 Auto-push to GitHub on:
      • Edit
      • Reorder
      • Label changes
      • ⏳ Pull-on-launch for latest versions
  3. Simplified folder table

  4. Offline support

    • Offline Mode
      • Edit without connection
      • Changes sync when back online
  5. Future app platforms

  • ios
  • android
  • pwa (Web App for all devices)
Images...

Image


Image


Description Description Description

Unused Function Finder

  • Personally, I have adhd and I find that after a long day of coding, stopping when I get too frustrated or even when I notice something that needs to be fixed and pulls me away from what I was currently doing, I seem to leave functions in places that never get used. For example, I was working on syncing my extensions data with github, notice an issue in another part of my code as I was searching for a function to reference and started fixing it. Hours later I noticed I now have two files dedicated to the same syncing feature, obviously one is not being used. With larger projects its a pain in the ass when I start looking for them manually, and it only tends to be effective when I know for sure that some files are not being used. So hopefully this is the solution to that problem... and amazingly it is, I dont fully understand how its so fast compared to other search functions ive made in the past... but hey
  • [x] in title dropdown menu
  • [x] find unused functions
  • [x] once found print function name and file path
  • [x] need status bar for larger projects, as I'm assuming this wont be a quickly finishing function
  • [x] once completed print everything to unusedFunctions.txt in root folder as a todo list to be copied over ntrsync
  • [x] in utils add a folder called UNUSED_FUNCTIONS, add each file as it finds it to the navigator

Clipboard History Pro

  • button in status bar that opens a quick pick displaying the last 20 items that were in your clipboard
  • hover over to see the entire paste in the tooltip
  • click on item to copy the contents back into your clipboard
  • history acceesible through status bar button

Bookmarks

  • right click the line of the file you want to bookmark and select bookmark
  • keeps up to 20 book marks
  • bookmarks acceesible through status bar button

Extension Produced Messages

  • all console.log messages
  • all vscode.window.showInformationMessage toasts
  • all vscode.window.showErrorMessage toasts
  • all messaging has been compartmentalized to a central location. On your status bar a button will be accessible with the text "$(warning) Messages", which opens a quick pick dialog with color coded messages.
    • grey: for console.log and info type messages
    • red: errors
    • green: success
  • first version of this hasnt been working as expected currently disabled and will rework it when i can
  • the issue was while it got rid of all messages produced by this extension, other toasts were still displaying, the goal was to remove all toasts from being produced and move the messaging to a centralized location

View Config Example

  • Incase you needed / wanted ideas for your setup, I included some context if you do view it

Open Route File In Browser

Usage

  • Right click in editor, you will find 2 options, open current route in browser, which opens your default browser to chosen page / route. Preview url will copy the url to your clipboard.

Create route file

Usage

  • Right click in editor, select an option in the Remix submenu. Creates route file with loader, action, default function, along with commonly used functions in commented out code. Submenu also contains other useful functions to insert

Add ShadCN Components

Usage

  • Right click in editor, and select an option in the ShadCN submenu

Install ShadCN w/ Components

Usage

  • Right click on package.json, select install shadcn w/ components
  • add monorepo installer???

Remove Unused Imports

Usage

  • Right click in editor or explorer, and select remove unused imports

Add Missing Imports w/ Global Config

Usage

  • Right click in editor, and select add missing imports. There is another option to configure a globally accessed file for you to include commonly used imports

Reveal In Explorer

Usage

  • Right click a file in the navigator to reveal in windows

Copy Path

Usage

  • Right click a file in the navigator

VSCode Extension Managment For Devs?

Desc

  • [x] when working on extensions for vscode, added feature for easier installing/upgrading located in quick pick menu on status bar when, clean or dirty so it will work either way ( if you dont know what I mean by clean/dirty, its refrencing your local repo to your remote repo, to upgrade you need your local to match the remote your upgrading, among other reasons but more importantly this automatically adds versioning to each push to your repo with zero extra effort, allowing you to reference older code, or better yet giving that access to the end user... the amount of times Ive rebuilt npm packages, because a change they made broke the app I was working on and was considered too edge case to even bother with a fix next patch, or even better it also allows users to regain critical functions that you drop... you may think its not needed anymore... but you will have a user, with some god only knows configuration, where you dropping that function that is not even in use anymore, halts their entire production )

  • auto add commit and push

    • saves all
    • adds files that have changed
    • commits with auto message
    • finally pushes
  • auto upgrade patch

    • continuation from above
    • upgrades patch
    • pushes change to github
  • auto upgrade patch, create and reveal vsix

    • continuation from above
    • creates vsix
    • opens windows file explorer at the location where the vsix was created to quickly drop it on the website
    • auto opens microsoft publishers and extensions
    • installs vsix in vscode and reloads extensions while you update the extension on microsofts site
  • yeet, huck that vsix and keep coding, slight difference from above, as the name states its just a one button click to do everything

    • saves all
    • starts wait sequence waiting for new .vsix file to show up in root folder
    • reveals toast to cancel wait sequence
    • pushes changes to repo
    • upgrades patch
    • builds package
    • installs package
    • reloads ui
    • pushes vsix to marketplace

Usage

  • in ocrmnav quickpic on bottom bar choose one of the first four options

GitHub Repo Management

Desc

  • added auto add, commit, push and versioning and more, along with functionality behind the scenes in regards to dirty or clean local repo so it will still execute either way

Usage

  • In the quick pick menu located on the status bar ( bottom most bar, to the left ), you will find OCRMNav. Once clicked, select one of the first four options

Routing Convention Conversion Remix-Run

Desc

  • Converts the v1 routing convention to the v2 routing convention. This command will try to convert your routes from v1 to v2 and if anything goes wrong it will restore your routes to initial state.

Usage

  • on any editor right click and select Converts the v1 routing convention to v2 from the remix submenu, should go without saying, incase of fringe cases of bugs be sure to push your project first

Create Tests for Routes and Actions In Remix-Run

Usage

  • right click on file in editor, select Create Test For Route & Action
  • will create a results page at routes/tests/dashboard.tsx if it isnt already there
  • will create test files in routes/tests with the file name matching the file its testing
  • when you visit the dashboard click run and it will show the results for all the files that were created
  • to ensure it tests everything correctly, it pulls the action and for every prisma function it creates a test
  • if it needs anything like any where parameters for any updates, it will grab the first object from the database for that model
  • to ensure it tests everything properly, for every prisma function test it creates it will grab the model out of the schema file to before creating the test to make sure its passing the correct parameters ie String, Boolean etc

Install Auth in Remix w/ Auth Routes

Usage

  • right click package.json and select Install Auth in Remix w/ Auth Routes
  • not yet available

Install OTP Into Remix w/ Auth Routes

Usage

  • right click package.json and select Install OTP Into Remix w/ Auth Routes
  • creates login, logout, and everything needed for this to run, installs dependencies at the end

Add ESlint & Prettier configs

Usage

  • right click editor or explorer and select Add ESlint & Prettier configs

Open Repo in Browser

Usage

  • right click editor or explorer and it will open the current projects repo

Click To Schema Object

Usage

  • select and right click a model anywhere in your project, will bring you to that model in your schema, works well with generate crud and rest

Editor Context Snippets

Usage

  • gets all current workspaces snippets, display a quickpic, inserts once a snippet is selected

Generate Crud Resolvers / Rest End Points

Usage

  • highlight, or select on hover preview to generate resolvers or rest end points

Blacked Out

  • under configuration submenu in the extensions dropdown
  • quickly applies all blacked out theme
  • 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
    • the text color in the editors is a near white for easy readability
    • Coming change: Once I figure out, exactly which value changes the text color for unfocused editors, that text will also be muted
  • the effect is a clean, all blacked theme ( obviously ), but removes all the attention grabbing features ( all the unicorn puke ), allowing you to just continue coding instead of stopping, fixing and going back to coding.
  • the theme, imo, really helps on eye strain for longer coding sessions due to the lack of brightness it emits. Which gets compounded on larger sceens, so if your using a monitor that is 50"+ or more, like me, at least try it out, I promise this will be your new default ui theme due to massive change in brightness being projected to your eyes.
  • added this as a seprate feature to the theme configurator for quicker / easier execution

Window Differentiator

  • this is a feature to be used with blacked out, or if you tend to use the same color theme globally
  • applies a random color to the status bar, the windows top bar and the activity bar
  • extremly helpful when having multiple workspaces open, as it gives a quick, less intrusive ui indicator to reference which workspace your currently focused, while retaining the rest of your preferred theme
  • I find that, when I use the same theme accross the board, I start clicking in other workspaces by accident due to the entire screen featuring the same color config, if the windows aren't perfectly stacked ontop of eachother.
  • Previously, I applied different color themes for each workspace, but this was too time consuming unless I wanted each to look like shit, and hated how it wasn't my default theme.
  • instead of manually editing, whenever a new project was created, your default theme remains unchanged, but update 3 values, to the relevant settings.json values, of a randomly chosen color from a default list. Thus saving even more time, trying to figure out which window your in, looking for the same colored window of another project, after coding for 2-3 minutes then just realzing your not even in the project you need to be, etc
  • colors were chosen using shadCN colors, either its corresponding 500 or 600 value, I did leave out rose, fushia and a couple of others, since I fucking hated them
  • UPDATE: after using, found that some colors didn't display the foreground colors clearly enough. Replacing the 500 or 600 values for their respective 900-950 variants. The chosen colors achiev the desired effect while not destroying the overall appearance. If used with a dark theme of your choosing, the effect looks as if it was orignally designed that way

Reset - Window Differentiator

  • replaces the values used in the above feature with the values from the blacked out theme to restore the default theme

Color Wheel

  • instead of relying on sources outside vscode, resulting in a more seamless, effeicient workflow, a theme that seems to be recurring to cutdown the time wasted going to the brower and going to the information source. Going to review other sources that I commonly use and include them as well
  • opens an editor with webview
  • displays all the colors w/ v3 hex, v4 oklch, v4 CSS Custom Properties
  • toggle for including / excluding the hashtag when copying the color value into the clipboard
  • copies color value to clipboard when selected

Lucide Buttons

  • w/ Fuzzy Search instead of exact match
  • search results are provided faster, and without the huge pause whenever you open their website which really annoys me when working quickly, and you cant paste or type in their search function till the entire page and everything included has loaded or worst... it allows you to start typing, then only actually registers every third of fourth key press and showing nothing since it has no idea what your searching for
  • to summarize, giving you in app access to lucide icons while providing faster load times
  • all of lucides icons are included in the project to ensure they display correctly in the webivew
  • 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

I may have even missed a few features in the list...

  • To make the best of it, use secondary side bar which will give instant access to commands and such
  • At install, you will have to "hide" the buttons on the extensions title bar to push them into the dropdown menu. I could change this to have them all in the dropdown by default, but keeping it because if you want to keep one of the buttons on the title, for example I have search, and create "pinned" to the title bar and wanted to keep this in case anyone wanted to pin buttons

In Development

Demo

Demo

Demo

Issues

  1. formatter, currently isnt working - currently no where near the top of list of priorities, so I wouldn't expect this to be fixed any time soon, the same goes for the theme builder
  2. the custom section of the theme builder, currently isnt working

If you see an issue, let me know. There's no one else working on this and tbh, this extension is getting rediculous with the amount of features. If something breaks due to another feature being implemented and I didn't catch it, sorry. I have no plans on slowing down as far as adding features, but give me time on fixes as this is just a personal project, that somehow became the same workload as 50-60 other peoples extensions.

Backburner - Low Priority

  1. file nesting
  2. removal of global toasts / messages
  3. Default Apps Configuration - this just needs updating as the amount of additions have doubled since this was built
  4. Editeable Folder Icons
  5. Install Auth in Remix w/ Auth Routes, including session tokens
  6. one click install and implementation of Remix Auth OTP

Don't be afraid to send ideas, as you can tell I'm not afraid to include anything if it's a smart / good idea. With saying that, if it is an idea that requires background processes to be run frequently in order for it to work, send it to me, but don't expect it to be implemented. The reason for this is to not bog down vscode in any way.

This platform, imo, was not built in the best way and already consumes WAY more resources than it should. Which is why as soon as people start installing ( other peoples extensions ), they start to complain about the applications performance.

If I think you have a really fucking awesome idea and it out weighs that hit on performance, I'll put it in.

I can't remember the platform name they built vscode with right this second, but I looked into using that platform, The biggest negative about it was, the performance issues at runtime for whatever application you build, no matter how you configure it.

So when you see people say, oh its because your installing too many extensions ... their wrong. ( when you do a google search to try to fix this issue, every fucking blog on the first or second line, attribute this issue solely on the amount of exts installed and they are wrong, I dont mind when people share knowledge, I encourage it. But when these inbred cousin fuckers, talk about something, trying to sound like an expert and give you advice on what to do, just burn their entire blog down, these people need to be researching what they advise on, because their wasting your time, who cares about there time since they obviously don't care enough to research it before telling you and the 1000s of others that also read it and say, thats a great idea I'll just delete all my extensions )

You just installed an extension that wasn't thought out properly when designed and their fucking your cpu over with background processes they shouldn't have implemented. If you need proof of that, without having to learn and not going down that rabbit hole of analysis. Look at the amount of extensions this one replaces.

How does this one extension... with the same work load of 50-60 extensions run smooth and without issue, not even noticeable when measuring performance metrics than others with their single extension? ( some features, while they run, will be noticeable when executed obviously )

I'm not exagerating either, there have been a lot of features implemented, just to see if I can get it to run faster, thats it, another big one was random extension process crashes. ( the amount of times, I go to use a feature on an extension, not touching it all day, and at that exact second before I even run it or cursor even hovering over it, it crashes ) While most of the time they were replaced, because they sucked at ui design, missing features, horrible design of the functionality and so on.

My vscode used to run slow, really slow, with the fraction of the amount of extensions that are in this one. If I had to guess, it was certainly less than 15 but more than 10. Without going through each feature and just doing a quick calculation off of the titles listed above, 53 ( there are more for example 2 or 3 extensions built into one feature ). Before building this extension, if you told me you could run that many extensions without a performance loss, I would of just looked at you and said "your smoking crack, fuck off". lol, unbelievably, currently I do not even have the slightest concern on adding more features as far as performance is concerned.

VSCode marketplace, SHOULD include a performance metric of that extension at idle and under heavy load.

After looking into it, I know I'm still new to programming and in my case a rediculous thing to shoot for, but I will be creating an editor to replace VSCode. Even though, because of this extension, I no longer hate VSCode and have fixed most of the issues or dumb designs in regards to ui / functionality, BUT it would be nice to have a better performing version of VSCode. It will:

  • use VSCodes extensions so you don't loose something you love / need to use
  • way more user friendly UI
  • as a default offer the funcationality / ui the average dev uses on a day-to-day basis, while maintaining the advanced features that can be turned on
  • offer a git ui, that even a fresh starting dev could use without having to study the documentation for 6 months. I've met devs, who have spent years in the industry, still unable to fully utilize the platform. Note to, github even though the chances of someone from there reading this are probably less than 0.1%, thats a HUGE fucking problem... that you need to fix. The size of that problem, should put this item at the top of your priority list for your dev team. You can list all the things you want and complain about how / why you cant ( even though you can ), it needs to be fixed. I get that this is an industry-wide issue and one that no one seems to put much effort into, but that doesn't make it an acceptable excuse.
  • there are other items but the list will go on for days

When a working version has been created I'll try to remember to link it here. I know there are other devs out there looking to get rid of vscode, just like I was before creating this extension.

Config Reference Sheet

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"
        }
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"
        }
URLs
        {
          "label": "8an3/OpinionatedDealerCRM",
          "path": "https://github.com/8an3/OpinionatedDealerCRM",
          "type": "url"
        }
.md
        {
              "label": "appIdeas.lawyerApp",
              "path": ".vscode//ocrmnavigator//.md//appIdeas.lawyerApp.md",
              "type": "file"
        }
Snippets
            {
              "label": "shad accordian",
              "path": ".vscode/ocrmnavigator/ocrmnavigator.code-snippets",
              "type": "snippet"
            }
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...

       {
          "label": "VLC w/ playlist",
          "path": "cd /mnt/f/music && '/mnt/c/Program Files/VideoLAN/VLC/vlc.exe' 1Firreee.xspf",
          "type": "debianCMD"
        },
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
        },
]

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 the last part, since someone did contact me about a new icon and I wouldn't want you to waste your time commenting them.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft