From 8572c19a0255bc86314c1e3ac4e9039826cc94f2 Mon Sep 17 00:00:00 2001 From: Gaauwe Rombouts Date: Thu, 11 Dec 2025 12:02:28 +0100 Subject: [PATCH] Improve TS/TSX/JS syntax highlighting for parameters, types, and punctuation (#44532) Relands https://github.com/zed-industries/zed/pull/43437 Release Notes: - Refined syntax highlighting in JavaScript and TypeScript for better visual distinction of types, parameters, and JSDoc elements --------- Co-authored-by: MrSubidubi Co-authored-by: Clay Tercek <30105080+claytercek@users.noreply.github.com> --- .../languages/src/javascript/highlights.scm | 107 +++++++++++- crates/languages/src/jsdoc/highlights.scm | 1 + crates/languages/src/tsx/highlights-jsx.scm | 0 crates/languages/src/tsx/highlights.scm | 161 +++++++++++++++++- .../languages/src/typescript/highlights.scm | 134 ++++++++++++++- 5 files changed, 397 insertions(+), 6 deletions(-) delete mode 100644 crates/languages/src/tsx/highlights-jsx.scm diff --git a/crates/languages/src/javascript/highlights.scm b/crates/languages/src/javascript/highlights.scm index e5b84ab68df2b32061691f469046569a6597750e..d13db50e2ef85e25bdc5643672eb128265c58d91 100644 --- a/crates/languages/src/javascript/highlights.scm +++ b/crates/languages/src/javascript/highlights.scm @@ -2,6 +2,40 @@ (identifier) @variable +(call_expression + function: (member_expression + object: (identifier) @type.builtin + (#any-of? + @type.builtin + "Promise" + "Array" + "Object" + "Map" + "Set" + "WeakMap" + "WeakSet" + "Date" + "Error" + "TypeError" + "RangeError" + "SyntaxError" + "ReferenceError" + "EvalError" + "URIError" + "RegExp" + "Function" + "Number" + "String" + "Boolean" + "Symbol" + "BigInt" + "Proxy" + "ArrayBuffer" + "DataView" + ) + ) +) + ; Properties (property_identifier) @property @@ -18,6 +52,12 @@ function: (member_expression property: [(property_identifier) (private_property_identifier)] @function.method)) +(new_expression + constructor: (identifier) @type) + +(nested_type_identifier + module: (identifier) @type) + ; Function and method definitions (function_expression @@ -47,10 +87,45 @@ left: (identifier) @function right: [(function_expression) (arrow_function)]) +; Parameters + +(required_parameter + (identifier) @variable.parameter) + +(required_parameter + (_ + ([ + (identifier) + (shorthand_property_identifier_pattern) + ]) @variable.parameter)) + +(optional_parameter + (identifier) @variable.parameter) + +(optional_parameter + (_ + ([ + (identifier) + (shorthand_property_identifier_pattern) + ]) @variable.parameter)) + +(catch_clause + parameter: (identifier) @variable.parameter) + +(index_signature + name: (identifier) @variable.parameter) + +(arrow_function + parameter: (identifier) @variable.parameter) + ; Special identifiers +; +(class_declaration + (type_identifier) @type.class) + +(extends_clause + value: (identifier) @type.class) -((identifier) @type - (#match? @type "^[A-Z]")) (type_identifier) @type (predefined_type) @type.builtin @@ -251,6 +326,34 @@ (jsx_closing_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$")) (jsx_self_closing_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$")) +(jsx_opening_element + [ + (identifier) @type + (member_expression + object: (identifier) @type + property: (property_identifier) @type + ) + ] +) +(jsx_closing_element + [ + (identifier) @type + (member_expression + object: (identifier) @type + property: (property_identifier) @type + ) + ] +) +(jsx_self_closing_element + [ + (identifier) @type + (member_expression + object: (identifier) @type + property: (property_identifier) @type + ) + ] +) + (jsx_attribute (property_identifier) @attribute.jsx) (jsx_opening_element (["<" ">"]) @punctuation.bracket.jsx) (jsx_closing_element ([""]) @punctuation.bracket.jsx) diff --git a/crates/languages/src/jsdoc/highlights.scm b/crates/languages/src/jsdoc/highlights.scm index 103d32d0bd29dae56bd456893288e86a8cf87148..581b5d8111fe25443de9951cfdddc8c277ad83ff 100644 --- a/crates/languages/src/jsdoc/highlights.scm +++ b/crates/languages/src/jsdoc/highlights.scm @@ -1,2 +1,3 @@ (tag_name) @keyword.jsdoc (type) @type.jsdoc +(identifier) @variable.jsdoc diff --git a/crates/languages/src/tsx/highlights-jsx.scm b/crates/languages/src/tsx/highlights-jsx.scm deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/crates/languages/src/tsx/highlights.scm b/crates/languages/src/tsx/highlights.scm index ef12b3d7913e07109e32bb5bf41909511aa2b555..83ed6d18d74f3820e27452ec093f8c6268b64e11 100644 --- a/crates/languages/src/tsx/highlights.scm +++ b/crates/languages/src/tsx/highlights.scm @@ -2,6 +2,40 @@ (identifier) @variable +(call_expression + function: (member_expression + object: (identifier) @type.builtin + (#any-of? + @type.builtin + "Promise" + "Array" + "Object" + "Map" + "Set" + "WeakMap" + "WeakSet" + "Date" + "Error" + "TypeError" + "RangeError" + "SyntaxError" + "ReferenceError" + "EvalError" + "URIError" + "RegExp" + "Function" + "Number" + "String" + "Boolean" + "Symbol" + "BigInt" + "Proxy" + "ArrayBuffer" + "DataView" + ) + ) +) + ; Properties (property_identifier) @property @@ -18,6 +52,12 @@ function: (member_expression property: [(property_identifier) (private_property_identifier)] @function.method)) +(new_expression + constructor: (identifier) @type) + +(nested_type_identifier + module: (identifier) @type) + ; Function and method definitions (function_expression @@ -47,13 +87,68 @@ left: (identifier) @function right: [(function_expression) (arrow_function)]) +; Parameters + +(required_parameter + (identifier) @variable.parameter) + +(required_parameter + (_ + ([ + (identifier) + (shorthand_property_identifier_pattern) + ]) @variable.parameter)) + +(optional_parameter + (identifier) @variable.parameter) + +(optional_parameter + (_ + ([ + (identifier) + (shorthand_property_identifier_pattern) + ]) @variable.parameter)) + +(catch_clause + parameter: (identifier) @variable.parameter) + +(index_signature + name: (identifier) @variable.parameter) + +(arrow_function + parameter: (identifier) @variable.parameter) + +(type_predicate + name: (identifier) @variable.parameter) + ; Special identifiers -((identifier) @type - (#match? @type "^[A-Z]")) +(type_annotation) @type (type_identifier) @type (predefined_type) @type.builtin +(type_alias_declaration + (type_identifier) @type) + +(type_alias_declaration + value: (_ + (type_identifier) @type)) + +(interface_declaration + (type_identifier) @type) + +(class_declaration + (type_identifier) @type.class) + +(extends_clause + value: (identifier) @type.class) + +(extends_type_clause + type: (type_identifier) @type) + +(implements_clause + (type_identifier) @type) + ([ (identifier) (shorthand_property_identifier) @@ -231,8 +326,42 @@ "<" @punctuation.bracket ">" @punctuation.bracket) +(type_parameters + "<" @punctuation.bracket + ">" @punctuation.bracket) + (decorator "@" @punctuation.special) +(union_type + ("|") @punctuation.special) + +(intersection_type + ("&") @punctuation.special) + +(type_annotation + (":") @punctuation.special) + +(index_signature + (":") @punctuation.special) + +(type_predicate_annotation + (":") @punctuation.special) + +(public_field_definition + ("?") @punctuation.special) + +(property_signature + ("?") @punctuation.special) + +(method_signature + ("?") @punctuation.special) + +(optional_parameter + ([ + "?" + ":" + ]) @punctuation.special) + ; Keywords [ "abstract" @@ -257,6 +386,34 @@ (jsx_closing_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$")) (jsx_self_closing_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$")) +(jsx_opening_element + [ + (identifier) @type + (member_expression + object: (identifier) @type + property: (property_identifier) @type + ) + ] +) +(jsx_closing_element + [ + (identifier) @type + (member_expression + object: (identifier) @type + property: (property_identifier) @type + ) + ] +) +(jsx_self_closing_element + [ + (identifier) @type + (member_expression + object: (identifier) @type + property: (property_identifier) @type + ) + ] +) + (jsx_attribute (property_identifier) @attribute.jsx) (jsx_opening_element (["<" ">"]) @punctuation.bracket.jsx) (jsx_closing_element ([""]) @punctuation.bracket.jsx) diff --git a/crates/languages/src/typescript/highlights.scm b/crates/languages/src/typescript/highlights.scm index 5e8d55581e3ae86c85ca2b845e8a07caa6444c1d..f5736f4271f7048042b6e1634e78a10043952496 100644 --- a/crates/languages/src/typescript/highlights.scm +++ b/crates/languages/src/typescript/highlights.scm @@ -2,13 +2,69 @@ (identifier) @variable +(call_expression + function: (member_expression + object: (identifier) @type.builtin + (#any-of? + @type.builtin + "Promise" + "Array" + "Object" + "Map" + "Set" + "WeakMap" + "WeakSet" + "Date" + "Error" + "TypeError" + "RangeError" + "SyntaxError" + "ReferenceError" + "EvalError" + "URIError" + "RegExp" + "Function" + "Number" + "String" + "Boolean" + "Symbol" + "BigInt" + "Proxy" + "ArrayBuffer" + "DataView" + ) + ) +) + ; Special identifiers -((identifier) @type - (#match? @type "^[A-Z]")) +(type_annotation) @type + (type_identifier) @type (predefined_type) @type.builtin +(type_alias_declaration + (type_identifier) @type) + +(type_alias_declaration + value: (_ + (type_identifier) @type)) + +(interface_declaration + (type_identifier) @type) + +(class_declaration + (type_identifier) @type.class) + +(extends_clause + value: (identifier) @type.class) + +(extends_type_clause + type: (type_identifier) @type) + +(implements_clause + (type_identifier) @type) + ;; Enables ts-pretty-errors ;; The Lsp returns "snippets" of typescript, which are not valid typescript in totality, ;; but should still be highlighted @@ -83,6 +139,12 @@ function: (member_expression property: [(property_identifier) (private_property_identifier)] @function.method)) +(new_expression + constructor: (identifier) @type) + +(nested_type_identifier + module: (identifier) @type) + ; Function and method definitions (function_expression @@ -114,6 +176,40 @@ (arrow_function) @function +; Parameters + +(required_parameter + (identifier) @variable.parameter) + +(required_parameter + (_ + ([ + (identifier) + (shorthand_property_identifier_pattern) + ]) @variable.parameter)) + +(optional_parameter + (identifier) @variable.parameter) + +(optional_parameter + (_ + ([ + (identifier) + (shorthand_property_identifier_pattern) + ]) @variable.parameter)) + +(catch_clause + parameter: (identifier) @variable.parameter) + +(index_signature + name: (identifier) @variable.parameter) + +(arrow_function + parameter: (identifier) @variable.parameter) + +(type_predicate + name: (identifier) @variable.parameter) + ; Literals (this) @variable.special @@ -244,8 +340,42 @@ "<" @punctuation.bracket ">" @punctuation.bracket) +(type_parameters + "<" @punctuation.bracket + ">" @punctuation.bracket) + (decorator "@" @punctuation.special) +(union_type + ("|") @punctuation.special) + +(intersection_type + ("&") @punctuation.special) + +(type_annotation + (":") @punctuation.special) + +(index_signature + (":") @punctuation.special) + +(type_predicate_annotation + (":") @punctuation.special) + +(public_field_definition + ("?") @punctuation.special) + +(property_signature + ("?") @punctuation.special) + +(method_signature + ("?") @punctuation.special) + +(optional_parameter + ([ + "?" + ":" + ]) @punctuation.special) + ; Keywords [