如何在按Tab键扩展时使VSCode Emmet自动导入React组件

huangapple go评论50阅读模式
英文:

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:

  1. 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>
  2. 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:

  1. 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 &lt;Component&gt;&lt;/Component&gt;
  2. 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 &lt;Component&gt;&lt;/Component&gt; or &lt;Component /&gt;

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&gt;CustomImage[someProp={someValue}]/+CustomButton#btn-1.std-btn[onClick={onClickHandler}]{This the button text}

If I emmet expand that it results in:

&lt;CustomPanel className=&quot;std-pnl&quot;&gt;
  &lt;CustomImage someProp={someValue} /&gt;
  &lt;CustomButton id=&quot;btn-1&quot; className=&quot;std-btn&quot; onClick={onClickHandler}&gt;This the button text&lt;/CustomButton&gt;
&lt;/CustomPanel&gt;

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:

&quot;emmet&quot; { 
  &quot;includeLanguages&quot;: {
    &quot;javascript&quot;: &quot;javascriptreact&quot;,
    &quot;typescript&quot;: &quot;typescriptreact&quot;
  },
  &quot;showExpandedAbbreviation&quot;: &quot;always&quot;, // this is the default, no need to add it explicitly
}

I have also tried changing this in settings.json (but no difference):

&quot;js/ts.implicitProjectConfig.checkJs&quot;: 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

huangapple
  • 本文由 发表于 2023年4月19日 19:31:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/76053987.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定