Project Toolkit

Project Toolkit is a VS Code extension which I made for myself. I hope it helps to you. If you need other features, please create issue.

Project Toolkit is a Visual Studio Code extension for project scaffolding, reusable file templates, focused navigation, workspace identification, Razor/CSHTML formatting, embedded-language highlighting, and JavaScript/CSS minification.

It is designed to keep project-specific tooling inside the workspace:

.vscode/Project Toolkit/

Features

• Folder template presets
• Multi-file templates with variables and transforms
• Focus Folder mode
• Workspace-specific colors
• Independent .cshtml formatter
• Razor-aware JavaScript, TypeScript, JSON, CSS, and C# formatting
• HTML/CSHTML highlighting inside JavaScript template literals
• JavaScript and CSS minification
• Project Toolkit Activity Bar panel
• Automatic workspace setup

---

Installation

Install Project Toolkit from the Visual Studio Marketplace:

AdemUnal.project-toolkit

After installation, open a folder or workspace. Project Toolkit automatically creates any missing configuration folders and starter files without overwriting existing files.

---

Project Toolkit Panel

Click the Project Toolkit icon in the VS Code Activity Bar.

The panel provides access to workspace-level features such as:

• Workspace Color
• Setup Extension
• Folder Templates
• File Templates

Each panel section can be collapsed independently. Features that support activation also include an on/off toggle.

---

Automatic Setup

Project Toolkit initializes the following structure when a workspace is opened:

.vscode/
└── Project Toolkit/
    ├── Folder Templates/
    │   └── settings.json
    ├── File Templates/
    │   └── sample-csharp-class/
    │       ├── template.json
    │       └── Class.cs.tpl
    ├── Workspace Colors/
    ├── Formatters/
    └── Minifier/

Existing files are never overwritten by automatic setup.

You can also run:

Project Toolkit: Setup Extension

---

Folder Templates

Folder Templates create reusable folder structures from the Explorer context menu.

Right-click a folder and select:

Project Toolkit → Create Module Folders

Configuration file:

.vscode/Project Toolkit/Folder Templates/settings.json

Example:

{
  "presets": [
    {
      "name": "Module Folders",
      "description": "Default modular project folders.",
      "askModuleName": true,
      "folders": [
        "DTO",
        "Models",
        "Repositories",
        "Features",
        "Features/Commands",
        "Features/Queries",
        "Services",
        "Cache",
        "Enums"
      ]
    },
    {
      "name": "CQRS Folders",
      "description": "Create Commands and Queries folders inside the selected folder.",
      "askModuleName": false,
      "folders": [
        "Commands",
        "Queries"
      ]
    }
  ]
}

Preset fields

Field	Description
name	Display name shown in Project Toolkit
description	Optional preset description
askModuleName	Requests a module name before creating folders
folders	Relative folders created inside the selected directory

Open the configuration directly with:

Project Toolkit: Open Folder Templates

---

File Templates

File Templates generate one or more files from reusable template definitions.

Right-click a folder and select:

Project Toolkit → Create File From Template

Templates are stored under:

.vscode/Project Toolkit/File Templates/

Each template has its own directory:

File Templates/
└── repository/
    ├── template.json
    ├── Repository.cs.tpl
    └── IRepository.cs.tpl

Basic template definition

{
  "name": "Sample C# Class",
  "description": "Create a simple C# class.",
  "inputs": [
    {
      "name": "className",
      "label": "Class name",
      "default": "ProductService"
    }
  ],
  "vars": {
    "class": "{{className|pascal}}"
  },
  "files": [
    {
      "path": "{{class}}.cs",
      "source": "Class.cs.tpl",
      "open": true,
      "overwrite": false
    }
  ]
}

Template file:

namespace {{file.namespace}};

public sealed class {{class}}
{
}

Multi-file template example

{
  "name": "Repository",
  "inputs": [
    {
      "name": "entityName",
      "label": "Entity name",
      "default": "Product"
    }
  ],
  "vars": {
    "entity": "{{entityName|pascal}}"
  },
  "files": [
    {
      "path": "I{{entity}}Repository.cs",
      "source": "IRepository.cs.tpl",
      "open": false,
      "overwrite": false
    },
    {
      "path": "{{entity}}Repository.cs",
      "source": "Repository.cs.tpl",
      "open": true,
      "overwrite": false
    }
  ]
}

Built-in variables

Common file variables include:

{{file.namespace}}
{{file.moduleNamespace}}

Example:

ProjectA.Customers.Addresses.Features.Queries

{{file.namespace}}
→ ProjectA.Customers.Addresses.Features.Queries

{{file.namespace|namespaceUp:2}}
→ ProjectA.Customers.Addresses

Numeric shorthand is also supported:

{{file.namespace|2}}
→ ProjectA.Customers.Addresses

file.moduleNamespace remains available for templates that remove one namespace segment.

Common transforms

pascal
camel
kebab
snake
plural
namespaceUp:N
N

Example:

{{entityName|pascal}}
{{entityName|camel}}
{{file.namespace|namespaceUp:2}}

Open the template directory with:

Project Toolkit: Open File Templates

---

Focus Folder

Focus Folder hides unrelated Explorer folders and keeps attention on the selected project area.

Right-click a folder and select:

Project Toolkit → Focus Folder

While Focus Folder is active:

• Other Explorer folders are hidden
• The focused folder name is shown in the Explorer title area
• The previous Explorer state is preserved
• Exiting Focus Folder restores the previous state

Commands:

Project Toolkit: Focus Folder
Project Toolkit: Exit Focus Folder
Project Toolkit: Reset Focus Folder

---

Workspace Color

