Change VS Code autocomplete attribute type for className from string to object

Question

I'm working in NextJS using Typescript and CSS Modules and I'm wondering if there's a way to change the type of the autocomplete suggestion. Currently, when I hit enter on the suggestion from the screenshot below, I get className="". This is fine but it is slightly annoying since I'm working with CSS Modules because I have to delete the quotation marks and replace them with an object. So what I'm looking for is a way to have the built-in className autocomplete to className={}. Is it possible to achieve this without user snippets? I just want to avoid having two suggestions for className.

starball · Accepted Answer · 2024-07-13 22:42:57Z

The best thing I'm aware of at the time of this writing is changing the typescript.preferences.jsxAttributeCompletionStyle setting from "auto" to "braces". The downside of that is that you really only wanted to change the type for the classname attribute, and this will change the type for all attributes. I don't know of a way to change the types of individual attributes. The backing functionality is part of the TypeScript project itself (VS Code bundles a distribution of TypeScript). If you want to go take a look at that side of things, the PR that first added this functionality to TS is https://github.com/microsoft/TypeScript/pull/45903/files#diff-4237fd08a5f920543e184b7748bc8ae000d9b1c031810ba375b0053362ec2b6aR689.

Note that globally adding custom attributes to React types is a known solved problem (see How do I add attributes to existing HTML elements in TypeScript/JSX?), but I'm not sure about editing types of values for properties of React.HTMLAttributes<T>.

Collectives™ on Stack Overflow

Change VS Code autocomplete attribute type for className from string to object

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related