Skip to content

Differentiate JS/TS all caps constants #562

@uncenter

Description

@uncenter

We should make the theme differentiate between const variables and const variables that are all caps / in shouting snake case (const fooBar vs const FOO_BAR). The shouting snake case convention is often used to mark "actual" constant values. Our Helix and Neovim ports highlight the aforementioned example "correctly" since those editors' grammars (https://github.com/nvim-treesitter/nvim-treesitter/blob/42fc28ba918343ebfd5565147a42a26580579482/queries/ecma/highlights.scm#L27-L28, https://github.com/helix-editor/helix/blob/b6ccbddc77bc2e2c2d02cfd5444594e3cc46c938/runtime/queries/ecma/highlights.scm#L249-L254) do distinguish constants in that way. However, currently VS Code's grammar for JavaScript doesn't differentiate that way - tracking upstream microsoft/TypeScript-TmLanguage#645.

Neovim Helix VS Code (current) VS Code (attempted fix)
Image Image Image Image

I attempted a fix by removing our overrides that made constants text instead of peach in specific languages, but since VS Code doesn't yet differentiate it isn't a good change.

diff --git c/packages/catppuccin-vsc/src/theme/semanticTokens.ts i/packages/catppuccin-vsc/src/theme/semanticTokens.ts
index 267c245..6b28820 100644
--- c/packages/catppuccin-vsc/src/theme/semanticTokens.ts
+++ i/packages/catppuccin-vsc/src/theme/semanticTokens.ts
@@ -16,17 +16,6 @@ export const getSemanticTokens = (context: ThemeContext): SemanticTokens => {
     "variable.typeHint:python": { foreground: palette.yellow },
     "function.decorator:python": { foreground: palette.peach },
 
-    // ignore `const`s being peach in JS & TS
-    "variable.readonly:javascript": { foreground: palette.text },
-    "variable.readonly:typescript": { foreground: palette.text },
-    "property.readonly:javascript": { foreground: palette.text },
-    "property.readonly:typescript": { foreground: palette.text },
-    // ditto for React
-    "variable.readonly:javascriptreact": { foreground: palette.text },
-    "variable.readonly:typescriptreact": { foreground: palette.text },
-    "property.readonly:javascriptreact": { foreground: palette.text },
-    "property.readonly:typescriptreact": { foreground: palette.text },
-
     // Scala, also dealing with constants
     "variable.readonly:scala": { foreground: palette.text },
 
diff --git c/packages/catppuccin-vsc/src/theme/tokens/javascript.ts i/packages/catppuccin-vsc/src/theme/tokens/javascript.ts
index 8e8d67f..6850e96 100644
--- c/packages/catppuccin-vsc/src/theme/tokens/javascript.ts
+++ i/packages/catppuccin-vsc/src/theme/tokens/javascript.ts
@@ -12,13 +12,8 @@ const tokens = (context: ThemeContext): TextmateColors => {
       },
     },
     {
-      name: "JS/TS constants & properties",
-      scope: [
-        "variable.other.constant.js",
-        "variable.other.constant.ts",
-        "variable.other.property.js",
-        "variable.other.property.ts",
-      ],
+      name: "JS/TS properties",
+      scope: ["variable.other.property.js", "variable.other.property.ts"],
       settings: {
         foreground: palette.text,
       },

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions