VS Code Header

Modern, premium, and fully customizable file headers for Visual Studio Code.

Installation • Features • Examples • Configuration • Usage • Troubleshooting • Contributing

---

📦 Installation

Via VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "dnettoRaw Header"
4. Click Install

Via Command Line

code --install-extension dnettoRaw.dr-header

Manual Installation

1. Download the .vsix file from GitHub Releases
2. In VS Code: Extensions → ... → Install from VSIX
3. Select the downloaded file

---

✨ Features

• 🎨 Modern Design: Premium "open-ended" header style for modern languages (//)
• 🔄 Dynamic ASCII Art: Built-in logos (Linux, VS Code, Default) and custom ASCII art support
• 🧠 Smart Fields: Automatic detection of filename, project name, version, Git user, and timestamps
• ⚡ Surgical Updates: Updates only necessary lines on save, preserving your ASCII art
• 📁 File-based Configuration: Override settings with local files (author, projectname, version, logo)
• 🤖 Auto-Injection: Automatically inserts headers into new files (configurable)
• 🎯 Fully Customizable: Define your own templates, logos, and layouts
• 🌍 Multi-Language Support: 40+ supported languages with proper comment syntax
• 🔧 Flexible Delimiters: Custom delimiters for unsupported languages

---

🎨 Header Examples

Standard Header (Full Version)

////////////////////////////////////////////////////////////////////////////////
//            #####              filename: main.rs
//         ############          Project : my-awesome-app
//       ###          ###
//      ##    ##  ##    ##       Created: 2026/04/23 02:00:00 by dnettoRaw
//            ##  ##             Updated: 2026/04/23 02:30:00 by dnettoRaw
//                               Since  : 1.0.0
//
//      ##    ##  ##    ##       obs: Premium header management
//       ###  ######  ###
//        #####    ####
//
//                             License: MIT                 https://dnetto.dev
////////////////////////////////////////////////////////////////////////////////

Little Header (Compact Version)

////////////////////////////////////////////////////////////////////////////////
//        #######
//     ###       ###     F: index.ts
//    ##   ## ##   ##    P: my-project
//         ## ##
//                       C: 2026/04/23 02:00:00 by dnettoRaw
//    ##   ## ##   ##    U: 2026/04/23 02:30:00 by dnettoRaw
//      ###########      S: 1.0.0
////////////////////////////////////////////////////////////////////////////////

Logo-Only Header

#       #####
#    ############
#   ###          ###
#  ##    ##  ##    ##
#        ##  ##
#
#  ##    ##  ##    ##
#   ###  ######  ###
#    #####    ####

Different Languages

Python

# /////////////////////////////////////////////////////////////////////////////
#            #####              filename: app.py
#         ############          Project : django-app
#       ###          ###
#      ##    ##  ##    ##       Created: 2026/04/23 02:00:00 by dnettoRaw
#            ##  ##             Updated: 2026/04/23 02:30:00 by dnettoRaw
#                               Since  : 1.0.0
#
#      ##    ##  ##    ##       obs: Django REST API
#       ###  ######  ###
#        #####    ####
#
#                             License: MIT                 https://dnetto.dev
# /////////////////////////////////////////////////////////////////////////////

Java

////////////////////////////////////////////////////////////////////////////////
//            #####              filename: Main.java
//         ############          Project : spring-boot-app
//       ###          ###
//      ##    ##  ##    ##       Created: 2026/04/23 02:00:00 by dnettoRaw
//            ##  ##             Updated: 2026/04/23 02:30:00 by dnettoRaw
//                               Since  : 1.0.0
//
//      ##    ##  ##    ##       obs: Spring Boot Application
//       ###  ######  ###
//        #####    ####
//
//                             License: MIT                 https://dnetto.dev
////////////////////////////////////////////////////////////////////////////////

HTML

<!-- ///////////////////////////////////////////////////////////////////////////// -->
<!--            #####              filename: index.html                           -->
<!--         ############          Project : react-app                            -->
<!--       ###          ###                                                       -->
<!--      ##    ##  ##    ##       Created: 2026/04/23 02:00:00 by dnettoRaw     -->
<!--            ##  ##             Updated: 2026/04/23 02:30:00 by dnettoRaw     -->
<!--                               Since  : 1.0.0                                 -->
<!--                                                                             -->
<!--      ##    ##  ##    ##       obs: React Single Page Application            -->
<!--       ###  ######  ###                                                       -->
<!--        #####    ####                                                         -->
<!--                                                                             -->
<!--                             License: MIT                 https://dnetto.dev -->
<!-- ///////////////////////////////////////////////////////////////////////////// -->

---

⚙️ Configuration

Global Settings (VS Code Settings)

Basic Configuration

{
  "header.username": "Your Name",
  "header.email": "your.email@example.com",
  "header.url": "https://your-website.com",
  "header.license": "MIT"
}

Logo Configuration

{
  "header.logoType": "default",
  "header.logo": "   CUSTOM ASCII ART\n  YOUR BRAND HERE\n     LOGO TEXT"
}

Advanced Configuration

{
  "header.autoInsert": true,
  "header.customDelimiters": {
    "customlang": ["/* ", " */"]
  },
  "header.template": "/* $FILENAME - $PROJECT\n * Created: $CREATEDAT by $CREATED\n */",
  "header.littleTemplate": "// $FILENAME - $CREATEDAT"
}

File-based Configuration (Workspace Root)

Create these files in your project root for automatic detection:

author (plain text)

John Doe

projectname (plain text)

My Awesome Project

version (plain text)

2.1.0

license (plain text)

MIT

logo (ASCII art, max 30 cols × 11 lines)

   _____
  /     \
 |  LOGO |
  \_____/
     |
    / \

Custom Templates

Minimal Template

{
  "header.template": "/* $FILENAME - $CREATEDAT by $CREATED */"
}

Corporate Template

{
  "header.template": "/*\n * Copyright (c) 2024 Company Name\n * $FILENAME\n * Created: $CREATEDAT by $CREATED\n * Updated: $UPDATEDAT by $UPDATED\n */"
}

Academic Template

{
  "header.template": "/*\n * $PROJECT v$VERSION\n * $FILENAME\n * Author: $AUTHOR\n * Created: $CREATEDAT\n * License: $LICENSE\n */"
}

Available Template Variables

Variable	Description	Example
$FILENAME	Current file name	main.ts
$PROJECT	Project name	my-app
$VERSION	Current version	1.2.3
$SINCE	Creation version	1.0.0
$AUTHOR	Full author (Name )	John Doe <john@example.com>
$CREATED	Creator name	John Doe
$UPDATED	Last updater name	Jane Smith
$CREATEDAT	Creation date	2026/04/23 14:30:00
$UPDATEDAT	Last update date	2026/04/23 15:45:00
$LICENSE	License type	MIT
$URL	Project URL	https://github.com/user/repo
$OBS1-3	Observation fields	Custom notes
$LOGO0-10	Full logo lines	ASCII art lines
$LLOGO0-6	Little logo lines	Compact ASCII art

---

🚀 Usage

Keyboard Shortcuts

• Insert Full Header: Ctrl+Alt+H (Windows/Linux) or Cmd+Option+H (macOS)
• Insert Little Header: Ctrl+Alt+J (Windows/Linux) or Cmd+Option+J (macOS)
• Insert Logo Only: Ctrl+Alt+L (Windows/Linux) or Cmd+Option+L (macOS)

Command Palette

1. Press Ctrl+Shift+P (or Cmd+Shift+P on macOS)
2. Type "header" to see available commands:
   • Header: Insert header
   • Header: Insert little header
   • Header: Insert only logo header
   • Header: Update all headers

Auto-Update on Save

The extension automatically updates headers when you save files:

• Updates the Updated: timestamp
• Updates the filename (if changed)
• Preserves creation info and ASCII art

Batch Update

To update all headers in your workspace:

1. Open Command Palette (Ctrl+Shift+P)
2. Run Header: Update all headers

---

🌍 Supported Languages

The extension supports 40+ languages with proper comment syntax:

Programming Languages

• Web: JavaScript, TypeScript, CoffeeScript, HTML, CSS, SCSS, Vue, Svelte
• Backend: Python, Java, C, C++, C#, Go, Rust, PHP, Ruby, Swift
• Functional: Haskell, Clojure, Elixir, Erlang, F#, OCaml
• Systems: Objective-C, Lua, Perl, R, Shell scripts
• Data: SQL, YAML, Terraform, Dockerfile

Markup & Config

• Markup: HTML, XML, Markdown, Jade, LaTeX
• Config: INI, JSON, TOML, Makefile

Custom Languages

For unsupported languages, define custom delimiters:

{
  "header.customDelimiters": {
    "mylang": ["# ", " #"],
    "blocklang": ["/* ", " */"]
  }
}

---

🔧 Advanced Configuration

Git Integration

The extension automatically detects:

• Author name from git config user.name
• Email from git config user.email
• Falls back to system username if Git not configured

Package.json Integration

Automatically reads:

• name → Project name
• version → Current version
• author → Author information

Environment Variables

export USER="Your Name"
export URL="https://your-site.com"

Priority Order

Configuration values are resolved in this order:

1. File-based (workspace root files)
2. VS Code settings
3. Git configuration
4. Environment variables
5. System defaults

---

🐛 Troubleshooting

Headers Not Inserting

Problem: Headers aren't being inserted in new files.

Solutions:

1. Check if the language is supported: Extensions → dnettoRaw Header → Supported Languages
2. Enable auto-insert: "header.autoInsert": true
3. Verify file isn't excluded in VS Code settings

Wrong Author/Email

Problem: Wrong author name or email in headers.

Solutions:

1. Set in VS Code settings: "header.username" and "header.email"
2. Create author file in workspace root
3. Configure Git: git config user.name "Your Name"

Logo Not Displaying

Problem: Custom logo isn't showing.

Solutions:

1. Check logo file exists in workspace root
2. Ensure logo is max 30 columns × 11 lines
3. Verify header.logoType is set correctly

Template Variables Not Working

Problem: Template variables show as literal text.

Solutions:

1. Check variable names (case-sensitive)
2. Ensure required files exist (e.g., version for $VERSION)
3. Restart VS Code after configuration changes

Performance Issues

Problem: Extension slows down VS Code.

Solutions:

1. Disable auto-update: "header.autoInsert": false
2. Use simpler templates
3. Exclude large files/folders in VS Code settings

---

❓ FAQ

Q: Can I use this with existing projects? A: Yes! The extension works with any project. Existing headers will be updated surgically.

Q: Does it support my favorite language? A: Check the supported languages list. For unsupported languages, use custom delimiters.

Q: Can I disable the ASCII art? A: Yes, set "header.logoType": "none" to remove ASCII art entirely.

Q: How do I change the date format? A: The date format is fixed as YYYY/MM/DD HH:mm:ss for consistency.

Q: Can I use this in CI/CD pipelines? A: Yes, but headers are inserted interactively. For automated header insertion, consider other tools.

Q: Does it work with remote workspaces? A: Yes, all features work with remote development (WSL, SSH, Codespaces).

Q: Can I use it with large codebases? A: Yes, the extension is optimized for performance. Auto-updates only trigger on save and are very fast.

Q: What happens to existing headers? A: Existing headers are updated surgically - only timestamps and filenames change, preserving your custom content.

---

⚡ Performance & Compatibility

System Requirements

• VS Code: 1.40.0 or later
• Node.js: 12.0.0 or later (for development)
• Memory: Minimal impact (< 10MB additional RAM)

Performance Tips

• Use simpler templates for better performance
• Disable auto-insert for large projects if needed
• The extension only activates on supported file types

Compatibility

• ✅ Windows, macOS, Linux
• ✅ VS Code, VS Code Insiders
• ✅ Remote development (WSL, SSH, Codespaces)
• ✅ All supported languages work identically across platforms

---

🤝 Contributing

We welcome contributions! Here's how to get started:

Development Setup

git clone https://github.com/dnettoRaw/vscode-header.git
cd vscode-header
npm install
npm run compile

Running Tests

npm test          # Run all tests
npm run lint      # Check code quality
npm run compile   # Build the extension

Testing Locally

1. Open in VS Code: Extensions → ... → Install from VSIX
2. Select vscode-header-*.vsix from the project root

Code Structure

src/
├── extension.ts    # Main extension logic
├── header.ts       # Header generation and parsing
├── delimiters.ts   # Language delimiter definitions
└── test/           # Test suite

Guidelines

• Follow TypeScript best practices
• Add tests for new features
• Update documentation
• Use conventional commits

---

📈 Changelog

v0.3.4 (Current)

• Enhanced test coverage (26 test cases)
• Improved linting and code quality
• Fixed header parsing edge cases
• Better error handling

v0.3.3

• Added custom delimiter support
• Improved logo rendering
• Enhanced file-based configuration

v0.3.2

• Added little header support
• Improved auto-update functionality
• Better language detection

v0.3.1

• Initial public release
• Basic header insertion
• Git integration
• ASCII art support

---

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

Made with ❤️ by dnettoRaw
GitHub • VS Code Marketplace • Website