Sublime Forum

Hiding/Changing Text Custom Plugin

#1

I’m considering trying to create a custom Plugin - but I wanted to see if anyone has come across something similar before trying to embark on my own.

Essentially I want something that’ll replace text in the IDE (for readability sake). I want to take the following string:

this._

and replace with something else, possibly just _. However I want this to just be a visual change, not an actual change in the document itself. My reason for wanting to do this is the following piece of code is difficult for the eye to parse:

    if (this._root) {
       this._flattenTree(d).forEach(n => {
       n.pack = this._root;
    });
    this._root.data(this._d);
    this._render();

When reading the top line the eye is drawn to this before root, while the underscore looks like a space to the eye. This makes it slower (and I find more annoying) to read code. So I want to hide all the this._ possibly swapping with just an underscore so it reads as _.root or similar.

I can’t actually change the code to that, because then it’d be invalid, and getting team adoption to make that sort of change might be difficult because it’s quite non-standard in the community.

Does this seem like something that’s feasible to do within Sublime? Does anyone know of a plugin that might already do this? Or can anyone give me a starter for 10 (that’ll compliment my effort after reading some Plugin creation 101)?

0 Likes
#2

Probably you would be better off just modifying the color scheme you use to make the this. the same color as the background, as it is not possible to modify the content of a document in ST3 and have it only be a visual change.

1 Like
#3

I like that idea - is that something I can do with vanilla Sublime do you know?

0 Likes
#4

Which language syntax is it for? You certainly won’t need to create a plugin for it (i.e. so you won’t need to write any code in Python to interface with ST3’s API), but you may need to tweak a language grammar slightly (regex definitions), and you will definitely need to override a color scheme (xml file).

Basically, the syntax definition consists of many regular expressions which are used to apply a “scope” to each character in the document. A color scheme then colors those “scopes”. So depending on how the definition assigns a scope to the this and the following . character, there may be no need to make any changes to that, just to the color scheme.

0 Likes
#5

OK - that sounds good. I’m using JavaScript.

I’m happy to go read an article if you know of any good ones explaining how to do so?

0 Likes
#6

I’ve managed to find the JavaScript.sublime-syntax file which I assume is the one I need to be updating. Has the format of this changed at some point (examples I’m seeing online refer to XML).

At the moment - the thing that loses me a little is whereabouts to make a change :confused:

0 Likes
#7

Correct, the format has changed to yaml fairly recently.

If you find the line that says: - match: \b(this)\b, and change it to - match: \b(this)\b\.?, then in your JavaScript files, this. will be given scope variable.language.this.js. And then it’s just the color scheme you need to modify :slight_smile:

Note: there are a few things to watch out for when modifying a package that is shipped with ST.

  • If you are creating a custom override (saving your modified file to your Packages folder - in this case Packages/JavaScript/) then that file will stay until you delete it. The implications being that if there are ever any updates made to the file in the next version of Sublime Text, you won’t see those changes because it will still be using your override, based on an older version of the file. This can cause unexpected behavior, and it is recommended to delete your overrides every time you update ST. You can of course, make the same change again as a new override.
  • If you modify the .sublime-package file in place, it will be replaced upon the next update to ST, and you will lose your changes completely.
0 Likes
#8

Useful to note those the upgrade path thanks.

So Just having a read of the the file - can I add a new match in? I don’t really want to break any existing functionality (and I want this to be highlighted in general - just not in this specific case).

I’m reading https://www.sublimetext.com/docs/3/syntax.html and I get the idea behind the context though obviously it might be hard to find the right one. But if I work that bit out I’m not sure what scope refers to. I’m guessing if I want a completely new match, I’m going to need a new scope - but I can’t see where these might live?

0 Likes
#9

ah good point, I hadn’t considered how the . affects the context. Probably it’s not going to be that easy to do this without breaking anything…

scopes can be absolutely anything - but certain functionality might depend on certain scopes. For example, obviously, the color scheme is one. Another example could be auto completion etc. or some functionality in more complex plugins.

I would suggest leaving the scopes as they are currently, and append something like meta.hide.me.IPWright83 on to the end of them, which you could then target in your color scheme.

0 Likes
#10

OK - I might give that a whirl and follow up later. I appreciate your help as even looking at the docs I feel like I’m poking around in the dark a little at the moment.

0 Likes
#11

Not been able to get my head around how to do this exactly, so I’ve tried to simplify the problem. Instead I’ve decided to just to re-style the highlighting of this within the Monaki theme. I’ve 2 questions if you don’t mind:

  1. I’ve saved a new .thTheme in my %APPDATA%\Sublime Text 3\Packages\User\ directory. I’m not sure how I actually load it into Sublime though?

  2. I thought just creating a new dict entry and changing the scope would work. I tried something like this:

<dict>
   <key>scope</key>
   <string>variable.language.this.js</string>
   <key>settings</key>
       <dict>
	   <key>foreground</key>
	   <string>#FF0000</string>
       </dict>
</dict>

As I’ve not managed to load the theme yet I don’t know if this works. But the scope that I’ve sent doesn’t seem to match the style of any existing scopes so I imagine I’m missing something?

0 Likes
#12

not sure if a typo, but should be .tmTheme.

You can set it as the color scheme by setting the color_scheme setting in your user preferences:

"color_scheme": "Packages/User/IPWright83sCustomMonokai.tmTheme"

I think your number 2 should be correct. You may need to restart ST3 and close/re-open all open documents after changing (something in) the color scheme before you will see it.

1 Like
#13

Thanks for your help. Managed to get something working :slightly_smiling:

0 Likes
#14

Super, glad to hear it :slight_smile:

0 Likes