Print X

Print X means "print anything". It is a powerful and highly configurable VS Code extension that helps developers quickly insert, manage, and remove debug logs or anything else in any programming language. It provides a visual panel to manage all printed logs and offers powerful custom configurations to support printing any variable in any language.

Print X is built using the reactive-vscode framework, which has saved me a lot of code. Many thanks to the original author kermanx and the fork author antfu.

This extension includes:

Quickly Insert Print Logs - Click or select a variable and use a shortcut or command to quickly insert a print log, with multi-selection support.
Powerful Print Manager - A powerful sidebar panel to manage all logs in the entire workspace.
Batch Operations - Batch comment, uncomment, or delete logs in the current workspace or file.
Multi-Language Support - Pre-configured templates for 25+ programming languages.
Freedom to Customize - Highly configurable print language templates and highlight themes.
Internationalization - The UI supports 9 languages, including English, Simplified Chinese, Traditional Chinese, French, Spanish, German, Japanese, Korean, and Russian.

Usage Demo

Quickly insert logs using a shortcut
Manage print logs using the visual panel

Background
Installation
Usage
Examples
Related Projects
Maintainers
Contributing
License

Background

In my daily development and debugging, I often switch between multiple programming languages and insert many strange debug messages. Although editor hints are smart, typing debug messages is still a hassle, and too many strange debug messages can affect subsequent development. So I started writing this extension to help me manage log printing. It mainly solves the following problems for me:

Eliminate Repetitive Typing: No need to manually write similar logs over and over again. Just press a shortcut, and the variable at the cursor is automatically printed on the next line.
Compatible with All Programming Languages: Any programming language can have its own unique printing syntax, and you can even customize your own printing methods.
Quick Management with a Panel: All print logs are here, and you can quickly comment or delete them before publishing.

Some important principles:

It will always print the variable you select on the next line. Please always ensure that either globalPrefix or langPrefix exists, as it is a key matching marker.

Installation

This extension requires Visual Studio Code version 1.89.0 or higher.

Install from the VS Code Marketplace

Open VS Code
Go to the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
Search for "Print X"
Click "Install"

Install from a VSIX package

# Install from a downloaded VSIX file
code --install-extension print-x-0.0.1.vsix

Manual Installation

# Clone and build from source
git clone https://github.com/print-x/print-x
cd print-x
pnpm install
pnpm run package

After installation, the extension will be automatically activated when you open VS Code.

Usage

Basic Usage

The most common way to use Print X is through the insert log command:

Select a variable (or place the cursor on the variable)
Press Shift+Alt+X or use the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) to search for "Print X: Insert Log"
The log will be inserted on the line below the cursor, containing the variable name and value.

The extension automatically detects:

The programming language of your file
The variable under the cursor (if nothing is selected)
The appropriate log syntax for that language
Contextual information like the filename and line number

Print Manager

Print X provides a powerful sidebar panel to manage all logs in the entire workspace:

Tree View: Organizes logs by directory structure
List View: Shows a flat list of all files containing logs
Real-time Updates: Automatically refreshes as you add, edit, or delete logs
Click to Navigate: Click any log to jump to its location in the code

Access the Print Manager by clicking the console icon in the Activity Bar.

Commands and Shortcuts

Command	Title	Shortcut
`printX.insertPrint`	Insert Log	`Shift+Alt+X`
`printX.commentCurrentFile`	Comment All Logs in Current File	`Shift+Alt+C`
`printX.uncommentCurrentFile`	Uncomment All Logs in Current File	`Shift+Alt+U`
`printX.deleteCurrentFile`	Delete All Logs in Current File	`Shift+Alt+D`
`printX.refresh`	Refresh Print Manager	Click Button
`printX.commentAll`	Comment All Logs in Workspace	Click Button
`printX.uncommentAll`	Uncomment All Logs in Workspace	Click Button
`printX.deleteAll`	Delete All Logs in Workspace	Click Button
`printX.expandAll`	Expand All in Print Manager	Click Button
`printX.collapseAll`	Collapse All in Print Manager	Click Button
`printX.switchToTreeView`	Switch to Tree View	Click Button
`printX.switchToListView`	Switch to List View	Click Button

Configuration

Customize Print X by adding the following properties to your settings.json file:

