Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rainbow brackets #5259

Open
1 task done
imjordanxd opened this issue Aug 1, 2022 · 34 comments · May be fixed by #21875
Open
1 task done

Rainbow brackets #5259

imjordanxd opened this issue Aug 1, 2022 · 34 comments · May be fixed by #21875
Labels
design [core label] editor Feedback for code editing, formatting, editor iterations, etc enhancement [core label] extension infrastructure Feedback for extensions APIs, creation, management, etc potential extension Functionality that could be implemented as an extension (consider moving to community extensions)

Comments

@imjordanxd
Copy link

Check for existing issues

  • Completed

Is your feature request related to a problem?

Having bracket pairs colours helps quickly look at code and understand where brackets/blocks/parens start & end

Describe the solution you'd like

Rainbow brackets similar to VSCode

If applicable, add mockups / screenshots to help present your vision of the feature

https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization

@imjordanxd imjordanxd added enhancement [core label] triage Maintainer needs to classify the issue labels Aug 1, 2022
@JosephTLyons JosephTLyons added editor Feedback for code editing, formatting, editor iterations, etc and removed triage Maintainer needs to classify the issue labels Aug 1, 2022
@mikayla-maki mikayla-maki added the design [core label] label Aug 5, 2022
@jrmoynihan
Copy link

Might as well include the rainbow indent too:
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

@hovsater hovsater added the potential extension Functionality that could be implemented as an extension (consider moving to community extensions) label Apr 30, 2023
@tmaxmax
Copy link

tmaxmax commented May 31, 2023

I think it's necessary for this to be configurable. Personally I don't enjoy bracket colorization, so I'll look for a way to disable them.

@JosephTLyons JosephTLyons transferred this issue from zed-industries/community Jan 24, 2024
@vbhavsar
Copy link
Contributor

This sounds like it should be an extension (when zed supports extensions).

@JustForFun88
Copy link

This sounds like it should be an extension (when zed supports extensions).

As I remember, this feature is built-in to VSCODE, am I wrong?
And they did it for performance purposes

@inoas
Copy link

inoas commented Apr 26, 2024

This would be awesome to have.

@TimTheBig
Copy link

Are their any plans for this to be add, it is a big legibility improvement? If not would it be possible to make an extension for this functionality.

@inoas
Copy link

inoas commented May 3, 2024

I think this is a good thing for the core.

The specific langs LSPs could/should expose what counts as brackets like do/end for/end fn/end {} () [] #() and whatnot. If they don't just do regular braces ({}, {}, ())

@kiran-4444
Copy link

Hey, I’d like to start on this issue if no one’s already working on this.

@TimTheBig
Copy link

TimTheBig commented May 4, 2024

It's been two years so you should be good to work on it. I would be willing to help test.

@Dageus
Copy link
Contributor

Dageus commented May 15, 2024

Hey, would it be ok if me and @bcmeireles worked on it as well? We've been analyzing it for a while and would like to pick up this feature if possible.

@kiran-4444
Copy link

Hello @Dageus @bcmeireles I don't mind collaborating with you both on this.

@TimTheBig
Copy link

TimTheBig commented May 15, 2024

@kiran-4444 this would be a good draft pull request.

@Dageus
Copy link
Contributor

Dageus commented May 16, 2024

Hey @kiran-4444 sorry for the delay in the response
Unfortunately we won't be able to work with you on the feature, since this is for a college project, and the professor said since this is a rather simple feature we can't cooperate with other contributers
Is it okay with you if we work on this feature? If you've started working on it already we'll open a PR after yours so you'll have priority

@mikayla-maki
Copy link
Contributor

@Dageus It may not be as simple as y'all hope! I suggest y'all both continue and open draft PRs so we can check on them :)

@kiran-4444
Copy link

Hey @kiran-4444 sorry for the delay in the response Unfortunately we won't be able to work with you on the feature, since this is for a college project, and the professor said since this is a rather simple feature we can't cooperate with other contributers Is it okay with you if we work on this feature? If you've started working on it already we'll open a PR after yours so you'll have priority

@Dageus @bcmeireles No problem, you can continue on this and I'll work on some other issue. Good luck with your project!

@bcmeireles
Copy link

@kiran-4444 Thank you for this. We will be working on it and keeping everyone updated throughout the process.

@bcmeireles
Copy link

We've been looking through it and found some interesting things, mainly in crates/editor/src/editor.rs.

We're thinking about doing an approach like the highlight_matching_bracket.rs file does for the highlight but for coloring but unsure if it's the best approach.

We've also looked into the brackets at crates/language/src/language.rs and the handle_input functions at crates/editor/src/editor.rs and think they could be interesting for such an approach, or at least a similar one and would like to get some insights on what everyone thinks or if we're missing any possibly good parts of the codebase to look at.

Thanks!

@Dageus
Copy link
Contributor

Dageus commented May 22, 2024

After reading a little bit more, I think the render function in the crates/editor/src/editor.rs is the correct place to incorporate and call the rainbow brackets function, since that's where the highlighting and styling functions are called, and if so, we could go ahead and start implementing.

Thanks!

@bcmeireles
Copy link

We figured out that the shape_line and shape_text functions of WindowTextSystem inside the gpui/src/text_system.rs file are responsible for painting the text with colors and decorators onto the editor. We are currently building an AST, inspired by VSCode's implementation and it's benefits. We will keep working on this and on linking everything together and will soon submit a draft PR with some of our progress

bcmeireles pushed a commit to Dageus/zed that referenced this issue May 27, 2024
…es#5259

- Added rainbow brackets to highlight method
- Added new setting called use_rainbow_brackets
- Started developing the AST based on VSCode's implementation

Co-authored-by: João Nogueira <[email protected]>
bcmeireles added a commit to bcmeireles/zed that referenced this issue May 27, 2024
…es#5259

