Add semantic highlighting type for **aliased** import types in JS/TS

TS Template added by @mjbvz

TypeScript Version: 4.1.5

Search Terms

• semantic highlight
• semantic tokens
• encodedSemanticClassifications

I feel it would be beneficial to be able to stylise aliases differently from normal types when using import as. A different style would allow the developer to see, at a glance, that the name is non-standard and has been modified in the local scope.

I often use aliases both for external libs and to disambiguate names from my local code (I use a folder/module namespacing method of file organisation for simplicity).

import { Formatter as RedisErrorFormatter } from 'lib/Redis/Client/Error/Formatter';
import { Client as RedisClient } from 'redis';
import { MongoClient } from 'mongodb';

// ...lots of code so imports are not visible...

RedisClient.registerFormatter(RedisErrorFormatter);
MongoClient.connect();

In the above example, RedisClient and RedisErrorFormatter would have the option to be highlighted differently, so that the fact that they were aliased is easy to recognise, without having to inspect the imports.

Start by reading the semantic highlighting and semantic tokens documentation, then trace the code related to encodedSemanticClassifications. Use the import examples in this issue to determine how aliased names are represented. Done means aliased import identifiers can receive a distinct semantic highlighting type without changing ordinary imported types.