Update for new `javascript.inlayHints`

[tbeseda]

VS Code just released a feature to inlay JS hints about types around parameters, variables, props, etc.

There are 6 options to control what types of hints are inlaid. So naturally I enabled all of them 😄
This is definitely overkill, but it does demonstrate how Cobalt2 handles those inlays:

I think this color might be a bit much. Maybe knocking down the opacity, or something more muted like Code's default Dark+:

Love the theme, btw ❤️

[aharvard]

@wesbos, cool if I pick this up?

@tbeseda can you post a gnarly code sample that we can test against? Thanks!

[tbeseda]

@aharvard Here's a vanilla TS example that you can just paste into a new .ts file in Code. (I picked TS for the sample to really amp up the inlay count in the view)

import { createServer, IncomingMessage, ServerResponse } from 'http';

const server = createServer((sent: IncomingMessage, res: ServerResponse) => {
  const body = <Buffer[]>[];

  sent.on('data', (data: Buffer) => body.push(data));
  sent.on('error', (err) => {
    console.error(err);
  });
  sent.on('end', () => {
    const message = Buffer.concat(body).toString();

    console.log(message);
  });

  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('pong');
});

server.listen(8080, 'localhost', () => {
  console.log('Server running at https://localhost:8080/');
});

In your Code preferences, enable all TS inlay settings and it should look similar to:

You can search "typescript inlay" in your settings to quickly find those settings to enable.

[aharvard]

Thanks. I've got a few options for us to consider but happy to try out other color combos as well.

What do y'all think?

Option 1

"editorInlayHint.foreground": "#06253a" "editorInlayHint.background": "#6289ab"

---

Option 2 (same color as comments)

"editorInlayHint.foreground": "#0088FF" "editorInlayHint.background": "#1e2f3a"

---

Option 3 (same color as interfaces)

"editorInlayHint.foreground": "#ff68b8" "editorInlayHint.background": "#193549"

[tbeseda]

Great examples! I'll defer on actual color choices, but I would say that I'd like a scheme that makes it apparent that the inlay tokens are not actual code or characters in the file. Option 1 seems most clear in that respect.

[aharvard]

Oh, that's a great point. I agree that it makes sense to distinguish from written code. To that end, I feel like we need a couple more options.

@wesbos, you got a pref?

Option 4

"editorInlayHint.foreground": "#dbb427" "editorInlayHint.background": "#ffc80027"

---

Option 5

"editorInlayHint.foreground": "#ffffff79" "editorInlayHint.background": "#1F4662"

[aharvard]

Hey @wesbos, you got any preference on this?

[Sanqui]

The Python extension just now also got these inlay hints, you can enable them with

"python.analysis.inlayHints.functionReturnTypes": true,
"python.analysis.inlayHints.variableTypes": true

Currently they're as noisy as the first screenshot shows. I like both variant 4 and 5, I'd probably go with 5 to begin with.

Would be awesome to get this implemented, I'd like to keep on using Cobalt.

[hobbeshunter]

Hey, Option 5 looks very good.

I would like to see it shipped ;)

[wesbos]

Hey folks - so sorry I missed this for an entire year! Ill look at this all soon

[wesbos]

THoughts? You can tinker but making a ./.vscode/settings.json file in your project.

{
  "editor.inlayHints.padding": true,
  "editor.inlayHints.fontFamily": "sans serif",
  "editor.inlayHints.fontSize": 10,
  "workbench.colorCustomizations": {
    "editorInlayHint.foreground": "#ff68b8",
    "editorInlayHint.background": "#0000001a",
  }
}

[wesbos]

I think comment colour makes sense as well..

[aharvard]

I forgot about this issue! Nice to hop back in :)

My suggestion

I like the pink!

I lean towards the same text color used for types and interfaces with the background slightly darkened for a couple of reasons:

1. the pink text color ties together the mental model of types
2. the background color helps distinguish hints from hand-rolled TS

"editorInlayHint.foreground": "#ff68b8",
"editorInlayHint.background": "#0000001a"

Other thoughts

Typography settings

I recommend we leave padding, fontFamily, fontSize values to the workspace to manage. The fontSize: 10 seems a little arbitrary and may not jive well with whatever a dev's editor.fontSize is set to.

However, we should def encourage folks to dial these settings in to make it work well for their personal preferences.

Comment color

While this is totally subjective, if the hint color is the same as the comment, things might get muddy.

[wesbos]

yeah I agree with everything you said. Kind of weird that you can't set the font size or family via the theme but we can add it to recommended settings.

the comments look bad too.

Gonna merge and ship pink

[aharvard]

Sweet. @wesbos, want me to PR it, or ya got it?

[wesbos]

yeah a PR would be great

[aharvard]

PR is up!

[wesbos]

I published a new version of this extension and I lost the inlay hints coloring. Will investigate

[wesbos]

Fixed! I had multiple remotes and I published the wrong one. Sorry folks