VSCode GUI

.json Config Settings

| Aspect | Details | | --- | --- | |Note|You will never need to edit the config file, I'm only including it for the people who would rather configure the extenstion through the config file instead of the VSCode GUI or Web GUI. If you use code over code-insiders ( bleeding edge release ), use code in-place of code-insiders. In the following config, there will one example for each type.| |Global and Workspace Folders|

• Folders need the following values:
  • label - string
  • type - folder
  • expanded - boolean, whether or not the folder is expanded on start-up.
  • global - boolean
  • items - array
  • hidden - boolean ( optional )
• Items placed inside global folders will be available to you no matter the workspace you are working in. Workspace folders and the items contained within, will only be available while working within that workspace.

{
"categories": [
{
"label": "MAIN",
"expanded": false,
"type": "folder",
"global": true,
"items": [
{
"label": "CRM",
"path": "code-insiders -n f:/DevStack",
"type": "powershellCommand"
}
]
},
{
"label": "UTILS",
"expanded": false,
"type": "folder",
"global": false,
"items": [
{
"label": "prisma.schema",
"path": "prisma/prisma.schema",
"type": "file"
}
]
},
{
"label": "HIDDEN",
"expanded": false,
"type": "folder",
"global": false,
"hidden": true,
"items": [
{
"label": "generateAndBuild",
"path": "pnpm run generate && pnpm run build",
"hidden": true,
"type": "powershellCommand"
}
]
}
]
}

• The following types are available:
  • url - opens default browser at your items value
  • command - triggers the command
  • file - opens the file within vscode
  • snippet - copies the snippets body to your clipboard
  • powershellCommand - triggers command within powershell
  • debianCMD - triggers command with windows debian wsl
  • chain - extecutes the given commands sequentially
  • concurrent - executes the given commands all at once
  • copyValue - copies the value to your clipboard
• Each item has the following values:
  • label - string
  • path - the items value
  • type - 'file'|'url'|'command'|'snippet'|'powershellCommand'|'debianCMD'|'chain'|'concurrent'|'copyValue'

{
"categories": [
{
"label": "MAIN",
"expanded": false,
"type": "folder",
"global": true,
"items": [
{
"label": "Google",
"path": "https://www.google.com",
"type": "url"
},
{
"label": "CRM",
"path": "code-insiders -n f:/DevStack",
"type": "powershellCommand"
},
{
"label": "SAVE ALL",
"path": "workbench.action.files.saveAll",
"type": "command"
},
// for chain and concurrent item types, you can place any number of items to execute as you wish. The items that you included can either be hidden or not, personally I have a folder that contains all the commands I use within these two types and are kept hidden from view. To configured the commands to execute place each items label in the path value seperated by commas just like the given examples below.
// chain or sequential: once triggered it will execute each item, only moving on to the next once the current item finishes. The commands are fed into a function in which it determins which type of command it is before executing it in its respective enviroment. It checks to see whether it is a file|md, command, url, powershellCommand, debianCMD, copyValue, chain, conncurrent
// concurrent: Making the same checks on its item type as chain, it fires off the set of commands all at once in their respective enviroments, while any powershell commands that are executed will pipe through a single terminal. The terminal output will be reminiscent of the previous version turbo repos terminal output. If you are unfamiliar with it, all powershell output will be piped into a singular instance. Each commands output will vary in different colors, if for example your concurrent command was to set off 3 dev servers, each dev server will output to the same terminal window but each having their own set color. Allowing you to quickly determine what is happening in each shell. The terminal allows input that will pipe it through each of the active shells, if / when you need to close the dev servers you can do so at anytime, the terminal will remain open and act as any normal powershell window would. In the future, I will figure out how to do the same within the windows debian WSL shell and pipe its commands through the same instance, as of now it just executes each command within its own shell.
// with the code configured as it is, you can create a concurrent command that contains a sequential type item within its set commands. Allowing you to run both types at once if your use case needs / allows it.
{
"label": "Kill Terminals && Start DEV Server",
"path": "saveall, killterms, devApp",
"type": "chain"
},
{
"label": "dev:all",
"path": "devApp, devCalc",
"type": "concurrent"
},
{
"label": "HIDDEN",
"expanded": false,
"type": "folder",
"global": true,
"hidden": true,
"items": [
{
"label": "saveall",
"path": "workbench.action.files.saveAll",
"type": "command",
"hidden": true
},
]
},
// creates a terminal shell similar to opening a new Debian (WSL) terminal within the vscode instance, instead of the other options that are available. This opens up the options at your disposal of what can be done with the given commands. The following item is a great example, in which the program with its set flags will not open in any other shell type. Once this command executes, the shell changes folder locations and opens vlc with the set playlist that is stored within the windows file system. After execution, the terminal is free to use with any other commands you would like and can even be closed and does not vlc that is currently running, as if you had manually typed in the command yourself.
{
"label": "VLC w/ playlist",
"path": "cd /mnt/f/music && '/mnt/c/Program Files/VideoLAN/VLC/vlc.exe' playlist.xspf",
"type": "debianCMD"
},
{
"label": "Copy to clipboard",
"path": "Value to be copied into the clipboard",
"type": "copyValue"
},
{
"label": "prisma.schema",
"path": "prisma/prisma.schema",
"type": "file"
},
// Place the snippets title / name within the label. Whenever you create a snippet with the extension it places the snippet within a globally available file, making it accessible from any workspace. In order to maintain vscodes functionality of inline snippet insertion, that global file is copies to your current workspaces .vscode folder, so don't edit that file because it will overwritten at startup. You can either use the extensions snippet file or use your own in place of it. Allowing you to have multiple snippet files stored within your .vscode folder, ocrmnavigator.code-snippets is the extensions snippet file.
{
"label": "Snippet Name",
"path": "ocrmnavigator.code-snippets",
"type": "snippet"
}
]
},
]
}

Functions TOC

I. II. III. IV. V. VFS VI. OVERVIEW VII. AVAILABLE OPTIONS VIII. DETAILED DESCRIPTIONS IX. OVERVIEW X. AVAILABLE OPTIONS XI. MARKDOWN XII. SNIPPETS XIII. UI LIBRARY XIV. ICONS LIBRARY XV. CSS XVI. AI XVII. PROMPT XVIII. REMIX-RUN XIX. SHADCN XX. GITHUB XXI. PRISMA XXII. VSCODE XXIII. REFERENCE XXIV. VSCODE & TAILWIND STYLING XXV. TOOLS XXVI. CONFIG XXVII. XXVIII. XXIX.

VFS

Virtual Filing System

| Aspect | Details | | --- | --- | |Function|Programmable virtual file tree system| |Description|

• files
  • Quick access to your most-used files
  • Edit display labels for files
  • Copy file paths from the items context menu
  • reveal file in explorer from context menu
  • can also be set to hidden
• folder shortcuts
  • able to set global and workspace folders
  • add as many folders you need for either global or workspace
  • folders can be set to expand on instance start to be expanded or collapsed
  • folders can also be set to hidden
• URL's
  • access websites directly from the extensions pane
• VSCode Command
  • executed via vscodes api
• PowerShell Command
  • executes in windows powershell, just as if you had typed it out
• Bash Command
  • executes in windows debian wsl terminal env
• Snippet
  • adding to the already included functionality of inline snippet insertion, saving a snippet as an item will have its body content placed into your clipboard whenever clicked
• Sequential Command Execution
  • execute whatever items you want in your desired set order
• Concurrent Command Execution
  • execute whatever items in a threaded capacity
• Copy to clipboard
  • placing any value you have set into your clipboard

{
"categories": [
{
"label": "MAIN",
"expanded": false,
"type": "folder",
"global": true,
"items": [
{ "label": "Google", "path": "https://www.google.com", "type": "url" },
{ "label": "CRM",  "path": "code-insiders -n f:/DevStack", "type": "powershellCommand" },
{ "label": "SAVE ALL", "path": "workbench.action.files.saveAll", "type": "command" },
{ "label": "Kill Terminals && Start DEV Server", "path": "saveall, killterms, devApp", "type": "chain" },
{ "label": "dev:all", "path": "devApp, devCalc", "type": "concurrent"  },
{
"label": "HIDDEN",
"expanded": false,
"type": "folder",
"global": true,
"hidden": true,
"items": [
{ "label": "saveall", "path": "workbench.action.files.saveAll", "type": "command", "hidden": true },
]
},
{ "label": "VLC w/ playlist", "path": "cd /mnt/f/music && '/mnt/c/Program Files/VideoLAN/VLC/vlc.exe' playlist.xspf", "type": "debianCMD" },
{  "label": "Copy to clipboard", "path": "Value to be copied into the clipboard",  "type": "copyValue" },
{ "label": "prisma.schema", "path": "prisma/prisma.schema", "type": "file" },
{  "label": "Snippet Name", "path": "ocrmnavigator.code-snippets", "type": "snippet" }
]
},
]
}

