Function Call Color (typescript / javascript)


#1

Hi There:

New to Atom. It seems great. Right now, however, my function calls (in Typescript, also seems to be the case in Javascript) do not have any coloring effect. They are plain black, as opposed to, say, in Sublime Text, where they are green. Seems to be the case in any theme I use–atom-default or separately installed.

For example, in the following code (in a typescript file):

ngOnInit(){
    function greatFunction(){
   }
}

the words “ngOnInit” and “greatFunction” are plain black, instead of some other distinguishing color. How can I change the color of the function calls?

By the way, I have downloaded atom-typescript, and it seems to otherwise be working fine.

Thanks!


#2

Hi there, welcome to Atom!

In Atom (and Sublime Text I believe) syntax highlighting is a two part process. For effective syntax colours, you need:

  • A grammar package (ones with the name language-something; a JavaScript one is built in)
  • A theme

The grammar package is responsible for giving each character a set of scopes. These scopes represent information about the character. For example, characters in a JS comment might have the scope comment.line.js. You can check the scope of a character by running Editor: Log Cursor Scope in the command palette.

By themselves, scopes don’t do anything. However, your theme will have a bunch of rules that link colours to specific sets of scopes. For example, there may be a rule that says comments (scopes that start with comment) should be italicised grey. Likewise, there could be a rule that colours the entity.name.function scope a certain way.

In fact, the built in one-dark-syntax theme has a rule for this.

.syntax--entity {
  &.syntax--name.syntax--function {
    color: @hue-2;
  }

It’s a little hard to read, but basically just ignore the syntax-- parts and see that it’s giving the @hue-2 colour (defined elsewhere) to entity.name.function.

With your code, this theme makes it look like the following (regular text colour is white):

49%20am

In your case, (assuming you are using language-js) it seems the theme you are using does not have support for this scope. As I’ve shown, one-dark-syntax supports it quite well. If you prefer light themes, there is one-light-syntax (also a builtin). I have not tested with language-typescript, but I believe it also has scopes for the function names.

Check your current theme to see if the author intentionally limited the variety of colours (so-called ‘minimalistic’ themes). If not, you might want to raise an issue on their GitHub repo, and let them respond.


#3

Thank you for this excellent explanation. That clarifies a bunch for me. Unfortunately, the function calls continue to not be highlighted. I have reviewed my packages, and I have a variety of language packages, like “language-javascript” and “language-typescript”. I have also switched to the “one-dark-syntax” theme.

Still, the code does not show up for me like it does in your screen shot. For me, the words “ngOnInit” and “greatFunction” continue to be in plain text color (gray in the one-dark-syntax theme). The word “function” is purple, but no action on the others.


#4

Can you post a screenshot of what you see? I think you can just drag the image into the comment box, and it will automatically upload it.


#5

Sure. Here is a snippet of the typescript file:


#6

OK, it seems TypeScript scoping is a little strange. I don’t use it, so I can’t really tell / explain what’s happening, but you can try adding the following to your styles.less file:

atom-text-editor .syntax--meta.syntax--definition.syntax--function {
  color:  /* the colour */
}

It’s a little buggy for me (e.g. let x = function() {}), but work reasonably well. Change the colour to anything you like, and I believe there are some named variables that match colours in your current theme.


#7

Thanks! That worked for most of the themes I have, so definitely a step up. That has helped me a long way. Would you happen to know what the css reference is for function arguments?

(and I think I will leave it there for questions for today.)


#8

such as the word “input” in

function greatFunction(input){

}

#9

Put your cursor somewhere on input and then run the Editor: Log Cursor Scope command from the Command Palette. The last one in the list is the most specific one.


#10

Thanks. Result:

Scopes at Cursor

source.ts
variable.other.readwrite.ts


#11

With the scope reference in hand, what is the css reference I use to adjust that attribute?


#12
.variable.other.readwrite.ts {
  color: #FFFFFF;
}

#13

Thanks for all the help. At this stage, that is not working. I wonder if there is a deeper setting issue with my typescript. Several of the elements of the page (the functions, parameters, variable declarations) seem to be acting strangely in terms of theme colors. I’ll probably look around a bit further. If anyone has seen things that cause typescript files to be read strangely in atom, I would appreciate if you would let me know. This is a brand new build of atom (yesterday), with updated package versions.

I have downloaded just two packages: atom-typescript and platform-ide-terminal. Downloaded a lot of themes. And otherwise have the default Core Packages, like the “languages” packages.


#14

My bad, I got distracted and completely forgot about a quirk of how Atom’s stylesheets are namespaced. For all the classes inside a TextEditor, they’re prefixed with syntax--. So try this:

.syntax--variable.syntax--ts {
  color: #FFFFFF;
}

#15

Thanks. That did it.


#16

How did you figure out how to put the scope definition into css (ie less)?

For example, I am looking to change the css of an item scoped as:

meta.class.ts
keyword.control.export.ts

I have tried taking that and putting it into the .syntax–meta.syntax-- … format with various combos in css but no luck so far.

Is there somewhere I can look that up?


#17

You can take a look at the exact DOM structure by opening the developer tools (View -> Developer -> Toggle Developer Tools) and searching for the text in question. I think I can guess at what you’ll find, though. .syntax--meta.syntax--class has two class names and isn’t very specific. Lots of things are going to be under meta.class.ts, and many of those things will have colors applied. Since keyword.control.export.ts is inside meta.class.ts, anything that applies color to .syntax--keyword will override the parent .syntax--meta.syntax--class styling.


#18

That got me just what I wanted here. Thanks. I wanted to italicize different properties that, it turns, out, are “keywords”.

So this is working:

    .syntax--keyword {
      font-style: italic;
    }