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
This commit is contained in:
Clay Tercek
2025-12-08 06:00:38 -05:00
committed by GitHub
parent f16913400a
commit 9364d39487
4 changed files with 222 additions and 7 deletions

View File

@@ -47,10 +47,45 @@
left: (identifier) @function
right: [(function_expression) (arrow_function)])
; Special identifiers
; 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

View File

@@ -1,2 +1,3 @@
(tag_name) @keyword.jsdoc
(type) @type.jsdoc
(identifier) @variable.jsdoc

View File

@@ -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"

View File

@@ -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
[