Sublime Forum

[Solved] Goto Symbol In Project only brings up CSS, and not the HTML ID attributes etc

#1

I am trying to locate symbols in my html files that are in my css files, however when I use the function Goto Symbol In Project it only brings up the css file(s) that contain that symbol, not the html files.

Here is my example:
-Sublime Text 3 (note: I had emmet installed, but uninstalled it and reinstalled ST3)
-I have created a project and all files/folders are listed in sidebar when I open project
-Goto Symbol in Project… (Ctrl+Shift+R)
-I type in holiday-button
-The list shown includes only css files (i.e. css/style.css:751)
–The line referenced: css/style.css:751:** #holiday-button** {color:#fff;}

-The html file that contains that the symbol does not show up in the list
–ssi/footer.htm:154: <a class=“holidayhours” id=“holiday-button”>Holiday Hours

Is there a reason why I can not get symbols in html files to show up in my goto symbol search?

Thank you for your help

Tod

0 Likes

#2

Actually in 2016.

0 Likes

#3

If you want HTML id attributes to show up in Goto Symbol in Project, you will need to modify this file:

to add:

<key>showInIndexedSymbolList</key>
<integer>1</integer>

inside the settings dict.

(the Default/Symbol List.tmPreferences file sets <key>showInSymbolList</key><string>1</string> for scope meta.toc-list amongst others, which is why it appears in Goto Symbol, but for it to appear in Goto Symbol in Project, showInIndexedSymbolList must be set to 1.)

and then it will give you the choice of whether to go to the CSS file or the HTML file when you select the symbol in the list.

You can also add:

<key>symbolIndexTransformation</key>
<string>s/^/ID: /</string>

if you want it to appear in the list with ID: before it, like it does for Goto Symbol in current view.

2 Likes

#4

Thanks, it’s work! How to make also for HTML tags and classes?

0 Likes

#5

Can you give some examples please? I’m not sure I understand why it would be useful to show all HTML tags in Goto Symbol in Project…

0 Likes

#6

I guess the idea is replicating the document.findElementsByTagName and document.findElementsByClassName functions. These features would benefit JS devs (somewhat).

0 Likes

#7

Oh well that kinda thing can be covered by the XPath package if it’s well formed HTML. I guess not quite as easy as using those JS functions, as it requires knowing XPath, but still useful :slightly_smiling:

1 Like

#8

Examples:

  1. I have tag <div class="ExampleClass"> and CSS

       .ExampleClass
               {
                   color: red;
               }
    

I want to Ctrl+Shift+R found a result ExampleClass that is in the HTML — <div class="**ExampleClass**">.

2. I have tag <ExampleTag></ExampleTag> and CSS:

ExampleTag
              {
                  color: red;
              }

What should I do to Ctrl+Shift+R found ExampleTag everywhere or only in CSS?

Thanks.

0 Likes

#9

Create a file in Packages/User called Symbol List - Classes.tmPreferences with the following content:

<?xml version="1.0" encoding="UTF-8"?>
<plist version="1.0">
<dict>
    <key>name</key>
    <string>Symbol List: Classes</string>
    <key>scope</key>
    <string>text.html meta.class-name.html</string>
    <key>settings</key>
    <dict>
        <key>symbolIndexTransformation</key>
        <string>s/^/Class: /</string>
        <key>showInIndexedSymbolList</key>
        <integer>1</integer>
    </dict>
</dict>
</plist>
2 Likes

#10

For HTML, create a file in Packages/User called Symbol List - Tags.tmPreferences with the following content:

<?xml version="1.0" encoding="UTF-8"?>
<plist version="1.0">
<dict>
    <key>name</key>
    <string>Symbol List: Tags</string>
    <key>scope</key>
    <string>text.html entity.name.tag</string>
    <key>settings</key>
    <dict>
        <key>symbolIndexTransformation</key>
        <string>s/^/Tag: /</string>
        <key>showInIndexedSymbolList</key>
        <integer>1</integer>
    </dict>
</dict>
</plist>

For CSS, I’m not sure it is currently possible because in the example:

ExampleTag does not have a specific scope. So the CSS syntax definition would need to be updated first.

However, if you want all CSS selectors to show up, you could use:

<?xml version="1.0" encoding="UTF-8"?>
<plist version="1.0">
<dict>
    <key>name</key>
    <string>Symbol List: CSS</string>
    <key>scope</key>
    <string>meta.selector.css</string>
    <key>settings</key>
    <dict>
        <key>symbolIndexTransformation</key>
        <string>s/^/CSS: /</string>
        <key>showInIndexedSymbolList</key>
        <integer>1</integer>
    </dict>
</dict>
</plist>
2 Likes

#11

@kingkeith , after the Sublime Text updating, this file will change? I am afraid to change default files not in the User folder.

0 Likes

#12

There could be changes to Symbol List - ID.tmPreferences in the Packages Git repository, which would be included in the HTML package when you update ST3, but the changes won’t overwrite your customizations - your file in the Packages/HTML folder will override the one in the HTML.sublime-package file. This does mean that if you want the latest version, you will have to delete your override file, although you could then make the same change again to that version.
However, looking at the history of the file, it has been changed once in over a year, and even that wasn’t a functional change. So such changes will not be frequent I think.

0 Likes

#13

Truly I you understood, what the file Symbol List - ID.tmPreference surely has to be not in the User folder? And if updating of the file happens, I should change the file again?

Forgive that I ask many questions.

0 Likes

#14

I just tried saving it to the Packages/User folder, and it seems to work alright. So it could be an option. And then you will still receive updates and potentially not have to change anything.

1 Like

#15

Thank you very much!

0 Likes