logo标签列表

Visual Studio Code 中 JSX 或 HTML 自动完成

reactjsautocompletevisual-studio-codejsxemmet
147
有没有办法在Visual Studio Code中使用组件或HTML补全呢？因为当我们使用像Bootstrap这样的类时，手动输入每个字母并不是一个好主意。例如Emmet中的补全： ul>li*2>a

有没有办法在Visual Studio Code中使用组件或HTML补全呢？因为当我们使用像Bootstrap这样的类时，手动输入每个字母并不是一个好主意。例如Emmet中的补全： ul>li*2>a

var React = require('react');

var Header = React.createClass({
    render: function () {
        return (

            <nav className="navbar navbar-defaullt">
                <div className="container-fluid">
                    <a href="/" className="navbar-brand">
                        <img width="50" height="50" src="images/logo.png" alt="logo" />
                    </a>
                    <ul className="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/#about">About</a></li>
                    </ul>
                </div>
            </nav>

                );
                }
                });
module.exports  = Header;
1
请参阅 https://github.com/microsoft/vscode/issues/18427#issuecomment-286013222。 - Shivam Jha
23个回答
303

2023: 为React项目中的.js文件添加JSX / HTML自动完成的简单方法...

首先，通过按下Ctrl+,（或Mac上的Cmd+,）来打开VSCode的设置。然后...

使用JSON设置：

  1. 从设置中，点击下面显示的“打开JSON”按钮以打开settings.json。如果您不想全局设置此项，可以在项目根目录下创建一个.vscode/settings.json文件。

settings.json文件按钮

  1. 在settings.json中添加以下JSON值：

     "emmet.includeLanguages": {
     "javascript": "javascriptreact"
 },
 "emmet.syntaxProfiles": {
     "javascript": "jsx"
 }

使用设置界面进行设置：

请注意，Emmet: Syntax Profiles 仍然需要打开settings.json（如上所示），但对于任何寻求此信息的人，这里有...

从设置中，使用搜索栏找到 Emmet: Include Languages

点击“添加项目”然后添加一个从 javascript 到 javascriptreact 的映射。

1
"javascript": ["javascript", "javascriptreact"] - 将其设置为 .js 和 .jsx 文件。 - Eduard
4
这个方法有效！但是如果你打开了建议选项，按下tab键会自动选择列表中的顶部建议......解决方法是使用"编辑器：快速建议延迟”设置一个延迟时间。将其设置为600或其他值，这样你就可以输入元素->按下tab键->完成操作。 - jscul
谢谢你的回答！它完美地运行了！ - maninekkalapudi
同时别忘了把showExpandedAbbreviation修改为always。如果在settings.json文件中是这样的："emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"，那么这些设置将不起作用。或者只需进入“显示扩展缩写”部分，将其设置为默认值“始终”。 - Okiemute Gold
168

Visual Studio Code默认支持检测.jsx扩展名并添加Emmet支持（我正在使用VS Code 1.8.1）。

但是，如果您更喜欢对所有React文件使用.js扩展名-您可以在VS Code窗口右下角将JavaScript React模式与.js文件关联。

如何逐步执行此操作（gif）

输入图像说明

更新2021年

对于那些只想复制粘贴代码的人：

"emmet.syntaxProfiles": {
  "javascript": "jsx"
}

如果上面的解决方案不起作用，请尝试这个：

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

使用 VS Code v1.56.2 进行测试。

请问您能否再详细解释一下最后一部分？我需要将所有的React文件都使用.js作为扩展名。 - Axel
2
从gif中不明显的是，他在按TAB获取自动完成之前按ESC手动退出智能感知窗口。 - Josh McKearin
4
如果您喜欢纯文本，请将 "emmet.syntaxProfiles": { "javascript": "jsx" } 添加到用户设置中…（该设置可使您的代码编辑器更好地识别 JSX 语法） - Jake Rayson
17
"emmet.triggerExpansionOnTab": true, "emmet.includeLanguages": { "javascript": "javascriptreact" }请为我执行此操作。 - Benyam Ephrem
第二个对我来说完美无缺，谢谢！ - Fatihi Youssef
还有，别忘了将showExpandedAbbreviation更改为always。如果在settings.json文件中是这样的"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",那么这些就不会起作用。或者直接进入“显示扩展缩写”部分，并将其设置为默认值“always”。 - Okiemute Gold
62
如果有人仍然在解决这个问题： 我发现只需设置 

"emmet.syntaxProfiles": {
     "javascript": "jsx" 
 },

不支持HTML自动完成。但是，可以使用：

"emmet.includeLanguages": {
    "javascript": "html"
}

根据 emmet 文档：

"emmet.includeLanguages": {}

