Rainbow Brackets is colourzing (incorrectly) JS selector Quotes contained in a JS or Twig document - Githubissues

izhangzhihao / intellij-rainbow-brackets

🌈Rainbow Brackets for IntelliJ based IDEs/Android Studio/HUAWEI DevEco Studio/Fleet

https://plugins.jetbrains.com/plugin/10080-rainbow-brackets

GNU General Public License v3.0

4.47k stars 214 forks source link

Rainbow Brackets is colourzing (incorrectly) JS selector Quotes contained in a JS or Twig document #915

Closed JamesArthurHarrison closed 3 years ago

JamesArthurHarrison commented 3 years ago

Please check

[X] This issue/feature request is not reported before.

Your programming language(s)

JS

Expected Behavior

Double quotes should not be colorized by rainbow brackets
Current Behavior
In a twig document between script tags and in a normal .js document, I have some JavaScript. When I use a jQuery selector, like $("#select_something") the opening " is colored as normal, but the closing " is coloured as an outer bracket would be.

Possible Solution

I initially thought this was an interaction with twig, but the issue persists in a .js document. It feels like it might be related to the ~, because without that it reverts to normal quotes. I do not know how to resolve it

Code snippet for reproduce (for bugs)

{% block script %}
    <script lang="js">
        const example =  $("#select_character")
    </script>
{% endblock %}

Your Environment

Plugin version: 6.13

IDE & Operating System version, comment your env as below(go to "About IntelliJ IDEA" -> click the "copy" icon):

PhpStorm 2020.3.2 RC
Build #PS-203.7148.50, built on January 21, 2021
Licensed to Christians Against Poverty / James Harrison
Subscription is active until September 23, 2021.
Runtime version: 11.0.9.1+11-b1145.77 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
Linux 5.8.0-38-generic
GC: ParNew, ConcurrentMarkSweep
Memory: 1885M
Cores: 8
Registry: run.processes.with.pty=TRUE, ide.balloon.shadow.size=0
Non-Bundled Plugins: Key Promoter X, some.awesome, de.espend.idea.php.annotation, izhangzhihao.rainbow.brackets, com.blai30.lotus.theme
Current Desktop: ubuntu:GNOME

P.S. First proper issue I've reported outside of work :-)

izhangzhihao commented 3 years ago

Any screenshots?

izhangzhihao commented 3 years ago

Does this issue related to #248 ?

JamesArthurHarrison commented 3 years ago

Any screenshots? Apologies, my computer was on the struggle-bus in saving screenshots. Lets see if it will now (a few min pass)...success!:

Does this issue related to #248 ?

I initially thought so, but as the issue persists outside of Twig, and affects non-brackets I'm not certain. I've edited the issue title to reference JS & Twig documents now :-)

izhangzhihao commented 3 years ago

Ah, Are you using JQuery? I think it related to #41

izhangzhihao commented 3 years ago

I don't think there are many people still using JQuery, so I'm going to close this issue. If you really want to fix this, a donation would help.

JamesArthurHarrison commented 3 years ago

I mean we work with a lot of legacy code & it's there. Additionally I've learnt to code as a trainee developer over this last year - I didn't realise jQuery wasn't used now. I had spoken to one of our Dev's who never used it - is this because JS has better functions for emulating the selections it does? Basically I'm interested in when/why jQuery stopped being in fashion/used. Being new to the scene I haven't lived through this stuff - and I'm not sure If I'm being judged/mocked for working with code that uses it...I just learned it when I learned JS and the course teaching it didn't mention it was bad or obsolete! Or is there just something that replaces it now, that most people know about. Thanks!

Apologies - I have no idea how much of a donation would help, being a trainee dev for a charity I don't have any experience on how much an issue like this would cost to fix.

Separately from all the ignorance, Rainbow brackets has been my favorite plugin! genuinely helps me read code far better than anything else :100:

izhangzhihao commented 3 years ago

Oh, sorry, I didn't mean JQuery is bad and didn't judge you. We all have to maintain some legacy code at some time(I do use JQuery when I'm still a student).

So, I would have a try to fix it and I'm happy this plugin can help someone.

izhangzhihao commented 3 years ago

For

$("#test")

The PSI tree is:

JSFile:Dummy.js(0,10)
  JSExpressionStatement(0,10)
    JSCallExpression(0,10)
      JSReferenceExpression(0,1)
        PsiElement(JS:IDENTIFIER)('$')(0,1)
      JSArgumentList(1,10)
        PsiElement(JS:LPAR)('(')(1,2)
        JSLiteralExpression(2,9)
          PsiElement(JS:STRING_LITERAL)('"#test"')(2,9)
        PsiElement(JS:RPAR)(')')(9,10)

izhangzhihao commented 3 years ago

The fix:

Open "Do not rainbowify brackets without content"

izhangzhihao commented 3 years ago

If you have any other questions, please leave a comment, I will reopen this issue.

JamesArthurHarrison commented 3 years ago

Thank you so much! sorry it took me so long to reply - I really appreciated that you looked into this further for me :-)! Still the best plugin :-)