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
.cshtmlformatter - 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
- Open the Project Toolkit panel.
- Expand Workspace Color.
- Enable the feature.
- Choose a color.
- 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