Vscode: [js] highlight method & function references

[sebreh]

In VS Code (0.10.10 or earlier), methods are not highlighted. I know a lot of work has gone into improving the highlighting, but to me method calls is one of the most important ones to highlight, and a showstopper personally for working effectively with my code. Here is a comparison screenshot of a code snippet in Atom and VS Code. As you can see, Atom highlights the method names as expected (blue), but in VS Code variables and methods are all the same.

This does not seem to be theme specific either, since I tried it with the --disable-extensions flag too using the default theme.

I hope this is fairly easy to add, because I am extremely impressed with the speed and overall features of VS Code, and would love to be able to use it full time!

Keep up the good work :+1:

[lepkon]

I fullyagree, in fact I have switched to Atom for that ONE reason and only use VScode for git as I can easily copy and paste comment to git.

[felixfbecker]

To be fair, Atom's color theme is _extremely_ colorful, it almost looks childish to me. So I would not want Code's theme to look completely like Atom's. But look at this snippet in Code:

Promise.all(connections.map(connection =>
    connection.sendBreakpointListCommand()
        .then(response => Promise.all(
            response.breakpoints
                .filter(breakpoint => breakpoint instanceof xdebug.ExceptionBreakpoint)
                .map(breakpoint => breakpoint.remove())
        ))
        .then(() => {

8 lines of TypeScript code without any color at all. It feels like I'm programming in Notepad. I know, this also contains some bugs, for example instanceof should be highlighted as a keyword. But even then, at least in the Dark/Light+ themes, syntax highlighting should not be restricted to only color keywords, strings, comments and symbols, but also method names and operators.

[dmurawsky]

I used to have function and method highlighting but it's gone since the update that added code-folding

[aeschli]

@dmurawsky What theme were you using? Is it with JavaScript? In the default themes we never had an method and function _references_ highlighting. We highlight the _definitions_ in the Light+/Dark+ themes. Make sure you are using one of these.

[dmurawsky]

Nice! I went to Preferences -> Color Theme and switched it from "Dark (Visual Studio)" to "Dark+ (default dark)" and got even more coloring than I had before.

[felixfbecker]

@aeschli my screenshot from above is with Dark+ though.

[aeschli]

@felixfbecker Your code snippet happens to contain no element that we color. Except 'instanceof' which is a https://github.com/Microsoft/TypeScript-TmLanguage/issues/37

That happens to be the design of our default themes.

[felixfbecker]

@aeschli Yeah, and I think that is not appropiate for a "colorful" Dark+ theme. At least one of

• method names (.then(), .all())
• properties (response.breakpoints)
• operators (=>)
• variables (connections)

should get a some color. It seriously feels like I'm writing in Notepad, it is hard to read the code. I have snippets like this everywhere.

[jefkoslowski]

I totally agree with the OP. Please, support method/function highlight like Atom/ST does. Another screenshot (source https://twitter.com/markgdyr/status/709717800860913664):

To be fair, Atom's color theme is extremely colorful, it almost looks childish to me. So I would not want Code's theme to look completely like Atom's.

I think this should be a theme author decision, its not VS Code responsibility.

[egamma]

For now we have made an extension available that is based on the atom-js grammar, please give it a try.

Extension: https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-atom-grammar

[sebreh]

Nice! Mostly works except that arguments to global functions doesn't seem to be properly identified and highlighted. They all end up the same color. See screenshot to compare to instance method:

In the screenshot, I would expect the string argument to the global function to have the same green color as the one passed to the instance method.

[whitecolor]

Needed for typescript

[empz]

This has just been implemented in the Typescript TextMate grammar files.
https://github.com/Microsoft/TypeScript-TmLanguage/pull/270

Will it be released in the next VSCode version?

[saada]

@egamma that's nice but it doesn't work with all themes :(

[egamma]

@emzero yes, the next version of vscode will include the new tmGrammar out of the box.

You can give it a try from our insiders build today: http://code.visualstudio.com/Download#insiders

[empz]

@egamma I'm already using the insiders build but with the "Latest TypeScript and JavaScript Grammar" extension. Not sure if this is needed or not.

[egamma]

@emzero you no longer need the extension, it is included in the typescript/javascript support that comes with the insiders version.

[mjbvz]

I just tried out some of the example snippets that have been shared, and the bulk of the identified issue seem to have been resolved in 1.7+. Here's screenshots using the dark+ theme:

Most of the built in themes also seem to work, although some are intentionally less colorful:

Closing this issue, but please open bugs if you notice any problems or have ideas on how syntax highlighting could be further improved.

Thanks.

[omerdn1]

What are you guys using to highlight references? This feature does not come with my VSCode by default and I've tried some extensions that didn't work. @aeschli

[mjbvz]

@omerdn1 I don't understand what you are asking here. Can you please file a new issue with a small example and an explanation of the expected behavior