Repository navigation
Suggestions for jsx attributes should include ="" #38891
Description
TS Template added by Matt Bierner (@mjbvz)
TypeScript Version: 3.9.4
Search Terms
- suggest, suggestion, completions
- snippet
- react, jsx
In vscode the autocomplete for className just adds className in webstorm it adds className="" is there a way in vscode to get it to add the additional =""?
I'm not sure currently where the autocomplete comes from, whether it is inbuilt into vscode or comes from the React plugin I use (although it doesn't appear to be in their snippets).
https://github.com/dsznajder/vscode-es7-javascript-react-snippets
Activity
[-]REact autocomplete for className misses ="" like webstorm[/-][+]Suggestions for jsx attributes should include ="" [/+]mjbvz commentedon Jun 2, 2020
Potentially related to #25207
If there is enough interest in this, we should also consider what happens when a user wants to write:
className={expr ? 'a': 'b'}barclay13 commentedon Jun 2, 2020
Matt Bierner (@mjbvz) webstorm/pycharm etc... has an option for completion on jsx attributes to be
braces,quotes,noneorbased on type. Based on type defaults to className using quotes and the others using\{}. Which works pretty well.(pic of the jsx completion options below)
andrewbranch commentedon Aug 26, 2021
IMO the options should be
(wording negotiable). An option for quotes always is nonsense. What to do for union types that include strings and non-strings, or for
anyandunknown, is debatable. Inserting braces seems fine; keeping existing behavior and not inserting the=seems fine; inserting just the=with no braces or quotes seems fine.armanio123 commentedon Sep 15, 2021
Based on type makes sense to me as, it can also be used to avoid adding the suggestion to boolean attributes. For the union types scenario, unless is union with
undefined, I think everything should be on braces.Options:
merlinaudio commentedon Oct 8, 2021
Just wanted to leave a big thank you for adding this, super helpful 😄
shayded-exe commentedon Aug 10, 2022
If I have it set to braces, it will auto complete a given attribute with braces once.
If I ctrl+z and try completing it again, it just completes the attribute name without braces.
andrewbranch commentedon Aug 15, 2022
I can’t reproduce that behavior:
Kapture.2022-08-15.at.12.20.29.mp4
Feel free to file a new issue with more repro info. This one should have been closed as completed.
Strate commentedon Nov 23, 2022
It would be nice to auto add braces / quotes when
=symbol pressed (like in webstorm).This is VSCode:
2022-11-23.14.03.33.mov
And this is WebStorm:
2022-11-23.14.05.36.mov
andrewbranch commentedon Nov 23, 2022
Artur Eshenbrener (@Strate) I think that would require a new VS Code API; there’s nothing that I know of where an editor asks us to auto-insert code upon insertion of a previous character. Feel free to leave your suggestion on the VS Code repo (be sure to search for duplicates first).
Strate commentedon Nov 24, 2022
Andrew Branch (@andrewbranch) isn't auto-closing jsx tag almost same feature?
2022-11-24.13.28.57.mov
andrewbranch commentedon Nov 28, 2022
That feature exists purely on the VS Code side; they don’t ask TypeScript for any info to make that happen.