Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>TYPO3 - TypoScript HighlightingNew to Visual Studio Code? Get it now.
TYPO3 - TypoScript Highlighting

TYPO3 - TypoScript Highlighting

stefan-sofka

|
251 installs
| (0) | Free
Syntax highlighting for TypoScript files of TYPO3 in VS Code.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

TypoScript Highlighting

Welcome to the TypoScript Highlighting extension for Visual Studio Code! This extension provides syntax highlighting specifically designed for TypoScript files, a configuration language used in TYPO3 CMS. Enhance your coding experience with better readability and clear structure.

Table of Contents

  • Features
  • Installation
    • Manual Installation
  • How to Use
  • TYPO3 Version Detection (Comments)
  • Screenshots
  • Contributing
  • Feedback and Support
  • License

Features

  • Syntax highlighting for .typoscript and .tsconfig
  • Clear separation of variables, paths, operators, and comments
  • Support for additional constructs like @import and nested configurations
  • Lightweight and fast with no unnecessary overhead

Installation

  1. Open Visual Studio Code.
  2. Navigate to the Extensions Marketplace (Ctrl+Shift+X).
  3. Search for "TypoScript Highlighting".
  4. Click Install.

Manual Installation

1. Build VS Code package .vsix file

npx @vscode/vsce package

2. Install created .vsix file

vscodium --install-extension typoscript-highlighting-*.vsix

How to Use

  1. Open any file with the .typoscript or .tsconfig extension.
  2. Syntax highlighting will be automatically applied.
  3. Enjoy a cleaner and more structured view of your TypoScript code.

TYPO3 Version Detection (Comments)

The extension can switch TypoScript comment rules based on the detected TYPO3 version.

  • auto (default): Detects the version from composer.lock (preferred) or composer.json.
  • v11: Forces TYPO3 v11.x comment rules.
  • v12: Forces TYPO3 v12+ comment rules (covers 12, 13, 14).

Setting key: typoscriptHighlighting.commentRules

Example:

{
  "typoscriptHighlighting.commentRules": "auto"
}

Detection details:

  • composer.lock is used when present because it reflects the resolved TYPO3 version.
  • composer.json is used as a fallback when no lockfile exists.

Screenshots

Example of Syntax Highlighting:

Preview of TypoScript Syntax Highlighting

Contributing

We welcome contributions to improve this extension! To contribute:

  1. Fork the repository on GitHub.
  2. Clone the forked repository.
  3. Make your changes and create a pull request.

Feedback and Support

If you encounter any issues or have suggestions for improvements, please create an issue on GitHub.


License

This project is licensed under the MIT License.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft