ENV HighlighterSyntax highlighting for Features
Supported tokens
|
| Token | Example | Scope |
|---|---|---|
| Key | POSTGRES_USER |
keyword.other.env.key.dotenv |
= separator |
= |
punctuation.separator.key-value.dotenv |
| String value | postgres |
string.unquoted.value.dotenv |
| Quoted string | "hello world" |
string.quoted.double.dotenv |
| Number | 3600 |
constant.numeric.dotenv |
| Boolean | true / false |
constant.language.boolean.dotenv |
| Comment | # comment |
comment.line.number-sign.dotenv |
| Export keyword | export |
keyword.other.export.dotenv |
| Interpolation | ${VAR} |
variable.other.interpolated.dotenv |
.toml
| Token | Example | Scope |
|---|---|---|
| Key | database.host |
keyword.other.toml.key.toml |
= separator |
= |
punctuation.separator.key-value.toml |
| Section | [package] |
entity.name.section.toml |
| Array section | [[bin]] |
entity.name.section.toml |
| String value | "hello" |
string.quoted.double.toml |
| Literal string | 'hello' |
string.quoted.single.toml |
| Number | 3600 |
constant.numeric.toml |
| Boolean | true / false |
constant.language.boolean.toml |
| Date | 2024-01-15 |
constant.other.date.toml |
| Comment | # comment |
comment.line.number-sign.toml |
File matching
Automatically applies to:
.env
.env.env.local,.env.production,.env.development, etc.any_name.env
.toml
Cargo.toml,pyproject.toml,config.toml, and other.tomlfiles
Installation
From the Marketplace (recommended)
- Open VS Code.
- Go to Extensions (
Ctrl+Shift+X/Cmd+Shift+X). - Search for ENV Highlighter.
- Click Install.
Or install from the command line:
code --install-extension env-highlighter.env-highlighter
Manual install
- Download or clone this repo.
- Copy the folder to your VS Code extensions directory:
- Windows:
%USERPROFILE%\.vscode\extensions\ - macOS/Linux:
~/.vscode/extensions/
- Windows:
- Restart VS Code.
Install from VSIX
code --install-extension env-highlighter-1.1.0.vsix
Customization
You can override colors in your settings.json:
{
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "keyword.other.env.key.dotenv",
"settings": { "foreground": "#C586C0" }
},
{
"scope": "string.unquoted.value.dotenv",
"settings": { "foreground": "#CE9178" }
},
{
"scope": "keyword.other.toml.key.toml",
"settings": { "foreground": "#C586C0" }
},
{
"scope": "string.unquoted.value.toml",
"settings": { "foreground": "#CE9178" }
}
]
}
}
Development
# Package the extension
npx @vscode/vsce package
# Publish (requires marketplace publisher + PAT)
npx @vscode/vsce publish
Open this folder in VS Code and press F5 to launch an Extension Development Host for local testing.
License
MIT