VSCode Commands

PowerShell Command

Bash Commands

Sequential Execution

Concurrent Execution

Extension Properties To Include Extra Functionality

Project Agnostic Configuration

| Aspect | Details | | --- | --- | |Function|Split configuration between global and workspace| |Description|First-level folders can be globally available or confined to specific workspace| |Usage|Configure folders as global or workspace-specific| |Advanced Usage|Hybrid configurations, per-project customization| |Config Files|Global and workspace JSON config files| |Preview Image|Image| |Preview Video|Video| |Config|

{
"label": "MAIN",
"expanded": false,
"type": "folder",
// this value can either be set within the config itself, or when creating / editing folder items within the web GUI or vscode GUI.
"global": true,
"items": []
}

DevStack Quickpick

Overview

Available Options

Git Operations

Build Processes

VSCode Operations

Fold Operations

Format Operations

Prisma Operations

File System Operations

Performance Switch

Detailed Descriptions

G4 & .vsix Build Process

1. Scans workspace root for .order66 config file (falls back to defaults)
2. Saves any editors in dirty state
3. Triggers all node.js scripts in autorun folder (configurable via AUTORUN_DIR='src') except any scripts labeled pro7.js
4. Converts README.dev.md to README.md (if CONVERT_README_DEV_MD=true)
5. Deletes old .vsix archives
6. Deletes old .7zip archives
7. Scans for packager and runs compile command
8. Creates vsix archive (custom or vsce via ARCHIVER setting)
9. Secures sensitive files in password protected archive (if PRO7=true) or runs pro7.js in the autorun folder
10. Checks git status and runs appropriate github commands
11. Auto-installs locally (if AUTO_INSTALL_VSIX=true)
12. Opens publisher dashboard (if OPEN_PUB_DASH=true)
13. Restarts vscode instance (if RELOAD_INSTANCE=true)

There was a change to the order in which each step executed, and a couple that were added. Unaware at the time of building the scripts for this, microsoft flags any password protected archives that are within the .vsix archive. Now deletes old .vsix and .7zip archives earlier, and the .vsix archive step has been moved up, while the .7zip archive process has been moved to execute later but before the push to github

Preview: Image

Custom VSIX Packager