Workspace Color applies a workspace-specific color to the VS Code Activity Bar, Title Bar, and Status Bar.

This is useful when several VS Code windows are open at the same time.

Usage

1. Open the Project Toolkit panel.
2. Expand Workspace Color.
3. Enable the feature.
4. Choose a color.
5. Click Apply Color.

Configuration file:

.vscode/Project Toolkit/Workspace Colors/settings.json

Example:

{
  "enabled": true,
  "color": "#7D2626"
}

When enabled, the saved color is automatically reapplied when the workspace opens.

Project Toolkit stores a hidden backup file so existing VS Code workspace colors can be restored when Workspace Color is disabled:

.vscode/Project Toolkit/Workspace Colors/.backup.json

---

Independent CSHTML Formatter

Project Toolkit includes an independent .cshtml formatter implemented without Prettier, CSharpier, Roslyn, Babel, or the TypeScript compiler.

It uses a mixed-document parser that detects and formats embedded languages independently while preserving Razor expressions.

Supported .cshtml content

• HTML
• Razor expressions
• Razor control blocks
• Razor <text> blocks
• Basic C# code blocks
• JavaScript
• TypeScript
• JSON and JSON-LD
• CSS
• HTML inside JavaScript template literals

Formatter configuration

Configuration file:

.vscode/Project Toolkit/Formatters/settings.json

Recommended configuration:

{
  "enabled": true,
  "cshtml": {
    "enabled": true,
    "html": true,
    "razor": true,
    "csharp": true,
    "javascript": true,
    "typescript": true,
    "json": true,
    "css": true,
    "htmlInTemplateLiterals": true
  },
  "style": {
    "tabWidth": 2,
    "useTabs": true,
    "printWidth": 120,
    "maxConsecutiveBlankLines": 1
  },
  "safety": {
    "verifyIdempotence": true
  }
}

Style settings

Setting	Description
tabWidth	Visual indentation width
useTabs	Uses tabs instead of spaces for indentation
printWidth	Preferred maximum line width for tag wrapping
maxConsecutiveBlankLines	Maximum number of consecutive empty lines

Safety setting

"verifyIdempotence": true

The formatter verifies that formatting the output again produces the same result. If formatting is unstable or Razor expressions change, Project Toolkit cancels the edit and keeps the original document.

Format commands

Project Toolkit: Format Current Document
Project Toolkit: Show Formatter Output

The direct Project Toolkit command always invokes the Project Toolkit formatter, even when another Razor formatter is configured.

Format on save

Depending on the installed Razor extension, the language identifier may be aspnetcorerazor or razor.

"[aspnetcorerazor]": {
  "editor.defaultFormatter": "AdemUnal.project-toolkit",
  "editor.formatOnSave": true
},
"[razor]": {
  "editor.defaultFormatter": "AdemUnal.project-toolkit",
  "editor.formatOnSave": true
}

Formatter diagnostics are available from:

Output → Project Toolkit Formatter

---

HTML and CSHTML Template Literals

Project Toolkit provides permanent HTML/CSHTML highlighting inside JavaScript and TypeScript template literals used in .cshtml script blocks.

The grammar is embedded directly into the Project Toolkit JavaScript and TypeScript grammars, avoiding unreliable nested grammar injections.

Explicit HTML marker

const body = /* html */ `
    <div class="modal">
        <span>${customer.name}</span>
    </div>
`;

Compact marker syntax is also supported:

const body = /*html*/`
    <div>Content</div>
`;

CSHTML marker

const body = /* cshtml */ `
    <div>
        @Html.Raw(Model.Content)
    </div>
`;

Tagged template

const body = html`
    <div>${customer.name}</div>
`;

Automatic detection

A template literal beginning with an HTML tag can be detected automatically:

const body = `
    <div>Content</div>
`;

Normal text template literals remain JavaScript strings:

const message = `Hello ${name}`;

---

JavaScript and CSS Minifier

Project Toolkit can minify standalone JavaScript and CSS files from the Explorer context menu.

Supported extensions:

.js
.css

Right-click a file and select:

Project Toolkit → Minify File

Output names:

site.js  → site.min.js
site.css → site.min.css

The original file is not modified.

JavaScript minification

The JavaScript minifier can:

• Remove comments and unnecessary whitespace
• Produce compact one-line output
• Remove unreachable code
• Remove unused local variables and functions
• Fold constants
• Simplify conditions
• Combine expressions
• Rename safe local variables and parameters
• Detect ES modules
• Preserve unsafe public browser-script names by default

CSS minification

The CSS minifier can:

• Remove comments and whitespace
• Produce one-line output
• Shorten colors and numeric values
• Remove duplicate or empty rules
• Merge compatible selectors
• Merge compatible media blocks
• Optimize declarations and shorthands

Minifier configuration

Configuration file:

.vscode/Project Toolkit/Minifier/settings.json

Example:

{
  "javascript": {
    "moduleMode": "auto",
    "passes": 3,
    "mangleLocalNames": true,
    "mangleTopLevelInModules": true,
    "mangleTopLevelInScripts": false,
    "mangleProperties": false,
    "keepFunctionNames": false,
    "keepClassNames": false,
    "dropDebugger": true,
    "dropConsole": false,
    "ecma": 2022
  },
  "css": {
    "level2": true,
    "restructureRules": true,
    "removeAllComments": true
  }
}

Top-level browser-script and property mangling are disabled by default because they may break names referenced by HTML, other JavaScript files, dynamic property access, reflection, or external APIs.

---

Marketplace

Visual Studio Marketplace:

https://marketplace.visualstudio.com/items?itemName=AdemUnal.project-toolkit