启用 emmet 缩写在默认不支持的语言中。在此处添加语言和 emmet 支持语言之间的映射。
例如：{"vue-html": "html", "javascript": "javascriptreact"}

这对我有用。 使用 "emmet.includeLanguages": { "javascript":"javascriptreact", } 或者 "emmet.includeLanguages": { "javascript":"jsx", } 对我没有起作用。 - richinrix
53

只需在屏幕底部右侧选择适当的语言模式：将其设置为JavaScript React。

4
没问题，我会在每次重新打开 VS Code 时，针对大型项目中的每个文件都执行这个操作。 - julian soro
是的，很有趣 =) 更新后，它默认支持 jsx + emmet。 - Arif Dewi
1
默认支持什么？ - Muhammad Umer
1
完美！感谢您的回答。 - emilpmp
谢谢，目前是 JavaScript JSX。 - RezaNikfal
15

2018

我正在使用 VSCode (版本 1.27.2)

根据我的经验，即使我正在使用 React ，但是在我的 VSCode 上检测到的语言仍然是纯粹的 JavaScript。而且 emmet 也无法正常工作。

  • 使其重新工作的方法之一是将 VSCode 检测到的语言更改为 JavaScript React。这仅适用于单个 JS 文件。

vscode options

  • 要完全更改它，您需要关联它。

two

点击配置.js文件关联...

three

选择JSX，在我的情况下，我已经这样做了。

four

  • 如果工作场所设置都不适用于您，请进入偏好设置，或者使用ctrl + , (逗号)打开它。

输入并搜索emmet或Emmet。然后复制要覆盖的设置。在我的情况下：

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

注意：我没有尝试使用jsx，只使用了javascriptreact。

settings

我已经实现了第二步和第三步。现在我可以使用Emmet。

可视化有所帮助，谢谢。 - Ram Fattah
13

2020年的简单答案

首先，在窗口的底部中心右侧选择“文件关联”。 输入图像描述

其次，在窗口顶部中心下拉菜单中选择“配置.js文件关联”，将其更改为JavaScript React。 输入图像描述

1
你的截图非常有帮助，它起作用了。在 VS Code 更新到 1.62.3 后，我无法做到这一点，但是遵循你的截图帮助了我。谢谢。 - Mohammad Shohag
10

2022-2023: 以下GIF演示了为ReactJs启用JSX自动建议的简便现代方法。

Windows系统 => 文件(File) > 首选项(Preferences) > 设置(Settings)

MacOs系统 => 代码(Code) > 首选项(Preferences) > 设置(Settings)

然后进入扩展(extensions) > emmet > 包括语言(include languages) 并添加 javascript 作为项目(item)，javascriptreact 作为值(value)

参考以下GIF中的步骤进行操作。

图像描述输入在此

10
一样的情况。最佳答案。 - Felipe Deveza
1
是的，我不想使用每个小功能的扩展。 - Muhammad Umer
9

2019 更新

.html、.js 和 .jsx 中的自动闭合标签

开箱即用。也就是说，在输入完开标签的闭合括号后，闭合标签将自动插入。

.jsx 文件中使用基本 HTML 的 Emmet

开箱即用。

.js 文件中使用基本 HTML 的 Emmet：

添加以下设置，以获得 Emmet 缩写建议，并确保制表符扩展始终正常工作。

  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

在 .js 和 .jsx 文件中使用自定义标记（如 React 组件）的 Emmet

添加以下设置：

  "emmet.triggerExpansionOnTab": true,

请注意，使用此设置时，Emmet将所有单词扩展为自定义标记（而不仅仅是React组件名称）。
另请注意，在使用Emmet将React组件扩展为自定义标记时，您必须从建议列表中选择组件名称并首先完成它（或手动输入整个名称并使用escape键关闭建议菜单）。单词扩展后，您需要再次按tab键才能使Emmet扩展自定义标记。
有一个活跃的功能请求，可能会删除这个额外的步骤（在选择建议时自动扩展，以便与扩展标准html标记的方式相同）。

故障排除

确保您使用的是最新版本的VSCode。

确保您没有更改以下默认设置：

"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,

// read the GitHub issue listed above if you're curious why this is required).
"editor.wordBasedSuggestions": true,

// you obviously don't want javascript, javascriptreact included in here if you want Emmet to be available in those files
"emmet.excludeLanguages": [
    "markdown"
],
6
  1. 只需进入vscode的设置。
  2. 在设置中可以看到搜索栏，输入“emmet”。
  3. 向下滚动，在“包括语言”选项中选择。
  4. 点击“添加项目”按钮。
  5. 将项目添加为javascript，值为javascriptreact。

如果您感到困惑，请参考下面的图片： enter image description here

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接