• Meets all requirements for listing extension
• Smaller package sizes than vsce
• More resilient build process (won't error out with SVGs in readme)

Pro7 Archiver

Secures sensitive files within password protected archives for safe GitHub pushing.

Note: Everything in one click - complete extension publishing workflow.

BE Quickpick

Overview

The BE Quickpick provides quick access to various backend development tools and utilities.

Available Options

Settings Management

Development Tools

Markdown Processing

Regex Utilities

Reveal In Explorer

Copy Path

Search

MARKDOWN

MD Viewer/Renderer

MD Viewer/Renderer In VSCode

Catalyst Editor

Convert MD File To Safe Inline String

SNIPPETS

Editor / Viewer

Context Snippets

UI LIBRARY

Catalyst UI

• Color Wheel
• MD Reference sheet
• Icons
• VSCode Cmds Reference
• v3 <-> v4 tailwind css converter
• tailwind and vscode theme builder
• formatters
• catalyst editor
• encoder
• list of resusable tools to use within your own projects | Site | Link |

Insert Component via Editors Context Menu

Insert Component via Quickpick

Install Library Through Extension

ICONS LIBRARY

Icons

npm install @catalystsoftware/icons
# or
pnpm add @catalystsoftware/icons

Icons Quickpick

CSS

• coming soon

AI

Detrministic AI Engine Compiler

| Aspect | Deteails | | --- | --- | |Function|Advanced AI prompt optimization| |Description|Deterministic compiler for AI prompts providing consistent, reliable responses| |Usage|Use pre-prompt templates| |Advanced Usage|Cross-engine consistency, complex project handling| |More Info|Full Documentation|

PROMPT

Prompt - COMING SOON

| Aspect | Details | | --- | --- | |Function|Pre-prompt management with multiple AI providers| |Description|System for managing pre-prompts with 29 AI provider configurations| |Usage|Set default pre-prompts| |Usage|

• 29 AI provider configurations
• Hot-swap between providers
• Pre-prompt templates
• Monaco editor for complex prompts
• Auto-save functionality

| |Usage|Hot-swap providers, Monaco editor, file management|

REMIX-RUN

npx create-remixv2

Automatic Remix Action

Context Components/Functions

V1 → V2 Routing Conversion

Convert Single App To Mono Repo

Open Route File in Browser

Create Route Files

Install Auth in Remix

Install OTP in Remix

Create Tests for Routes and Actions in Remix-Run

Remix Run Insert Code

Create Single App - React Router

Convert Remix-Run to Platform X

Error Boundary

Meta Function

Links Function

Create Monorepo

Build & Deploy Project

RR Folder Routing

Preview Route URL

Create Action Object

SHADCN

Add ShadCN Components

Install ShadCN Components w/configs

Insert ShadCN Components

GITHUB

Repo Management

GitHub functions located on the status bar to the left in the Devstack quickpick or can select several options via the github submenu within the editor context | Aspect | Details | | --- | --- | |Function|GitHub repository management and functionality| |Description|see devstack quickpic for full feature outline| |Usage|Use GitHub commands in DevStack quickpick||R-click editor → github → select option| |Preview|Image| |Preview|Image|

Open Repo in Browser

Open Repo at File

Pro7 Archiver

| Aspect | Details | | --- | --- | |Function|Creates and password encrypted archive, storing files that contain sensitive information so as to be included among your files when pushing to github| |Description|scans workspace root for .pro7 config file, if it collects it it will grab the values out of the file and collect the respective files that were outlined ( similar to .gitignore, but your including files instead of ignoring them ), if the scan does not pick up a .pro7 file, it will then default to only include your .env file. Starting the packaging process it will scan your .env file for PRO7_PASSWORD value where you can set a predefined password. if there is no PRO7_PASSWORD value contained within your .env file, it will then prompt you for you in order to continue. Once the archive has been created it will place within your workspace root directory, and if activated via g4 & .vsix, will continue its process and move onto the next step which would be pushing your repo. This ensures that your archive includes the most up to date, with zero extra effort| |Usage|Option will be inlcuded within the devstack quickpic & this function will be added to the g4 & .vsix function for it to automatically run and keep an updated archive within your github repo| |Adv Usage|If you are looking to include this with a custom command sequence that gets triggered when included in either a concurrent|sequential object type, create a hidden item with the following values "path": "ocrmnavigator.pro7Archiver", "type": "command" and then finish it off labeling it whatever you desire. Then include that label in your custom object and will now trigger whenever you activate that command| |.pro7|

{
.env
.secrets.env
config/
secrets/
*.key
*.pem
api-keys.json
}<\pre><\code>|

if at any time the archiver doesn't work for you within the extension itself, as I have found that even though its a straight conversion from the script I built it appears to error out very easily. place the attached script inside the auto run folder labeled pro7.js and it will run seperatly from the other autorun scripts due to microsoft antivirus checks as microsoft does not trust any zip files to be included within the .vsix archive and remember to set the settings value to false, "ocrmnavigator.PRO7": false,
pro7.js
const fs = require('fs');
const path = require('path');
const { glob } = require('glob');
const sevenBin = require('7zip-bin');
const { extractFull, add, list } = require('node-7z');

const WORKSPACE_ROOT = path.join(__dirname, '..', '..');
const PRO7_FILE = path.join(WORKSPACE_ROOT, '.pro7');
const ENV_FILE = path.join(WORKSPACE_ROOT, '.env');
const OUTPUT_PATH = path.join(WORKSPACE_ROOT, `pro7-${Date.now()}.7z`);
require('dotenv').config({ path: ENV_FILE });

async function pro7Archiver() {
    try {
        const password = process.env.PRO7_PASSWORD;
        if (!password) {
            console.error('✗ PRO7_PASSWORD is not set in .env file!');
            console.log('\nPlease set PRO7_PASSWORD in your .env file');
            process.exit(1);
        }

        let filesToArchive = [];

        if (fs.existsSync(ENV_FILE)) {
            filesToArchive.push(ENV_FILE);
            console.log('\n✓ Found .env file');
        }

        if (fs.existsSync(PRO7_FILE)) {
            console.log('✓ Found .pro7 file');

            const content = fs.readFileSync(PRO7_FILE, 'utf8');
            const lines = content.split('\n');

            for (const line of lines) {
                const trimmed = line.trim();

                if (!trimmed || trimmed.startsWith('#')) continue;

                if (trimmed.includes('*')) {
                    const globFiles = await glob(trimmed, { cwd: WORKSPACE_ROOT, absolute: true });
                    filesToArchive.push(...globFiles);
                    console.log(`✓ Found ${globFiles.length} files`);
                } else {
                    const fullPath = path.join(WORKSPACE_ROOT, trimmed);
                    if (fs.existsSync(fullPath)) {
                        filesToArchive.push(fullPath);
                        console.log(`✓ Added: ${trimmed}`);
                    } else {
                        console.log(`✗ Not found: ${trimmed}`);
                    }
                }
            }

            filesToArchive = [...new Set(filesToArchive)];
        } else {
            console.log('✗ .pro7 file not found');
        }

        if (filesToArchive.length === 0) {
            console.error('\n✗ No files to archive!');
            process.exit(1);
        }

        console.log('\n✓ Cleaning up old archives...');
        const existingArchives = await glob('pro7-*.7z', { cwd: WORKSPACE_ROOT, absolute: true });
        for (const archive of existingArchives) {
            fs.unlinkSync(archive);
            console.log(`  Deleted: ${path.basename(archive)}`);
        }

        const stream = add(OUTPUT_PATH, filesToArchive, {
            password: password,
            method: ['0=BCJ2', '1=LZMA2'],
            $bin: sevenBin.path7za,
            $progress: true
        });


        await new Promise((resolve, reject) => {
            stream.on('end', resolve);
            stream.on('error', reject);
        });

        console.log('✓ Archive path:', OUTPUT_PATH);

        const listStream = list(OUTPUT_PATH, {
            password: password,
            $bin: sevenBin.path7za
        });

        let fileCount = 0;
        listStream.on('data', (data) => {
            if (data.file) fileCount++;
        });

        await new Promise((resolve, reject) => {
            listStream.on('end', resolve);
            listStream.on('error', reject);
        });

        console.log(`✓ Archive contains `);
        console.log(`✓ ARCHIVING COMPLETED SUCCESSFULLY - CONTAINS ${fileCount} ${fileCount === 1 ? 'FILE' : 'FILES'}`);

    } catch (error) {
        console.error('\n' + '='.repeat(60));
        console.error('✗ ARCHIVE CREATION FAILED');
        console.error('='.repeat(60));
        console.error('\nError message:', error.message);
        console.error('Stack trace:', error.stack);
        process.exit(1);
    }
}
console.log('='.repeat(60));
console.log('PRO7 ARCHIVER');
console.log('='.repeat(60));
pro7Archiver();





PRISMA

[!TIP]
Whenever there is a prisma function that you want trigger, if it requires the schema object name in order to function my best advise is type the schema objects name outside of any function you have already created, ie User with the proper casing. After you typed this above and outside of the action function, highlight it, r-click and select the desired function to trigger. This is due to most of the functions insert code at cursor. You can imagine, if you triggered it right in the middle of your prisma function inside your action, it would blow your action or loader function up, splitting your prisma function in half and because its never just a few lines of code, can even push the entire action / loader out of view completely. Even when using click to schema object, you can literally be anywhere in the workspace, type out the objects name User randomly in a typescript file, trigger the function and you will navigate to your schema file and the file will open at your desired object.



Create Include Object



Aspect
Details







Function
Generate Prisma include objects





Description
Create include objects that include all relations for Prisma models





Usage
r-click on a Prisma object to automatically create an include object for your Prisma queries.
Best practice: type the schema object name (case-sensitive) a few lines down from your function, then r-click and trigger.
File system cleaning
VSCode restart options
This prevents the function from disrupting your existing code. Example: type User separately, r-click it, and generate the include object without affecting your prisma.

Preview
Image





Click to Schema Object



Aspect
Details




Function
Jump to Prisma schema definition


Description
Hightlight, right click and have the extension navaigate to the object within your schema file.


Usage
r-click model name → Prisma → Open Schema Object


Advanced Usage
Works from any file referencing Prisma models


Preview
Image





Generate Crud Resolvers / Rest End Points



Aspect
Details




Function
Auto-generate CRUD endpoints & Auto-generate API endpoints


Description
Generate CRUD resolvers and REST endpoints automatically


Usage
R-click → Prisma → "CRUD"


Usage
REST/GraphQL, preview, customization


Usage
Hover preview before generation
Full CRUD operations
TypeScript support


Preview
Image


Preview
Image


Preview
Image


Preview
Image





Auto Create Schema



Aspect
Details




Description
Scans app/src folders for Prisma functions (create, findFirst, etc.), extracts model names, fields, and relations, then automatically generates or updates the Prisma schema file with proper typing and attributes


Usage
R-click editor → Prisma → select option


Advanced Usage
Merges with existing schema.prisma, applies field rules from constants/fieldRules.ts (e.g., email gets @unique), auto-creates related models from include statements, preserves existing models and custom fields


BLEEDING EDGE



WARNING
This feature set will only be active for users that have bleeding edge enabled and will not effect users that do not have this set to true


Usage
select Auto Create Schema from the be quickpic





Visualize Schema Relations



Aspect
Details




Function
Creates a visual diagram showing relationships between database tables/models


Description
COMING SOON!


Usage
R-click editor → Prisma → select option






VSCODE
Performance Switch



Aspect
Details




Function
Toggle performance modes


Description
Switch between performance modes for working with large files


Usage
Options available via the devstack quickpic or editors context menu


Features
Disable For Current File
Disables DevStack features for the currently active file to improve performance
Enable For Current File
Re-enables DevStack features for the currently active file
Disable Everything
Globally disables all DevStack features across the workspace
Enable Everything
Re-enables all DevStack features across the workspace
Toggle Global Disable
Toggles the global disable state for all DevStack feature


Preview
Image


Preview
Image





Custom VSIX Packager



Aspect
Details




Function
Alternative VSIX packaging


Description
Custom VSIX packager as alternative to vsce


Usage
DevStack Quickpic → Custom VSIX Packager


Usage
Smaller file sizes than vsce
Custom ignore patterns
Structure visualization


Preview
Image





Region Folding



Aspect
Details




Function
1-7 fold region, instead of folding by actual level folds by region level. The same goes with the second set but is a toggle. If you want to use the functions listed below create an item in devstack with type command, also found in devstack quickpick


Function Overview
Fold Region Level 1 - ocrmnavigator.foldRegionLevel1
Fold Region Level 2 - ocrmnavigator.foldRegionLevel2
Fold Region Level 3 - ocrmnavigator.foldRegionLevel3
Fold Region Level 4 - ocrmnavigator.foldRegionLevel4
Fold Region Level 5 - ocrmnavigator.foldRegionLevel5
Fold Region Level 6 - ocrmnavigator.foldRegionLevel6
Fold Region Level 7 - ocrmnavigator.foldRegionLevel7
Toggle Region Level 1 - ocrmnavigator.toggleFoldRegionLevel1
Toggle Region Level 2 - ocrmnavigator.toggleFoldRegionLevel2
Toggle Region Level 3 - ocrmnavigator.toggleFoldRegionLevel3
Toggle Region Level 4 - ocrmnavigator.toggleFoldRegionLevel4
Toggle Region Level 5 - ocrmnavigator.toggleFoldRegionLevel5
Toggle Region Level 6 - ocrmnavigator.toggleFoldRegionLevel6
Toggle Region Level 7 - ocrmnavigator.toggleFoldRegionLevel7





FORMATTING AND ERRORS JSON FILES



Aspect
Details




Function
Includes formatting json and jsonc files converting multiline items to inline, toggles error logging json and jsonc files. If you want to use the functions listed below create an item in devstack with type command, also found in devstack quickpick


Function Overview
format Current Json File - ocrmnavigator.formatCurrentJsonFile
format Packge Dev Json - ocrmnavigator.formatPackgeDevJson
format Global Navigator Config Json - ocrmnavigator.formatGlobalNavigatorConfigJson
toggle Json Validation - ocrmnavigator.toggleJsonValidation
toggle Jsonc Validation - ocrmnavigator.toggleJsoncValidation





Encoder/Decoder



Aspect
Details




Function
File format conversion


Description
Convert between file formats: Base64, SVG, MP4 to MP3, etc.


Usage
Access via web GUI


Advanced Usage
13+ formats, batch processing, quality settings


Preview
[Video]





File Formatting Configurator



Aspect
Details




Function
Opens configuration interface for setting up custom formatters


Description
Configure formatters per file type with live preview of changes


Usage
Web GUI


Preview
[Video]





Formatter



Aspect
Details




Function
Multi-format file formatter


Description
Format 33+ file types with, can also set as default formatter per file type, to set select Format Document with..., select configure and select desired foramtter


Usage
r-click → Formatters → select option


Preview
Image





Inline Imports



Aspect
Details




Function
Convert multi-line imports to single line


Description
Transforms multi-line imports into single-line format while converting @ to ~


Usage
r-click → Format document with → select option


Preview
Video





Batch Rename



Aspect
Details




Function
Mass file renaming tool


Description
Edit multiple filenames via generated .txt file


Usage
Hightlight files → r-click → Batch Rename


Advanced Usage
Pattern matching, regex support, undo functionality





File Line Jumper



Aspect
Details




Function
Creates clickable file links with line numbers


Description
Creates clickable links in any file that open at specific line numbers. Available before and after return statements


Usage
Use // @dev path:line syntax


Example
// @dev app/components/catalyst-ui/primitives/table.tsx:6


Preview
Video


Preview
Image





File Search Jumper



Aspect
Details




Function
Creates search-based file links


Description
Create links that search for terms and navigate to first instance


Usage
Use // @devsearch path:term


Example
// @devsearch app/components/catalyst-ui/data/table-data.tsx:Table


Preview
Video


Preview
Image





File Nesting - Coming Soon



Aspect
Details




Function
Configure file nesting rules


Description
Organize related files in explorer view


Usage
Configure via settings





Remove Trailing Commas



Aspect
Details




Function
Clean JSON/JavaScript trailing commas


Description
Removes trailing commas from JSON and JS objects


Usage
r-click → Formatters → select option


Preview
Image





Remove All Comments



Aspect
Details




Function
Strip code comments


Description
Strips all comments from the current file


Usage
r-click → Formatters → select option or command palette


Preview
Image





Remove console.log from file



Aspect
Details




Function
Clean console logs from file


Description
Removes all console.log statements from the current file


Usage
r-click → Formatters → select option or command palette


Preview
Image





Remove console.log from folder



Aspect
Details




Function
Clean console logs from folder


Description
Removes all console.log statements from all files in the selected folder


Usage
r-click folder → Formatters → select option


Preview
Image





Remove console.log from workspace



Aspect
Details




Function
Clean console logs from workspace


Description
Removes all console.log statements from all files in the entire workspace


Usage
Command palette → select remove console.log from workspace


Preview
Image





Remove Unused Imports From File



Aspect
Details




Function
Clean unused imports


Description
Detects and removes import statements that are not used in the file


Usage
r-click → Formatters → select option or command palette


Preview
Image






REFERENCE
Shortcuts



Aspect
Details




Function
Keyboard shortcuts reference


Description
Reference for all keyboard shortcuts in the extension


Usage



Context Snippets
alt + s


Clipboard++
alt + c


Show Bookmarks
alt + b


DevStack Quick Pick
alt + d


Open UI Dashboard
alt + a


Show Error History
alt + h


Catalyst UI Quickpick
alt + x


Icons Quickpick
alt + v





VSCode Commands Cheat Sheet



Aspect
Details




Function
VSCode commands reference


Description
Cheat sheet with 360+ commonly used VSCode commands


Usage
Access via reference menu


Advanced Usage
Search, filter by category, quick copy


Preview
Image





Clipboard History Pro



Aspect
Details




Function
Multi-item clipboard manager


Description
Track and reuse your last 20 clipboard items


Usage
Click Clipboard++ located on the status bar


Advanced Usage
Hover previews
Status bar access
Persistent across sessions





Bookmarks



Aspect
Details




Function
Line-specific code bookmarks


Description
Mark and navigate to specific lines across your workspace
Stores up to 20 bookmarks
Status bar access
Quick navigation


Usage
Click Bookmarks located on the status bar


Add bookmark
r-click line → DevStack → Add Bookmark


Preview
Image





Markdown Cheat Sheet



Aspect
Details




Function
Markdown reference guide


Description
Cheat sheet with GitHub-flavored Markdown examples


Usage
Web GUI


Preview
Image





Color Wheel



Aspect
Details




Function
Advanced color picker


Description
ShadCN-inspired color picker with multiple format outputs


Usage
Web GUI


Preview
Image





Wizards Section



Aspect
Details




Function
Command reference and organization


Description
Collection of all extension commands for custom workflows. To enable you to create any custom workflow using the command item type


Usage
Browse categorized command list, outlined within the accordian below


Advanced Usage
Create custom chains/concurrent commands, integrate with other extensions



List...



Name
Value




VFS



COMMANDS, POWERSHELL, OPEN FILE FROM DEVSTACK PANE, VSCODE COMMAND, ETC



Copy Value
copyValue


Execute Debian WSL CMD
debianCMD


Bash Cmd
addTerminalCommandToCategory


Snippets File
snippetsFile


Command
cmdsEdit


Chain
chainsCreate


Cmd / Powershell Cmd / URL / VSCode Cmd / Debian Cmd / File / MD / Folder
cmdsCreate


Playlist
openMusicInBrowser


Chains
devStackView


Execute Terminal CMDS
executeItem


Chain / Cmd Sequencer
addAutoSequencer


Execute a chain of items
autoSequencer


Copy Path
copyPath


Execute Command
executeSTRCommand


Execute Command
executeCommand


Concurrently
concurrent


EDITING ITEMS IN DEVSTACK



Batch Add Files to CRM Navigator
addFilesToNavigator


Toggle To Hide Item In UI
hideSingleItem


Toggle Hidden Nav Items
toggleHiddenItems


Add to tree items
addUnusedToFileTree


Add File to DevStack
addFileToNavigator


Add File/s to DevStack
initialFile


Edit Label
editFileLabel


Remove Item
deleteItem


Move Folder Up
moveCategoryUp


Move Folder Down
moveCategoryDown


Remove Folder
deleteCategory


Move File Up
moveFileUp


Remove URL
removeUrl


Edit Command
editCommand


Move File Item
moveItem


Select as Move Destination
setMoveTarget


Edit Web URL
editWebUrl


Add Sub Folder
addSubcategory


Refresh Navigator
refresh


Expand Folder By Default
expandFolder


Collapse Folder By Default
collapseFolder


Add Item
addItemToDevstack


Create
uiCreate


DevStack Chains
chainsEdit


SEARCH DEVSTACK



DevStack: Search
showQuickPick


Search
quickSearch


Search in Navigator
search


UI WEB APP



DevStack
cmdsView


Media Player
openPlayer


Add Menu
addActions


Main Menu
mainActions


Configurators
uiConfigurators


Master Apps
uiMasterApps


UI Dashboard
openUi


OTHER FUNCTIONLAITY



Convert To Become Agnostic
convertToAgnostic


Reference
uiReference


clean
clean


Configuration
configSub


prevState
prevState


Show History
showHistory


DevStack
devStackSubmenu


Search For Unused Exports
searchForExportsThatAreNotInUse


Add Bookmark
bookmarks.add


Show Bookmarks
bookmarks.show


Show Clipboard History
clipboardManager.showHistory


Reveal in Explorer
revealInExplorer


Open Viewer
viewersSub


MARKDOWN



Render MD
renderMd


MD
mdViewWorkspaceList


MD
createUiMD


Render MD In VSCode
renderedMDFile


View MD
mdFile


MD w/ Viewer
createMDWCheat3Wide


Edit .MD Label
editMDLabel


SNIPPETS



Context Snippets
contextSnippets


%s
insertSnippet


refreshWorkspaceSnippets
refreshWorkspaceSnippets


Import Snippets
importSnippets


Copy Snippet Body
copySnippetToClipboard


JSON



JSON Comments
jsonComments


UI COMPONENTS LIBRARY



Install Catalyst-UI exluding config files
installCatalystUIOnly


Install Catalyst-UI Free exluding config files
installCatalystUIFreeOnly


Install Catalyst UI Comps
installCatalystUIFree


Install Catalyst UI
installCatalystUI


Components
UIComponents


Components List
UIComponentsList


Change Free Premium
changeFreePremium


TanStack Table Scaffolding
myTanStackTable


Project Scaffolding
myProjectSetup


Components Viewer
UIComponentsViewer


Required for clientOnly - use-hydrated.js
useHydrated


Custom client-only.js that replaces remix-utils version
clientOnly


Search w/ Fuse.js
searchWFusejs


Search w/ Filter
searchWFilter


Command w/ CommandInput
commandWCommandInput


Command w/ Search
commandWSearch


BG w/ Hover
bgWHover


BG Blue w/ Hover
blue


API Route
apiRoute


Command - Pagination
cammandPagination


ICON LIBRARY



icons
insertIcon


CSS LIBRARY



Scroll Bar - based on CSS theme
themedScrollBar


AI



Open Pre-Prompt
openPrePrompt


Send Function Context to Copilot
sendFunctionContextToCopilot


Show Modernization Stats
showModernizationStats


Convert Class to Hooks
convertClassToHooks


Modernize Code
modernizeCode


Navigate To Error
navigateToError


Undo Last Auto-Fix
undoLastFix


Confirm Fix Worked (Learn Pattern)
confirmFixWorked


Clear Error History
clearErrorHistory


Show Error History
showErrorHistory


Find Errors, Missing Imports & More
errorsMissingImportsPlus


REMIX-RUN



Automatic Remix Action
autoRemixAction


Build & Deploy
buildProjectConfigurator


Create Single App - React Router
createSingleApp


Error Boundary
addErrorBoundary


Meta Function
addMetaFunction


Links Function
addLinksFunction


Create Action Object
createActionObject


Auth Design Page
authDesignPage


Create Include Object
createIncludeObject


Create Monorepo
createMonorepo


Convert to Monorepo
convertToMono


Build & Deploy Project
buildProject


Remix
remixAdd


Functions
remix


RR Folder Routing
reactrouterFileBasedRouting


Create Tests For Route and Action
testRouteFile


Install Auth in Remix w/ Auth Routes
installAuthRemix


Install OTP Into Remix w/ Auth Routes
installOTPRemix


Add ESlint and Prettier configs
configureEslingPrettier


Converts the v1 routing convention to v2
convertV1ToV2


Open Route in Browser
openRouteInBrowser


Preview Route URL
previewRoute


Test Route Conversion
testRouteConversion


Open the files route
openUrlFromEditor


SHADCN



Typography
typography


Nav Menu
navMenu


Pagination
pagination


Date Time Picker
dateTime


Date W/ Input
dateWInput


DOB Date Picker
dobDate


Avatar
avatar


Alert Dialog
alertDialog


Switch Card
switchCard


Switch
shadCNswitch


Textarea
textarea


Tooltip
addShadcnTooltip


Sidebar
addShadcnSidebar


Context Menu
addShadcnContextMenu


Popover
addShadcnPopover


Menubar
addShadcnMenubar


Hover Card
addShadcnHoverCard


Dropdown Menu
addShadcnDropdownMenu


Drawer
addShadcnDrawer


Chart
addShadcnChart


Combobox
addShadcnCombobox


Checkbox
addShadcnCheckbox


Install ShadCN w/ All Components
installShadcn


Fetch w/ state and useEffect
addFetch


Sm Table w/ Columns
addCleanSmTable


Fuse Input w/ X
addFuseInput


Designed Button ClassName
designedButtonClassName


Add Missing Imports
addMissingImports


Command Dialog
commandDiaolog


Draggable Responsive Dialog Drawer
draggableresponsivedialogdrawer


ButtonStyled
ButtonStyled


Context
Context


Group
Group


Toggle
Toggle


OTP
OTP


Hover
Hover


Menu
Menu


Dropdown
Dropdown


Responseive
Responseive


Command
Command


Accordion
Accordion


Button
addShadcnButton


Input
addShadcnInput


Card
addShadcnCard


Dialog
addShadcnDialog


Form
addShadcnForm


Select
addShadcnSelect


Table
addShadcnTable


Tabs
addShadcnTabs


Alert
addShadcnAlert


Sheet
addShadcnSheet


Route File
addRouteFile


TanStack Table File
addTableFile


useEffect
addUseEffect


useState
addUseState


Map
addMap


On Submit w/ Fetcher
addOnSubmitFunionatlity


Button W/ On Click With Submit
addOnClickWithSubmit


ClassNames
addClassNames


Fetcher.Form With Items
addFetcherForm


Loader
addLoader


Action
addAction


GITHUB



Open GitHub Repo At File
openGitHubRepoAtFile


Open GitHub Repo In Browser
openGitHubRepo


G4PUBNPM
G4PUBNPM


GitHub Functions



Auto Commit, Push and Upgrade
autoCommitPushUpgrade


Auto Commit and Push
autoCommitPush


Upgrade Patch, create & reveal VSIX
upgradeExtension


PRISMA



Update Prisma
updatePrisma


Prisma
prisma


Generate CRUD Resolvers
generateCrudResolvers


Open Object In Schema
clickToSchemaObject


dbAllLocal
dbAllLocal


dbAllRemote
dbAllRemote


dbReset
dbReset


dbPush
dbPush


dbSeed
dbSeed


dbGen
dbGen


dbStudio
dbStudio


Visualize Schema Relations
visualizeSchemaRelations


VSCODE



Performance Switch: Disable For Current File
disableForCurrentFile


Performance Switch: Enable For Current File
enableForCurrentFile


Performance Switch: Disable Everything
disableEverything


Performance Switch: Enable Everything
enableEverything


Performance Switch: Toggle Global Disable
toggleGlobalDisable


Build Extension +++
YEEEETMOTHERFUCKER2


yeet
yeet


Remove All Comments
removeAllComments


Batch Rename
renameBatch


Custom .VSIX Packager
customVsixPackager


Auto Fold #region
foldParentRegions


Remove Trailing Commas
removeJson


YEEEET!!!
YEEEETMOTHERFUCKER


Formatters
formattersSub


Auto Fold #region
autoFoldRegion


Remove console.log statements from this file
removeConsoleLogsFromFile


Remove console.log statements from folder
removeConsoleLogsFromFolder


Remove console.log statements from workspace
removeConsoleLogsFromWorkspace


Inline Imports
inlinesImports


Remove Unused Imports From File
removeUnusedImports


Format with DevStack
formatCurrentFile


Formatters
configureFormatters


Configure Missing Imports
configureImports


DukeNUKEM
DukeNUKEM


Missing Imports && Variables
missingImportsAndVariables


REFERENCE



Tailwind Converter
tailwindConverter


Open Left Off Note
openLeftOffNote


Navigate to Bookmark
navigateToBookmark


View Left Off Note
openExistingNote


VSCode Cmds Reference
showCommandsReference


Color Wheel
colorWheel


MD Guide
viewMarkdownGuide


build
build


REXT
REXT


RTS
RTS


RWINDOW
RWINDOW


DEVOOLS
DEVOOLS


CONFIG



Create Export Index ( registry )
createFolderSmartIndex


View Example Config
configExample


Edit .json Config
editConfig


Share Config With Friend
shareConfig


Default Apps
editDefaultValues


Export Config
exportConfig


Import Config
importConfig


VSCODE && TAILWIND STYLING



Blacked Out
blackedOut


Blued Out
bluedOut


VSCode Theme Configurator
themeViewer


Window Differentiator
windowDifferentiator


Reset Colors - Window Differentiator
resetWindowDifferentiator






---
## VSCODE & TAILWIND STYLING
VSCode & Tailwind Theme Builder



Aspect
Details







Function
Create custom VSCode & Tailwind themes





Description
Visual theme configurator with live preview, then provides v4, v3 css formats and vscode settings file format





Usage
Web GUI

Preview
Image





Blacked Out



Aspect
Details




Function
Dark theme preset


Description
Ultra-dark theme configuration for VSCode, sets your active workspaces theme settings


Usage
Settings Dropdown → select option


Preview
Image





Blued Out



Aspect
Details




Function
Dark theme preset, in dark blue


Description
Ultra-dark theme configuration for VSCode, sets your active workspaces theme settings


Usage
Settings Dropdown → select option


Preview
Image





Window Differentiator



Aspect
Details




Function
Multi-window color coding


Description
Assign different colors to multiple VSCode windows, provides a different color each time the function is triggered with about 20+ variants


Usage
Settings Dropdown → select option


Preview
Image





Reset - Window Differentiator



Aspect
Details





Function
Reset window colors



Description
Restores default window colors



Usage
Settings Dropdown → select option



Preview
Image






TOOLS
Left Off Note|Aspect|Details|
|---|---|
|Function|Project-specific notes system|
|Description|Leave detailed, project-specific notes for where you left off|
|Usage|Context menu → Open Leftoff Note|
|Advanced Usage|Persistent notes per workspace, markdown support|
|Preview|Image|


Tailwind Converter



Aspect
Details




Function
Convert between Tailwind versions


Description
V3←→V4 Tailwind class converter tool


Usage
Web GUI


Preview
Image





React/Tailwind Sandbox



Aspect
Details




Function
Live development environment


Description
Dedicated live development environment for component design with Monaco editor and dynamic dock


Usage
Web GUI


Advanced Usage
Hot reload, component library integration, export


Config Files
Sandbox config files






CONFIG
Share Config With Friends / Export All Configs



Aspect
Details




Function
Export DevStack configuration


Description
Share your setup with others via exported config files
Includes README with setup instructions
Exports to shareWithFriends folder


Usage
Settings dropdown → Share Config


Warning
Review for sensitive data before sharing


Preview
Image


Preview
Image





View Config Example



Aspect
Details




Function
Configuration reference


Description
View example DevStack configuration files


Usage
settings dropdown → select option && Web GUI Sidebar


Preview
Image


Preview
Image





Add Missing Imports w/ Global Config



Aspect
Details




Function
Auto-import missing dependencies


Description
Automatically adds missing import statements based on global configuration


Usage
r-click in editor → formatters → select option


Preview
Image





Default Apps Configuration
| Aspect             | Details                                                                                                            |
| ---                | ---                                                                                                                |
|Function|Manage active features|
|Description|Control which DevStack features load on startup|
|Usage|Accessible via extensions settings, workspace or global user settings files, or from the web GUI|
|Config|
{
"ocrmnavigator.vscodeVersion": "Code - Insiders",
"ocrmnavigator.configPath": ".vscode/ocrmnavigator/search-config.json",
"ocrmnavigator.toggleHiddenItems": true,
"ocrmnavigator.superuserTaskRunner":  true,
"ocrmnavigator.strPrismaUpdater":  true,
"ocrmnavigator.commands":  true,
"ocrmnavigator.vscodecmdref":  true,
"ocrmnavigator.markdownViewer": true,
"ocrmnavigator.snippets":  true,
"ocrmnavigator.snippetsInEditor":  true,
"ocrmnavigator.editorContextSnippets":  true,
"ocrmnavigator.formatters":  true,
"ocrmnavigator.trailingCommas":  true,
"ocrmnavigator.batchRename":  true,
"ocrmnavigator.addMissingImports":  true,
"ocrmnavigator.eslintPrettier":  true,
"ocrmnavigator.remixUtils":  true,
"ocrmnavigator.theme":  true,
"ocrmnavigator.blackedOut":  true,
"ocrmnavigator.windowDifferentiator":  true,
"ocrmnavigator.shadCNComponents":  true,
"ocrmnavigator.repoMgr":  true,
"ocrmnavigator.openGithub":  true,
"ocrmnavigator.githubFunctions":  true,
"ocrmnavigator.prismaFunctions":  true,
"ocrmnavigator.remixComponents":  true,
"ocrmnavigator.clickToSchema":  true,
"ocrmnavigator.crudResolvers":  true,
"ocrmnavigator.extMgrForDevs":  true,
"ocrmnavigator.fileNesting":  true,
"ocrmnavigator.revealExplorer":  true,
"ocrmnavigator.copyPath":  true,
"ocrmnavigator.bookmarks":  true,
"ocrmnavigator.searchBar":  true,
"ocrmnavigator.clipBoardHistory":  true,
"ocrmnavigator.colorWheel":  true,
"ocrmnavigator.lucideIcons":  true,
"ocrmnavigator.share":  true,
"ocrmnavigator.url":  true,
"ocrmnavigator.jsonComments":  true,
"ocrmnavigator.con":  true,
"ocrmnavigator.removeAllComments":  true,
"ocrmnavigator.unusedFunctions":  true,
"ocrmnavigator.viewers":  true,
"ocrmnavigator.uiDashboard":  true,
"ocrmnavigator.devStackFunctions":  true,
"ocrmnavigator.openLeftOffNote":  true,
"ocrmnavigator.autoFoldRegion":  true,
"ocrmnavigator.notesTodoAndThings":  true,
"ocrmnavigator.renderMd":  true,
"ocrmnavigator.visualizeSchemaRelations":  true,
"ocrmnavigator.createFolderSmartIndex":  true,
"ocrmnavigator.tailwindConverter":  true,
"ocrmnavigator.convertToAgnostic":  true,
"ocrmnavigator.concurrent":  true,
"ocrmnavigator.autoSequencer":  true,
}

 

Create Export Index|Aspect|Details|
|---|---|
|Function|Creates a index file that acts as a registry, allowing for easier imports for the effected functions / components|
|Description|
Within the blocks folder of my components library, instead of importing each and every single individual demo, ie <Demoone />, <DemoTwo />
the registry file was already created, so this step was already completed
next I imported via import * as Components from './index';
then I was able to access every single registry item via, <Components.LoanApp />, <Components.ServiceRepairForm />
This saved a lot of time, because I was able to do a find and replace, allowing me to insert <Components. infront of every function within seconds for 1550+ blocks
|
|Usage|
Right clicking on any folder will reveal the create export index option 
Selecting it will create an index.tsx file, exporting all of that folder's items recursively to allow easier imports when called
|
|Preview|Image|



Edit .json Config



Aspect
Details




Function
Opens the config file in your editor, allowing you to make edits without having to dig through the file system to find it


Usage
Settings dropdown → select option


Preview
Image





Export Config



Aspect
Details




Function
Export the config, writing to a file in your workspace's root directory


Usage
Settings dropdown → select option


Preview
Image





Import Config



Aspect
Details




Function
Import a backup or import a config you made changes to with ease


Usage
Settings dropdown → select option


Preview
Image





Add ESLint & Prettier Configs
| Aspect             | Details                                                 |
| ---                | ---                                                     |
|Function|Install linting configurations|
|Description|Adds ESLint and Prettier configuration files to project|
|Usage|Viewers dropdown → project → select option|
|Preview|Image|


To do Notes Reminders and Post Its



Aspect
Details




Function
Allowing you to create to do lists, notes, reminders and even a section for quick notes during coding sessions


Description
Uses a repo as a single source of truth, allowing you to access it no matter the workspace you are currently coding in. There is also a web app, that was designed for use on mobile devices. There are some really nice ui features implemented into the web app, that I wish all todo/note apps had. For example, its annoying whenever you go to review to do lists, to open one list, check off its items, exit out and go back to your lists view, enter another to do list, reviews its items and so on. Instead, whenever your viewing your list of to dos, the bottom right hand corner features a toggle, when clicked it merges all of your to do list into one and seperates each lists items by its title. Line items are no longer editable, but the entire line item is now clickable in order to change its state from incomplete to completed. Obviously allowing you to quickly review everything at once with ease.


Explorer Pane
4 sections broken up displaying each sections relevant items
on the title of each section has a button for easily creating that sections items
just like any other explorer pane, each sections title can be clicked on to either hide or show its contents
each section hosts a labeling system to allow you to categorize its items with priority, trash, and completed
each items contenxt menu allows you to label that item as well as delete the item from the repo / list


To Do
using vscodes file tree displays clickable list items that when clicked complete the line item and automatically syncs to your todo/notes repo
when clicking on a lists title, opens that list in a markdown doc in the editor for you to make edits
whenever you save within the editor, pushes to your todo/notes repo
displayed check lists renders all nested items allowing you to fold by section with the file tree
in regards to the todo/notes repo you can
create new repos to use
share repos
change the current repo
and everything else that is usually at your disposal when it comes to github


Notes
simple note format
first line use for your docs title  # NOTE
from the 3rd line down, the remainder of the doc can be used as you see fit
no limit on the amount of notes


Reminders
same format as notes except for the reminders date and time
1st line title # REMINDER
3rd line date and time for reminder DUE: 2025-05-22 09:00
5th line onwards, use as you wish


Post its
used as a quick and dirty notes section, like a post it pad
during coding, for me anyways, there are times where its easier to have .txt doc up, create a new file within the project or something similar where I can place code pieces that Im constantly using in the current file that I am coding in. I wanted a way to be able to take care of that but with out the extra over head of opening up other programs, create new files within the project, etc and then have to manage these items later down the road
for an example see the code snippet below
whenever a tab is active, instead of the tab trigger being dead space in the ui, it now acts as a copy button for that tabs content
each items context menu contains the following funtions:
copy contents
clear contents
delete all



  <Tabs>
    <TabsList>
      <TabsTrigger value="white">{white color}</TabsTrigger>
      <TabsTrigger value="green">{green color}</TabsTrigger>
      <TabsTrigger value="blue">{blue color}</TabsTrigger>
      <TabsTrigger value="yellow">{yellow color}</TabsTrigger>
      <TabsTrigger value="purple">{purple color}</TabsTrigger>
    </TabsList>
    <TabsContent value="white">
      notes data
    </TabsContent>
    <TabsContent value="green">
      notes data
      </TabsContent>
    <TabsContent value="blue">
      notes data
      </TabsContent>
    <TabsContent value="yellow">
      notes data
      </TabsContent>
    <TabsContent value="purple">
      notes data
      </TabsContent>
  </Tabs>


[!TIP]
If you were using the to do extension prior, and would like a very easy, painless way to transfer over to use within this extension. Before removing the old extension, change the name of the values in your global settings file from ntrsync to ocrmnavigator so each of them are like the following "ocrmnavigator.branch": "main", and because the code was just transferred over, on your next instance start the explorer pane will load up exactly like it did before.



Markdown Pre-Processor



Aspect
Details




Function
pre-processor for markdown documents that processes a variables system, source map creator/updater, toc creator/updater with toc type, list conversion, code section conversion


Description
currently only the vars systemk, list conversion and code section conversions are available within the extension. I'll include the file for you, if you would like the other features as well


Usage
devstack quickpick option labeled Markdown Pre-Processor, if using the js file you can place within the autorun folder or run from the terminal. In the js file you can change the source file, target file, and set which sections of the pre-processor to run as well as which type of table of contents list that you want in your converted md file


Lists
for lists to render inside a table, the lists need to be an inline html list, which you can imagine are horrible for human reading consumption, but with the conversion you can create your lists just like you would any where else in a markdown doc ie - list item and it will convert it to an inline html format


Code Sections



TOC



Sourcemap



Variables




markdown-pre-processor.js
const fs = require('fs');
const path = require('path');

const srcFile = 'README.dev.md'
const tgtFile = 'README.md'

const variableSystem = true
const sourcemapUpdater = true
const tocUpdater = true
const tocType = 'roman'; // 'unordered', 'ordered', 'roman', 'accordion'
const tableConversion = true

const sourceFile = path.join(__dirname, '..', '..', srcFile);
const targetFile = path.join(__dirname, '..', '..', tgtFile);
console.log('='.repeat(60));
console.log('CONVERT README.DEV.MD');
console.log('='.repeat(60));

try {
  let content = fs.readFileSync(sourceFile, 'utf8');
  
  content = content.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
  console.log('✓ Normalized line endings');
  
  // VARIABLE SYSTEM
  // #region ============================================
  if (variableSystem) {
    const variables = {};
    
    const constRegex = /<!--\s*const\s+(\w+)\s*:\s*(.+?)\s*-->/g;
    const constMatches = [...content.matchAll(constRegex)];
    
    constMatches.forEach(match => {
      variables[match[1]] = match[2].trim();
      console.log(`✓ Variable set: ${match[1]} = ${match[2].trim()}`);
    });
    
    content = content.replace(constRegex, '');
    
    let lastContent, iterations = 0;
    do {
      lastContent = content;
      content = content.replace(/\${(\w+)}/g, (match, varName) => {
        if (variables[varName] !== undefined) return variables[varName];
        console.warn(`⚠  Variable not found: ${varName}`);
        return match;
      });
    } while (content !== lastContent && ++iterations < 10);
    
    content = content.replace(/^\s*<!--\s*-->\s*$/gm, '');
    
    if (Object.keys(variables).length > 0) {
      console.log(`✓ Processed ${Object.keys(variables).length} variables`);
    }
  }
  // #endregion

  // TOC UPDATER
  // #region ============================================
  if (tocUpdater) {
    console.log('\nGenerating Table of Contents...');
    
    const lines = content.split('\n');
    const headers = [];
    let foundToc = false;
    let tocLineIndex = -1;
    
    for (let i = 0; i < lines.length; i++) {
      const line = lines[i];
      
      if (line.match(/^##\s+.*?\*?\*?TOC\*?\*?/i)) {
        foundToc = true;
        tocLineIndex = i;
        console.log(`Found TOC at line ${i + 1}: ${line.substring(0, 60)}`);
        continue;
      }
      
      if (foundToc) {
        const imageMatch = line.match(/^##\s+<img[^>]+>\*?\*?(.+?)\*?\*?/);
        const simpleMatch = line.match(/^##\s+(.+)$/);
        
        if (imageMatch) {
          let title = imageMatch[1].trim();
          title = title.replace(/<br\s*\/?>\s*$/i, '').trim();
          const anchor = title.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
          headers.push({ title, anchor, line: i });
          console.log(`  Found header: ${title}`);
        } else if (simpleMatch) {
          let title = simpleMatch[1].trim();
          title = title.replace(/<br\s*\/?>\s*$/i, '').replace(/\*\*/g, '').trim();
          if (title.toLowerCase() === 'sourcemap') continue;
          const anchor = title.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
          headers.push({ title, anchor, line: i });
          console.log(`  Found header: ${title}`);
        }
      }
    }
    
    let tocContent = '';
    const romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X',
                          'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX',
                          'XXI', 'XXII', 'XXIII', 'XXIV', 'XXV', 'XXVI', 'XXVII', 'XXVIII', 'XXIX', 'XXX',
                          'XXXI', 'XXXII', 'XXXIII', 'XXXIV', 'XXXV', 'XXXVI', 'XXXVII', 'XXXVIII', 'XXXIX', 'XL',
                          'XLI', 'XLII', 'XLIII', 'XLIV', 'XLV', 'XLVI', 'XLVII', 'XLVIII', 'XLIX', 'L'];
    
    headers.forEach((header, idx) => {
      let prefix = '';
      
      switch (tocType) {
        case 'ordered':
          prefix = `${idx + 1}. `;
          break;
        case 'roman':
          prefix = `${romanNumerals[idx] || (idx + 1)}. `;
          break;
        case 'unordered':
        case 'accordion':
          prefix = '- ';
          break;
      }
      
      tocContent += `${prefix}[${header.title.toUpperCase()}](#${header.anchor})\n`;
    });
    
    if (tocType === 'accordion') {
      tocContent = `<details closed><summary style="font-size: 1.2em; color: #1447e6;"><b>TOC</b></summary>\n\n${tocContent}\n</details>`;
    }
    
    if (tocLineIndex !== -1) {
      const tocHeaderLine = lines[tocLineIndex];
      const afterTocIndex = tocLineIndex + 1;
      
      let nextSectionIndex = -1;
      for (let i = afterTocIndex; i < lines.length; i++) {
        if (lines[i].match(/^##\s+/)) {
          nextSectionIndex = i;
          break;
        }
      }
      
      const beforeToc = lines.slice(0, afterTocIndex).join('\n');
      const afterNextSection = nextSectionIndex !== -1 ? lines.slice(nextSectionIndex).join('\n') : '';
      
      content = beforeToc + '\n\n' + tocContent + '\n\n' + afterNextSection;
      console.log(`✓ TOC updated with ${headers.length} entries (${tocType} style)`);
    } else {
      console.warn('⚠  TOC section not found');
    }
  }
  // #endregion

// SOURCEMAP UPDATER
// #region ============================================
if (sourcemapUpdater) {
  console.log('\nGenerating Sourcemap...');
  
  const lines = content.split('\n');
  const sections = [];
  let currentSection = null;
  let inSourcemapSection = false;
  let foundToc = false;
  
  for (let i = 0; i < lines.length; i++) {
    const line = lines[i];
    
    if (line.match(/^##\s+.*?\*?\*?TOC\*?\*?/i)) {
      foundToc = true;
      continue;
    }
    
    const h2ImageMatch = line.match(/^##\s+<img[^>]+>\*?\*?(.+?)\*?\*?/);
    const h2Match = line.match(/^##\s+(.+)$/);
    
    if (h2ImageMatch || h2Match) {
      let title = h2ImageMatch ? h2ImageMatch[1].trim() : h2Match[1].trim();
      
      title = title.replace(/<br\s*\/?>\s*$/i, '').replace(/\*\*/g, '').trim();
      
      if (title.toLowerCase() === 'sourcemap') {
        inSourcemapSection = true;
        currentSection = null;
        continue;
      }
      
      if (inSourcemapSection && title.toLowerCase() !== 'sourcemap') {
        inSourcemapSection = false;
      }
      
      const skipSections = [
        'toc',
        'sourcemap',
        'license',
        'overview',
        'features',
        'getting started',
        'usage',
        'roadmap',
        'project roadmap',
        'acknowledgments',
        'acknowledgements'
      ];
      
      const titleLower = title.toLowerCase();
      
      if (skipSections.includes(titleLower) || !foundToc || title.trim() === '') {
        currentSection = null;
        continue;
      }
      
      const anchor = title.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
      
      if (anchor === '') {
        currentSection = null;
        continue;
      }
      
      currentSection = { title, anchor, subsections: [] };
      sections.push(currentSection);
      console.log(`  Section: ${title}`);
    }
    
    if (!inSourcemapSection && currentSection) {
      const h3Match = line.match(/^###\s+(.+)$/);
      if (h3Match) {
        const subtitle = h3Match[1].trim();
        
        if (subtitle === '') continue;
        
        const subanchor = subtitle.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
        
        if (subanchor === '') continue;
        
        currentSection.subsections.push({ title: subtitle, anchor: subanchor });
        console.log(`    Subsection: ${subtitle}`);
      }
    }
  }
  
  let sourcemapContent = '';
  sections.forEach(section => {
    if (section.title && section.anchor) {
      sourcemapContent += `- [${section.title}](#${section.anchor})\n`;
      section.subsections.forEach(sub => {
        if (sub.title && sub.anchor) {
          sourcemapContent += `  - [${sub.title}](#${sub.anchor})\n`;
        }
      });
    }
  });
  
  const licenseRegex = /^##\s+.*?\*?\*?License\*?\*?/im;
  const licenseMatch = content.match(licenseRegex);
  
  if (licenseMatch) {
    const licenseIndex = content.indexOf(licenseMatch[0]);
    
    const sourcemapRegex = /^##\s+.*?\*?\*?Sourcemap\*?\*?/im;
    const existingSourcemap = content.match(sourcemapRegex);
    
    if (existingSourcemap) {
      const sourcemapStartIndex = content.indexOf(existingSourcemap[0]);
      const afterSourcemap = content.substring(sourcemapStartIndex);
      const nextSectionMatch = afterSourcemap.match(/^##\s+/m);
      
      if (nextSectionMatch) {
        const nextSectionIndex = afterSourcemap.indexOf(nextSectionMatch[0]);
        const beforeSourcemap = content.substring(0, sourcemapStartIndex);
        const afterSourcemapSection = content.substring(sourcemapStartIndex + nextSectionIndex);
        content = beforeSourcemap + afterSourcemapSection;
        const newLicenseMatch = content.match(licenseRegex);
        if (newLicenseMatch) {
          const newLicenseIndex = content.indexOf(newLicenseMatch[0]);
          const beforeLicense = content.substring(0, newLicenseIndex);
          const fromLicense = content.substring(newLicenseIndex);
          content = beforeLicense + '## Sourcemap\n\n' + sourcemapContent + '\n\n' + fromLicense;
        }
      }
    } else {
      const beforeLicense = content.substring(0, licenseIndex);
      const fromLicense = content.substring(licenseIndex);
      content = beforeLicense + '## Sourcemap\n\n' + sourcemapContent + '\n\n' + fromLicense;
    }
    
    console.log(`✓ Sourcemap updated with ${sections.length} sections (placed before License)`);
  } else {
    console.warn('⚠  License section not found - placing Sourcemap at end');
    content += '\n\n## Sourcemap\n\n' + sourcemapContent + '\n';
  }
}
// #endregion
  // TABLE CONVERSION LOGIC
  // #region ============================================
  if (tableConversion) {
    function convertMarkdownListToHtml(listText) {
      const lines = listText.split('\n').filter(line => line.trim());
      let html = '<ul>';
      let indentStack = [0];
      
      for (let i = 0; i < lines.length; i++) {
        const match = lines[i].match(/^(\s*)-\s+(.+)$/);
        if (!match) continue;
        
        const spaces = match[1].length;
        const text = match[2].trim();
        const currentIndent = indentStack[indentStack.length - 1];
        
        if (spaces > currentIndent) {
          html += '<ul>';
          indentStack.push(spaces);
        } else if (spaces < currentIndent) {
          while (indentStack.length > 1 && spaces < indentStack[indentStack.length - 1]) {
            html += '</li></ul>';
            indentStack.pop();
          }
          html += '</li>';
        } else if (i > 0) {
          html += '</li>';
        }
        
        html += `<li>${text}`;
      }
      
      html += '</li>';
      while (indentStack.length > 1) {
        html += '</ul></li>';
        indentStack.pop();
      }
      html += '</ul>';
      
      return html;
    }
    
    function processTableCell(cellContent) {
      cellContent = cellContent.trim();
      
      if (cellContent.includes('```')) {
        const codeMatch = cellContent.match(/```(\w+)?\s*\n([\s\S]*?)```/);
        if (codeMatch) {
          const code = codeMatch[2];
          return `<pre><code>${code.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code></pre>`;
        }
      }
      
      if (cellContent.match(/(^|\n)\s*-\s+/)) {
        return convertMarkdownListToHtml(cellContent);
      }
      
      return cellContent;
    }
    
    const lines = content.split('\n');
    const output = [];
    let i = 0;
    let tablesFound = 0;
    
    while (i < lines.length) {
      const line = lines[i];
      
      if (line.match(/^\|.+\|$/)) {
        const nextLine = i + 1 < lines.length ? lines[i + 1] : '';
        
        if (nextLine.match(/^\|[\s\-:|]+\|$/)) {
          tablesFound++;
          
          output.push(line);
          output.push(nextLine);
          i += 2;
          
          let rowsProcessed = 0;
          while (i < lines.length) {
            const currentLine = lines[i];
            
            if (currentLine.match(/^\|/)) {
              let fullRow = currentLine;
              let rowLines = [currentLine];
              
              while (!fullRow.match(/\|$/) && i + 1 < lines.length) {
                i++;
                fullRow += '\n' + lines[i];
                rowLines.push(lines[i]);
              }
              const pipePositions = [];
              for (let j = 0; j < fullRow.length; j++) {
                if (fullRow[j] === '|') pipePositions.push(j);
              }
              
              if (pipePositions.length >= 2) {
                const cells = [];
                for (let j = 0; j < pipePositions.length - 1; j++) {
                  const start = pipePositions[j] + 1;
                  const end = pipePositions[j + 1];
                  const cellContent = fullRow.substring(start, end);
                  cells.push(cellContent);
                }
                
                const processedCells = cells.map(cell => processTableCell(cell));
                output.push('|' + processedCells.join('|') + '|');
                rowsProcessed++;
              } else {
                output.push(...rowLines);
              }
              
              i++;
            } else if (currentLine.trim() === '') {
              if (i + 1 < lines.length && lines[i + 1].match(/^\|/)) {
                output.push(currentLine);
                i++;
              } else {
                break;
              }
            } else {
              break;
            }
          }
          
          console.log(`✓ Table #${tablesFound}: ${rowsProcessed} rows processed`);
          continue;
        }
      }
      
      output.push(line);
      i++;
    }
    
    content = output.join('\n');
    
    if (tablesFound > 0) {
      console.log(`✓ Table conversion: ${tablesFound} tables processed`);
    }
  }
  // #endregion
  
  fs.writeFileSync(targetFile, content, 'utf8');
  
  console.log('='.repeat(60));
  console.log(`✓ Processing complete:`);
  if (variableSystem) console.log(`  - Variable system: enabled`);
  if (tocUpdater) console.log(`  - TOC updater: enabled (${tocType})`);
  if (sourcemapUpdater) console.log(`  - Sourcemap updater: enabled`);
  if (tableConversion) console.log(`  - Table conversion: enabled`);
  console.log('✓ Successfully converted README.dev.md to README.md');
  console.log(`✓ Output written to: ${targetFile}`);
  console.log('='.repeat(60));
  
} catch (error) {
  if (error.code === 'ENOENT') {
    console.error('✗ Error: README.dev.md not found');
  } else {
    console.error('✗ Error converting file:', error.message);
  }
  process.exit(1);
}



Sourcemap

VFS

Virtual Filing System
VSCode Commands
PowerShell Command
Bash Commands
Copy To Clipboard
Sequential Execution
Concurrent Execution
Bleeding Edge
Project Agnostic Configuration
DevStack Quickpick
G4 and X-VSCE
Reveal In Explorer
Copy Path
Search


Markdown

Viewer Renderer
MD Viewer/Renderer VSCode
Monaco Editor
MD Reference Guide
Readme Builder
Readme Generator
Convert MD File To Safe Inline String


Snippets
Editor / Viewer
Context Snippets
UI Library

Catalyst UI
Insert Component via Editor's Context Menu
Insert Component via Quickpick
Install
Live React/Tailwind Sandbox


Icon Library

Icons
Icons Quickpick


CSS

Coming soon


AI

Deterministic AI Engine Compiler


Prompt

Prompt - COMING SOON


Remix-Run

npx create-remixv2
Automatic Remix Action
Context Components/Functions
V1 → V2 Routing Conversion
Convert Single App To Mono Repo
Open Route File in Browser
Create Route Files
Install Auth in Remix
Install OTP in Remix
Create Tests for Routes and Actions in Remix-Run
Remix Run Insert Code
Routing Convention Conversion Remix-Run
Create Tests for Routes and Actions in Remix-Run
Create Single App - React Router
Convert Remix-Run to Platform X
Error Boundary
Meta Function
Links Function
Create Monorepo
Build & Deploy Project
RR Folder Routing
Preview Route URL
Create Action Object


ShadCN

Add ShadCN Components
Install ShadCN Components w/configs
Insert ShadCN Components


GitHub

Repo Management
Open Repo in Browser
Open Repo at File


Prisma

Create Include Object
Create Action Object
Click to Schema Object
Generate Crud Resolvers / Rest End Points
Auto Create Schema
Visualize Schema Relations


VSCode

Performance Switch
Custom VSIX Packager
Region Folding
FORMATTING AND ERRORS JSON FILES
Encoder/Decoder
File Formatting Configurator
Formatter
Inline Imports
Batch Rename
File Line Jumper
File Search Jumper
File Nesting - Coming Soon
Remove Trailing Commas
Remove All Comments
Remove console.log from file
Remove console.log from folder
Remove console.log from workspace
Remove Unused Imports From File


Reference

Shortcuts
VSCode Commands Cheat Sheet
Clipboard History Pro
Bookmarks
Markdown Cheat Sheet
Color Wheel
Wizards Section


VSCode & Tailwind Styling

VSCode & Tailwind Theme Builder
Blacked Out
Blued Out
Window Differentiator
Reset - Window Differentiator


Tools

Left Off Note
Tailwind Converter
React/Tailwind Sandbox
Encoder


Config

Share Config With Friends
View Config Example
Add Missing Imports w/ Global Config
Default Apps Configuration
Create Export Index
Edit .json Config
Export Config
Import Config
Add ESLint & Prettier Configs