tree-sitter / tree-sitter-typescript

TypeScript grammar for tree-sitter
MIT License
341 stars 104 forks source link

Divide capture groups more precisely, for better control over highlighting. #177

Open flosker opened 2 years ago

flosker commented 2 years ago

I think current capture / highlighting groups are somewhat vague & need to be divided more precisely.

E.g. currently :

  1. variable declaration & variable used in code share the same group @variable. They could be separate - @variable & @declaration or something like that.

  2. All types of brackets, braces & parens share the same group @punctuation.bracket. They could be separate - @punctuation.paren, @punctuation.brace, etc.

  3. Object key (when defining) & property (when using) have the same group @property. One more could be added like @object.key.

  4. try & catch keyword share the same group @exception. They could be separate - @exception.try & @exception.catch

  5. import & from keyword share the same group @include. They could be separates @include.import, @include.from. There are many more vague keywords.

  6. Regular strings & backtick (template strings) share the same group @string. One more could be added - @string.template.

  7. ....

Why

Doing this will allow user to create more precise highlighting of the code. For e.g. one could make try block in green color, & catch block in red. As catch only executes when try block produces errors. Different uses have different taste, so this will allow users to highlight each part of code exactly as they want.

Lot of traditional syntax highlighting file (e.g. vim-javascript) provide these kinds of precisions & allows better control over code highlighting. The mentioned syntax file even provides separate groups for braces of objects, function, conditionals, etc.

flosker commented 2 years ago

Right now, it is possible for user to create custom groups themselves : https://github.com/nvim-treesitter/nvim-treesitter/issues/167/

Example: Custom group for variable declarations @variable.declaration.

(variable_declarator
    name : (identifier)
@variable.declaration)

Although, It would better if they were more specific by default.

mjambon commented 2 years ago

Hey all! This seems like a popular request (so many thumbs-up!). This isn't my expertise as we don't use the tree-sitter parsers for this at all. I'll defer to @maxbrunsfeld and to the GitHub folks who know about these choices.

Meanwhile:

Different constructs are given the same name via the alias() construct in the grammar files. The typescript grammar extends the javascript grammar, so there are two main files to inspect. I suggest looking at all the alias() constructs (of the form alias(original_name, visible_name)) and making pull requests or just a list of the proposed renaming. Here are the grammar files in question:

flosker commented 2 years ago

I did some groups overriding as per above method & here are the results. Things are easier to distinguish & are made more logical. READ comments for elements which are changed.

Screenshot 1

Screenshot 2

  1. Test file in screenshot

  2. queries/typescript/highlights.scm

  3. Treesitter plugin config for adding highlight groups - Neovim

export keyword rule is directly added in main source file, because overriding was not working due to priority issues.

Iron-E commented 2 years ago

This would greatly help me resolve Iron-E/nvim-highlite#15 in my colorscheme. Rather than writing new queries I could simply link highlight types to look as expected.

I too have noticed traditional regex plugins provide finer control, and haven't had time to write custom queries to bridge the gap.

Edit: to be specific, I would be in favor of making all the treesitter groups more precise in this way, not just typescript.

flosker commented 2 years ago

Does anybody know how to give user customized rules priority than builtin ones? Like export keyword in above example.

Iron-E commented 1 year ago

Does anybody know how to give user customized rules priority than builtin ones? Like export keyword in above example.

((super_important_node) @superimportant (#set! "priority" 105))

You may have to add nocombine to your highlights as well.

diegodario88 commented 1 year ago

I did some groups overriding as per above method & here are the results. Things are easier to distinguish & are made more logical. READ comments for elements which are changed.

Screenshot 1

Screenshot 2

  1. Test file in screenshot
  2. queries/typescript/highlights.scm
  3. Treesitter plugin config for adding highlight groups - Neovim

export keyword rule is directly added in main source file, because overriding was not working due to priority issues.

How can I use these files to enhance the highlights in my colorscheme? Currently, both the 'await' and 'export' keywords are treated the same, but I want them to have different colors.