Files
oak-gpui/crates/languages/src/javascript/highlights.scm
T
chbkandMarshall Bowers 8f40bcc86c Improve JavaScript and TypeScript syntax highlighting (#25328)
Release Notes:

  - Improved JavaScript and TypeScript syntax highlighting.

| Zed 0.174.6 | With this PR |
| --- | --- |
|
![Image](https://github.com/user-attachments/assets/a64f0abf-3b4e-4369-80c5-1d1381c925fc)
|
![Image](https://github.com/user-attachments/assets/f8224243-f4ab-4af9-8dd8-5062dd7ea743)
|

- `regex_flags`: `keyword.regex`, see the [Regex
PR](https://github.com/zed-industries/zed/pull/25332) for other Regex
scopes
- `@`: `punctuation.special`, as in Python
- `jsx_text`: `text.jsx`
- `=`: `operator` -> `punctuation.jsx.delimiter`, `punctuation` as in
[VS
Code](https://github.com/microsoft/vscode/blob/0fe195613ed9901f669cd0f799fe807f0189d029/extensions/html/syntaxes/html.tmLanguage.json#L78)
and
[Atom](https://github.com/atom/language-html/blob/ee750a014a003c3d6f10b91e3cd5f9bfa0f051e6/grammars/tree-sitter-html.cson#L47)
- added `jsx` scope to target JSX tokens specifically

```javascript
/**
 * @keyword comment
 */
@log
class X {
  render() {
    return (
      <div jsx_attribute="value">
        <Input onKeyPress={super.bind(this)}/>
        jsx_text
      </div>
    );
  }
}
const IDENTIFIER = true
```

---------

Co-authored-by: Marshall Bowers <git@maxdeviant.com>
2025-02-21 21:54:16 +00:00

245 lines
3.4 KiB
Scheme

; Variables
(identifier) @variable
; Properties
(property_identifier) @property
(shorthand_property_identifier) @property
(shorthand_property_identifier_pattern) @property
; Function and method calls
(call_expression
function: (identifier) @function)
(call_expression
function: (member_expression
property: (property_identifier) @function.method))
; Function and method definitions
(function_expression
name: (identifier) @function)
(function_declaration
name: (identifier) @function)
(method_definition
name: (property_identifier) @function.method)
(pair
key: (property_identifier) @function.method
value: [(function_expression) (arrow_function)])
(assignment_expression
left: (member_expression
property: (property_identifier) @function.method)
right: [(function_expression) (arrow_function)])
(variable_declarator
name: (identifier) @function
value: [(function_expression) (arrow_function)])
(assignment_expression
left: (identifier) @function
right: [(function_expression) (arrow_function)])
; Special identifiers
((identifier) @type
(#match? @type "^[A-Z]"))
(type_identifier) @type
(predefined_type) @type.builtin
([
(identifier)
(shorthand_property_identifier)
(shorthand_property_identifier_pattern)
] @constant
(#match? @constant "^_*[A-Z_][A-Z\\d_]*$"))
; Literals
(this) @keyword
(super) @keyword
[
(null)
(undefined)
] @constant.builtin
[
(true)
(false)
] @boolean
(comment) @comment
[
(string)
(template_string)
] @string
(escape_sequence) @string.escape
(regex) @string.regex
(regex_flags) @keyword.regex
(number) @number
; Tokens
[
";"
"?."
"."
","
":"
] @punctuation.delimiter
[
"-"
"--"
"-="
"+"
"++"
"+="
"*"
"*="
"**"
"**="
"/"
"/="
"%"
"%="
"<"
"<="
"<<"
"<<="
"="
"=="
"==="
"!"
"!="
"!=="
"=>"
">"
">="
">>"
">>="
">>>"
">>>="
"~"
"^"
"&"
"|"
"^="
"&="
"|="
"&&"
"||"
"??"
"&&="
"||="
"??="
] @operator
[
"("
")"
"["
"]"
"{"
"}"
] @punctuation.bracket
(ternary_expression
[
"?"
":"
] @operator
)
[
"as"
"async"
"await"
"break"
"case"
"catch"
"class"
"const"
"continue"
"debugger"
"default"
"delete"
"do"
"else"
"export"
"extends"
"finally"
"for"
"from"
"function"
"get"
"if"
"import"
"in"
"instanceof"
"let"
"new"
"of"
"return"
"set"
"static"
"switch"
"target"
"throw"
"try"
"typeof"
"using"
"var"
"void"
"while"
"with"
"yield"
] @keyword
(template_substitution
"${" @punctuation.special
"}" @punctuation.special) @embedded
(type_arguments
"<" @punctuation.bracket
">" @punctuation.bracket)
(decorator "@" @punctuation.special)
; Keywords
[ "abstract"
"declare"
"enum"
"export"
"implements"
"interface"
"keyof"
"namespace"
"private"
"protected"
"public"
"type"
"readonly"
"override"
] @keyword
; JSX elements
(jsx_opening_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$"))
(jsx_closing_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$"))
(jsx_self_closing_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$"))
(jsx_attribute (property_identifier) @attribute.jsx)
(jsx_opening_element (["<" ">"]) @punctuation.bracket.jsx)
(jsx_closing_element (["</" ">"]) @punctuation.bracket.jsx)
(jsx_self_closing_element (["<" "/>"]) @punctuation.bracket.jsx)
(jsx_attribute "=" @punctuation.delimiter.jsx)
(jsx_text) @text.jsx