|
Language | Expected syntax highlight extension |
---|---|
Svelte | Svelte for VS Code |
JavaScript / TypeScript | - |
React / JSX / TSX | - |
C# / .NET / ASP.NET Core | C# Dev Kit |
C# Razor Pages / Blazor | C# Dev Kit |
HTML / XML | - |
CSS | - |
JSON | - |
Markdown | - |
Lazily supported languages
Maintainers for these and additional languages are very welcome!
Language | Expected syntax highlight extension |
---|---|
Vue | Vue - Official |
Angular | Angular Language Service |
Java | Language Support for Java(TM) by Red Hat |
Python | Python |
Go | Go |
Rust | rust-analyzer |
SQL | - |
PowerShell | PowerShell |
Shell | - |
Batch / CMD | - |
AutoHotKey | AutoHotKey Plus Plus |
SASS / LESS | - |
styled-components | vscode-styled-components |
YAML | - |
TOML | Even Better TOML |
Dockerfile | - |
.env | DotEnv |
Code screenshots
Svelte

JavaScript

TypeScript

React / JSX / TSX

C#

HTML

CSS

JSON

Markdown

VS Code settings.json UI customization
Here are the settings.json
UI settings I'm using, hopefully there may be something useful for you too.
{
// General:
"workbench.sideBar.location": "right",
//
//
//
// File Explorer:
"explorer.compactFolders": false,
"workbench.iconTheme": "vscode-icons",
"workbench.tree.indent": 20,
"workbench.tree.expandMode": "singleClick",
"workbench.tree.enableStickyScroll": false,
"explorer.autoReveal": "focusNoScroll",
"vsicons.presets.hideExplorerArrows": true,
"vsicons.presets.foldersAllDefaultIcon": true,
//
//
//
// Editor UI:
"editor.cursorSmoothCaretAnimation": "on",
"editor.cursorWidth": 3,
"editor.cursorBlinking": "blink",
"editor.renderWhitespace": "boundary",
"editor.snippetSuggestions": "inline",
"editor.minimap.enabled": false,
"editor.renderControlCharacters": false,
"editor.guides.indentation": true,
"editor.guides.highlightActiveIndentation": "always",
"editor.bracketPairColorization.enabled": false,
"editor.codeLens": false,
"editor.rulers": [
120
],
"editor.suggestSelection": "first",
"files.trimTrailingWhitespace": true,
"editor.stickyScroll.enabled": false,
"editor.inlayHints.enabled": "offUnlessPressed",
//
// Font:
"editor.fontFamily": "Fantasque Sans Mono",
"editor.fontSize": 16,
"editor.fontLigatures": true,
//
//
//
"files.associations": {
".stylelintrc": "json",
".stylelintignore": "ignore",
".eslintignore": "ignore",
".browserslistrc": "properties",
".prettierrc": "json",
".env": "dotenv",
".env.development": "dotenv",
".env.development.local": "dotenv",
"*.yml": "yaml",
".prettierignore": "ignore"
},
//
//
//
// Indentation guides settings, Guides extension:
"guides.active.extraIndent": true,
"guides.active.expandBrackets": false,
"guides.active.enabled": true,
"guides.enabled": true,
"guides.indent.showFirstIndentGuides": true,
"guides.limit.maximum": -1,
"guides.normal.enabled": true,
"guides.overrideDefault": false,
"guides.stack.enabled": false,
"guides.active.hideOnSelection": false,
"guides.active.style": "solid",
"guides.normal.hideOnSelection": false,
"guides.active.color.light": "#00B000A0",
"guides.active.width": 1,
//
//
//
// Show the color for a color code, Color-Highlight extension:
"color-highlight.enable": true,
"color-highlight.markerType": "dot-before",
"color-highlight.markRuler": false,
"editor.colorDecorators": false,
//
//
//
// Terminal window:
"terminal.integrated.fontSize": 15,
"terminal.integrated.fontFamily": "CaskaydiaCove NF",
"terminal.integrated.cursorStyle": "line",
"terminal.integrated.cursorWidth": 3,
"terminal.integrated.cursorBlinking": true,
"terminal.integrated.cursorStyleInactive": "outline",
"terminal.integrated.defaultProfile.windows": "PowerShell",
//
//
//
// Theme customizations:
"workbench.colorCustomizations": {
// hide the inactive indent lines:
"editorIndentGuide.background1": "#FFFFFF",
"editorIndentGuide.background2": "#FFFFFF",
"editorIndentGuide.background3": "#FFFFFF",
"editorIndentGuide.background4": "#FFFFFF",
"editorIndentGuide.background5": "#FFFFFF",
"editorIndentGuide.background6": "#FFFFFF",
//
// don't grey out the unused variables:
"editorUnnecessaryCode.opacity": "#000000",
//
// Terminal customizations:
"[RespectMyEyes Light]": {
"terminal.ansiBlack": "#000000",
"terminal.ansiBrightBlack": "#000000",
"terminal.ansiBlue": "#FFFF40",
"terminal.ansiBrightBlue": "#729FCF",
"terminal.ansiCyan": "#06989A",
"terminal.ansiBrightCyan": "#34E2E2",
"terminal.ansiGreen": "#00B000",
"terminal.ansiBrightGreen": "#00D000",
"terminal.ansiMagenta": "#AD7FA8",
"terminal.ansiBrightMagenta": "#F066FF",
"terminal.ansiRed": "#CC0000",
"terminal.ansiBrightRed": "#EF2929",
"terminal.ansiWhite": "#000000",
"terminal.ansiBrightWhite": "#000000",
"terminal.ansiYellow": "#0000CC",
"terminal.ansiBrightYellow": "#0BC5E3",
"terminalCursor.foreground": "#00CC7E",
},
},
}
Azure Data Studio compatibility customization
This is outdated and I'm going to improve it eventually.
You can install this theme or any other theme by downloading it's .vsix
file and going to Extensions
> Install from VSIX...
in Azure Data Studio. Download the latest VSIX file from the Releases page.
Below are the fixes for the Azure Data Studio incompatibilites, put them into your settings.json
in Azure Data Studio.
// settings.json
{
"workbench.colorCustomizations": {
"[RespectMyEyes Light]": {
// Fix the invisible input borders:
"input.border": "#D3D3D3",
//
// Fix the invisible button borders:
"button.border": "#A9A9A9"
}
}
}
Development
Validation repos are listed here.
License
- MIT License
- Copyright © 2020 - 2024 Dima Iholkin.