英文:
How to make VSCode Emmet auto-import on tab expansion a React component
问题
The problem is that depending on the way I auto-complete a React component name while typing it, Visual Studio Code does or does not import the component at the top of the file. There are two ways:
- Type in the opening bracket ("<"), begin typing in the component name, accept the VSCode suggestion to import it, then type the rest of the name with its closing bracket, and then let VS Code auto closing tag feature do the rest. The output will always be like
<Component></Component>
- Start typing the component name directly (with no "<"), emmet suggestion will show up, and then you can optionally type "/" at the end of the name (to make it self-closing tag) then tab and the emmet expansion happens. Output can be
<Component></Component>
or<Component />
With option 2 I won't get the import added to the top of the file like with option 1. But it is way more powerful and productive as I can use emmet features like adding ids, classNames, arbitrary properties, nest components inside it and setting inner text all in one go, example:
CustomPanel.std-pnl>CustomImage[someProp={someValue}]/+CustomButton#btn-1.std-btn[onClick={onClickHandler}]{This the button text}
If I emmet expand that it results in:
<CustomPanel className="std-pnl">
<CustomImage someProp={someValue} />
<CustomButton id="btn-1" className="std-btn" onClick={onClickHandler}>This the button text</CustomButton>
</CustomPanel>
Is there a way (settings or something) to tell emmet expansion to import the component names being expanded? Just like the normal IntelliSense suggestion does it.
My current config of these tools:
VS Code version 1.77.3
Emmet enabled in vscode settings.json:
"emmet" {
"includeLanguages": {
"javascript": "javascriptreact",
"typescript": "typescriptreact"
},
"showExpandedAbbreviation": "always", // this is the default, no need to add it explicitly
}
I have also tried changing this in settings.json (but no difference):
"js/ts.implicitProjectConfig.checkJs": true,
英文:
The problem is that depending on the way I auto-complete a React component name while typing it, Visual Studio Code does or does not import the component at the top of the file. There are two ways:
- Type in the opening bracket ("<"), begin typing in the component name, accept the VSCode suggestion to import it, then type the rest of the name with its closing bracket, and then let VS Code auto closing tag feature do the rest. The output will allways be like
<Component></Component>
- Start typing the component name directly (with no "<"), emmet suggestion will show up, and then you can optionally type "/" at the end of the name (to make it self-closing tag) then tab and the emmet expansion happens. Output can be
<Component></Component>
or<Component />
With option 2 I won't get the import added to the top of the file like with option 1. But it is way more powerful and productive as I can use emmet features like adding ids, classNames, arbitrary properties, nest components inside it and setting inner text all in one go, example:
CustomPanel.std-pnl>CustomImage[someProp={someValue}]/+CustomButton#btn-1.std-btn[onClick={onClickHandler}]{This the button text}
If I emmet expand that it results in:
<CustomPanel className="std-pnl">
<CustomImage someProp={someValue} />
<CustomButton id="btn-1" className="std-btn" onClick={onClickHandler}>This the button text</CustomButton>
</CustomPanel>
Is there a way (settings or something) to tell emmet expansion to import the component names being expanded? Just like the normal IntelliSense suggestion does it.
My current config of these tools:
VS Code version 1.77.3
Emmet enabled in vscode settings.json:
"emmet" {
"includeLanguages": {
"javascript": "javascriptreact",
"typescript": "typescriptreact"
},
"showExpandedAbbreviation": "always", // this is the default, no need to add it explicitly
}
I have also tried changing this in settings.json (but no difference):
"js/ts.implicitProjectConfig.checkJs": true,
答案1
得分: 1
不,Emmet不支持这样的功能,因为它只是将小缩写转换为完整代码片段的通用方式。
但听起来是一个有趣的功能,将考虑如何支持它。
英文:
No, Emmet doesn’t support such feature, since it’s just a generic way to convert small abbreviation into a full code fragment.
But is sounds like an interesting feature, will think about how to support it
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论