From 9364d3948709ff6902fe7a80bdb7286a29eeb7bc Mon Sep 17 00:00:00 2001 From: Clay Tercek <30105080+claytercek@users.noreply.github.com> Date: Mon, 8 Dec 2025 06:00:38 -0500 Subject: [PATCH] Improve TS/TSX/JS syntax highlighting for parameters, types, and punctuation (#43437) This pull request enhances syntax highlighting for JavaScript, TypeScript, TSX, and JSDoc by adding more precise rules for parameters, types, and punctuation. - Added queries for highlighting parameters (`@variable.parameter`) - Expanded highlighting for type identifiers, type aliases, interfaces, classes - Extended/implemented types to improve distinction between different type constructs (`@type`, `@type.class`) - Added highlighting for punctuation in type parameters, unions, intersections, annotations, index signatures, optional fields, and predicates (`@punctuation.special`, `@punctuation.bracket`) - Added highlighting for identifiers in JSDoc comments (`@variable.jsdoc`) Release Notes: - Refined syntax highlighting in JavaScript and TypeScript for better visual distinction of types, parameters, and JSDoc elements --- .../languages/src/javascript/highlights.scm | 39 +++++++- crates/languages/src/jsdoc/highlights.scm | 1 + crates/languages/src/tsx/highlights.scm | 93 +++++++++++++++++- .../languages/src/typescript/highlights.scm | 94 ++++++++++++++++++- 4 files changed, 221 insertions(+), 6 deletions(-) diff --git a/crates/languages/src/javascript/highlights.scm b/crates/languages/src/javascript/highlights.scm index e5b84ab68df2b32061691f469046569a6597750e..378cb579f4366c4be9eb16fa87708aeb5391814a 100644 --- a/crates/languages/src/javascript/highlights.scm +++ b/crates/languages/src/javascript/highlights.scm @@ -47,10 +47,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 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.scm b/crates/languages/src/tsx/highlights.scm index ef12b3d7913e07109e32bb5bf41909511aa2b555..816ae3c58634597495f943dfaeb4a7e7aab77228 100644 --- a/crates/languages/src/tsx/highlights.scm +++ b/crates/languages/src/tsx/highlights.scm @@ -47,13 +47,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 +286,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" diff --git a/crates/languages/src/typescript/highlights.scm b/crates/languages/src/typescript/highlights.scm index 5e8d55581e3ae86c85ca2b845e8a07caa6444c1d..94690ca30ece07d482593085755682e3e9abba70 100644 --- a/crates/languages/src/typescript/highlights.scm +++ b/crates/languages/src/typescript/highlights.scm @@ -4,11 +4,33 @@ ; 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 @@ -114,6 +136,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 +300,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 [