{
  "printX": {
    "highlightTheme": {
      "red": { // For configuration reference, see https://code.visualstudio.com/api/references/vscode-api#DecorationRenderOptions
        "color": "rgba(255, 100, 100, 1)"
      }
    },
    "globalPrefix": {
      "text": "🚀",
      "highlight": "" // Value from highlightTheme, e.g., "red"
    },
    "languageConfigs": {
      "javascript": {
        "filetype": [".js", ".ts", ".mjs", ".jsx", ".tsx"],
        "langPrefix": "⚡",
        "langComment": "//",
        "before": "", // e.g., "// ****** before tag ${lineNumber} ******"
        "template": "console.log(`${globalPrefix}${langPrefix} [${fileName}:${lineNumber}] ➤ ${variable}:`, ${variable});",
        "after": "", // e.g., "// ****** after tag ${lineNumber} ******"
        "highlight": {
          "langPrefix": "", // Value from highlightTheme, e.g., "red"
          "before": "", // Value from highlightTheme, e.g., "red"
          "template": "", // Value from highlightTheme, e.g., "red"
          "after": "" // Value from highlightTheme, e.g., "red"
        }
      },
      "python": {
        "filetype": [".py"],
        "langPrefix": "🐍",
        "langComment": "#",
        "template": "print(f\"${globalPrefix}${langPrefix} [${fileName}:${lineNumber}] ➤ ${variable}: {${variable}}\")"
      }
    },
    "ignore": {
      "directories": ["node_modules", ".git", ".vscode", "dist"],
      "files": ["package-lock.json", "pnpm-lock.yaml"],
      "fileExtensions": [".log", ".map"],
      "ignoreHiddenFiles": true
    },
    "language": "en",
    "defaultTreeViewMode": "tree"
  }
}

The extension comes with pre-configured templates for 25+ programming languages, including JavaScript, TypeScript, Python, Rust, Go, Java, C++, and more.

Template Variables

You can use these variables in your template, before, and after strings:

${variable}: The selected variable name
${globalPrefix}: The configured global prefix text
${langPrefix}: The language-specific prefix text
${filePath}: The relative path of the current file
${absPath}: The absolute path of the current file
${fileName}: The filename of the current file
${lineNumber}: The line number where the log is inserted

Examples

JavaScript Example

const userName = "Alice";
// Select 'userName' and press Shift+Alt+X

console.log(`🚀⚡ [example.js:1] ➤ userName:`, userName);

Python Example

user_data = {"name": "Bob", "age": 30}
// Select 'user_data' and press Shift+Alt+X

print(f"🚀🐍 [example.py:1] ➤ user_data: {user_data}")

Rust Example

let numbers = vec![1, 2, 3, 4, 5];
// Select 'numbers' and press Shift+Alt+X

println!("🚀🦀 [example.rs:2] ➤ {}: {:?}", "numbers", numbers);

Maintainers

@print-x - Extension maintainer and primary developer.

Contributing

We welcome contributions! Please feel free to get involved:

Submit an issue to report a bug or request a feature
Submit a pull request with improvements
Help improve the documentation and examples
Share feedback and suggestions

Development Setup

# Clone the repository
git clone https://github.com/print-x/print-x
cd print-x

# Install dependencies
pnpm install

# Start development
pnpm run dev

# Production build
pnpm run build

# Run type checking
pnpm run typecheck

Guidelines

Follow TypeScript best practices
Use the reactive-vscode framework patterns
Maintain compatibility with VS Code 1.89.0+
Include tests for new features
Update documentation as needed

Print X follows the Contributor Covenant code of conduct.

Support the Project

If Print X has been helpful to you, please consider supporting its continued development:

☕ Buy Me a Coffee

Your support will help us:

Continuously improve and maintain the extension
Add new features and language support
Provide a better user experience
Fix bugs and optimize performance

Donation Methods:

dodopayments: dodopayments

Other Ways to Support

Even if you can't make a monetary donation, you can support the project in other ways:

⭐ Star the project on GitHub
📝 Leave a positive review on the VS Code Marketplace
🐛 Report bugs and suggest improvements
📢 Recommend this extension to friends and colleagues
🤝 Contribute code or documentation

Every bit of support is greatly appreciated. Thank you for your recognition!

License

GPL © print-x

Built with ❤️ using reactive-vscode

Print X

print-x

Print X

Usage Demo

Table of Contents

Background

Installation

Install from the VS Code Marketplace

Install from a VSIX package

Manual Installation

Usage

Basic Usage

Print Manager

Commands and Shortcuts

Configuration

Template Variables

Examples

JavaScript Example

Python Example

Rust Example

Maintainers

Contributing

Development Setup

Guidelines

Support the Project

☕ Buy Me a Coffee

Other Ways to Support

License