- Added rainbow brackets to highlight method, in the gpui's style file
- Added new setting called use_rainbow_brackets to allow users to decide if they want to use the rainbow brackets or not
- Started developing the AST based on VSCode's implementation

Co-authored-by: João Miguel Nogueira <[email protected]>
bcmeireles added a commit to bcmeireles/zed that referenced this issue May 27, 2024
…es#5259

- Added rainbow brackets to highlight method, in the gpui's style file
- Added new setting called use_rainbow_brackets
allowing users to decide if they want to use the rainbow brackets or not
- Started developing the AST based on VSCode's implementation

Co-authored-by: João Miguel Nogueira <[email protected]>
bcmeireles added a commit to bcmeireles/zed that referenced this issue May 27, 2024
…es#5259

- Added rainbow brackets to highlight method, in the gpui's style file
- Added new setting called use_rainbow_brackets
allowing users to decide if they want to use the rainbow brackets or not
- Started developing the AST based on VSCode's implementation

Co-authored-by: João Nogueira <[email protected]>
@bcmeireles
Copy link

Is everyone ok with the approach being taken and/or does anyone have any suggestions regarding how to continue?

@TimTheBig
Copy link

As long as current themes still work and can add colors with little effort it should be good.

@bcmeireles
Copy link

Yes, we plan to not break any themes, we've added the option to customize the colors but that's built upon the current theme implementation.
I was referring more to the technical approach itself

@ComplexPlane
Copy link

Is there a reason for building a custom AST rather than using the tree-sitter ASTs? If using tree-sitter, I'm not sure if you'd use the per-language ones or maybe some generic one just for pair parsing?

@bcmeireles
Copy link

Different languages could have different behaviours for brackets and the logic could be used for more than rainbow brackets, at least that was our thought process. Do you have a different idea for the approach?

@ComplexPlane
Copy link

It'd probably be useful for the tree-sitter-involved Zed developers to chime in. As far as I'm aware, tree-sitter already incrementally parses full parse trees from buffers for each language, and is used for syntax highlighting, autoindent, and other syntax-aware features. From my uninformed outsider perspective, the tree-sitter framework sounds like it may be appropriate for rainbow brackets as well? Probably worth checking since it seems like a pretty core part of this editor.

@bcmeireles
Copy link

We're also unaware of that implementation for tree-sitter, where is that and how does it work? If any tree-sitter-involved Zed developer could let us know about it if it even is something that we could use for it we'd like to know and colaborate to get the rainbow brackets implemented that way

@inoas
Copy link

inoas commented Jun 28, 2024

Imho it would be great for other nesting in languages such as Elixir or Ruby.

@peekxc
Copy link

peekxc commented Aug 9, 2024

It looks like Zed already supports rainbow (or theme-colored) indent guides in its default settings.

For example, on my editor, changing the background coloring to "indent_aware" on One Light theme yields:

Screenshot 2024-08-09 at 3 08 52 PM

Changing just the color yields:

Screenshot 2024-08-09 at 3 17 54 PM

I realize this isn't braces, but a few people mentioned indents

@inoas
Copy link

inoas commented Aug 12, 2024

I like these much more anyway, vscode has them too (background indent rainbows)

@inoas
Copy link

inoas commented Aug 12, 2024

great however is a visual guide where a block starts and ends.

Screenshot 2024-08-12 at 15 54 02

see the yellow line below |> prepared_statement.append_sql(...

@AurevoirXavier
Copy link
Contributor

AurevoirXavier commented Aug 29, 2024

Rainbow bracket is a built-in feature of VSCode now (no longer a plugin). I highly recommend to integrate this into Zed.

@spenat28
Copy link

spenat28 commented Oct 4, 2024

For me, it's decision making change.

Till we have rainbow brackets, i "have" to stay in VS Code, and i would really really like to switch from it.

Zed is superior editor for me in most ways already, but i am faster in reading code with rainbow brackets ... it makes a all the difference in longer HTML, JS, CSS for me, and till then i am still subconsciously switching back to VSCode ... :( ... once you get used to it, it's hard to switch from it.

Can we plan this to some milestone?

@GATEHUA
Copy link

GATEHUA commented Nov 9, 2024

It would be ideal to add a functionality similar to "editor.guides.bracketPairs": true, from vscode and also another similar to the indentRainbow extension:

indentRainbow.includedLanguages": ["nim", "nims", "python"],
"indentRainbow.indicatorStyle": "light",
"indentRainbow.lightIndicatorStyleLineWidth": 1,
"indentRainbow.colors": [
"rgba(255,255,64,0.9", // Amarillo claro
"rgba(127,255,127,0.9", // Verde claro
"rgba(255,127,255,0.9", // Rosa claro
"rgba(79,236,236,0.9", // Cian claro
"rgba(255,127,80,0.9", // Naranja claro
"rgba(173,216,230,0.9", // Azul claro
"rgba(240,128,128,0.9", // Rojo claro
"rgba(221,160,221,0.9", // Púrpura claro
"rgba(144,238,144,0.9", // Verde pastel
"rgba(255,182,193,0.9" // Rosado claro
],

@GATEHUA

This comment was marked as off-topic.

@marcospb19 marcospb19 linked a pull request Dec 11, 2024 that will close this issue
10 tasks
@JosephTLyons JosephTLyons added the extension infrastructure Feedback for extensions APIs, creation, management, etc label Dec 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design [core label] editor Feedback for code editing, formatting, editor iterations, etc enhancement [core label] extension infrastructure Feedback for extensions APIs, creation, management, etc potential extension Functionality that could be implemented as an extension (consider moving to community extensions)
Projects
None yet
Development

Successfully merging a pull request may close this issue.