Emmet 自动完成功能在 JSX 中不起作用

Posted 2023-02-21

【中文标题】Emmet 自动完成功能在 JSX 中不起作用

【英文标题】：Emmet autocomplete is not functioning in JSX

【发布时间】：2019-01-08 02:20:15

【问题描述】：

我是 Visual Studio Code 的新手，正在尝试让 emmet 在 JSX 上工作。我读到我必须在我的设置中使用以下代码，但它仍然无法正常工作。任何人都可以为我解决问题吗？

"emmet.includeLanguages": 
      "html": "html",
      "javascript": "javascriptreact",
      "xml": 
        "attr_quotes": "single"
      
    ,
    "emmet.triggerExpansionOnTab": true 

【问题讨论】：

您是否为此尝试过 github 问题中的任何内容？ github.com/Microsoft/vscode/issues/4962

如果你的 JSX 文件有一个像 home.js 这样的 JS 扩展名，那么 VSCode 会将它们解释为 javascript 文件而不是 javascriptreact。为此，您必须进行设置并更改文件关联属性。

【参考方案1】：

我发现 Emmet 有时会“忘记”在 JS 文件中查找 HTML，但它仍然可以在 JSX 和 CSS 文件中工作。所以我放了几行来“提醒” Emmet 在 js 文件中的外观 HTML，与它们相关联，这里是：

"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": 
    "javascript": "javascriptreact"

或者这个：

"emmet.triggerExpansionOnTab": true,
"files.associations":  "*.js": "javascriptreact" 

这里是source

【讨论】：

谢谢你让我开心。第二个选项对我有用。

【参考方案2】：

这对我有用：

"emmet.includeLanguages": 
  "html": "html",
  "javascript": "javascriptreact",
  "xml": 
    "attr_quotes": "single"
  
,
"emmet.triggerExpansionOnTab": true

与您的代码的唯一区别是我删除了最后一个花括号，因此它正确地包含在 settings.json 对象中。如果您希望这些设置适用于您的所有文件和项目，请确保更改位于您的 USER SETTINGS 中。

Here is the VSCode related documentation for Emmet configuration.

【参考方案3】：

如果在 vs 代码中的设置中添加 emmet for React 后仍然无法正常工作

"emmet.includeLanguages": 
    "javascript": "javascriptreact"

然后尝试在 HTML 文件中自动完成一次，现在它应该可以在 React 中工作了。