Visual Studio Code 中的 JSX 或 HTML 自動完成

Question

有沒有辦法在 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;

Answer 1

2019：React 的直截了當的答案

在您的 React 項目中獲得 JSX/HTML 自動完成的最直接的方法是將其添加到您的用戶設置或工作區設置（ <project-path>/.vscode/settings.json ）：

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

您可能需要重新啟動 VS Code 才能使更改生效。

PS 如果你沒有為 React.js 項目做這個映射，那么 KehkashanFazal 的答案可能對你有用。

Answer 2

Visual Studio 代碼默認檢測 .jsx 擴展並添加 emmet 支持（我使用的是 VS 代碼 1.8.1）

但是，如果您更喜歡對所有反應文件使用 .js 擴展名 - 您可以將 JavaScript React 模式與 VS Code 窗口右下角的 .js 文件相關聯。

如何一步一步地做到這一點（gif）

2021 年更新

對於那些只想復制粘貼代碼的人：

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

如果上述解決方案不起作用，請嘗試以下操作：

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

使用 VS Code v1.56.2 測試。

Answer 3

如果有人仍在為這個問題苦苦掙扎：

我發現只需設置

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

不啟用 HTML 完成。 但是，使用：

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

做。

根據emmet 文檔：

"emmet.includeLanguages": {}

在默認情況下不支持的語言中啟用 emmet 縮寫。 在此處添加語言和 emmet 支持的語言之間的映射。
例如： {"vue-html": "html", "javascript": "javascriptreact"}

Answer 4

只需在屏幕右下角選擇適當的語言模式：將其設置為JavaScript React。

Answer 5

2018

我正在使用VSCode (ver 1.27.2)

根據我的經驗，即使我正在使用React 。 在我的VSCode上檢測到的語言仍然是 vanilla JavaScript 。 並且emmet沒有工作。

• 讓它再次工作的方法之一是將VSCode檢測到的語言更改為JavaScript React 。 這僅適用於單個JS文件。

• 要完全更改一次，您需要關聯它。

單擊Configure File Association for .js...

並選擇JSX ，就我而言，我已經這樣做了。

• 對於工作場所設置，如果它們都不適合您，則為最后。 轉到 Preference of just to ctrl + , (comma)打開它。

鍵入並搜索emmet或Emmet 。 然后復制要覆蓋的設置。 就我而言：

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

注意：我沒有嘗試僅使用jsx javascriptreact 。

我實施了第二步和第三步。 我現在可以做Emmet了。

Answer 6

2020年的簡單答案

首先，選擇窗口右下角的文件關聯。

其次，從窗口頂部中心的下拉菜單中選擇Configure File Association for .js 。 將其更改為 JavaScript React。

Answer 7

這些解決方案都不起作用......但自動關閉標簽擴展確實有效！ https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Answer 8

2019 更新

---

.html、.js 和 .jsx 中的自動關閉標記

開箱即用。 也就是說，在開始標簽的右括號中鍵入后，將自動插入結束標簽。

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

開箱即用。

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

添加以下設置，這是 Emmet 縮寫建議所必需的，也是選項卡擴展一致工作所必需的。

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

Emmet 在 .js 和 .jsx 文件中都有自定義標簽（例如 React 組件）

添加以下設置：

  "emmet.triggerExpansionOnTab": true,

請注意，使用此設置，Emmet 會將所有單詞擴展為自定義標簽（不僅僅是 React 組件名稱）

另請注意，當使用 Emmet 將 React 組件擴展為自定義標簽時，您必須從建議列表中實際選擇組件名稱並首先完成該名稱（或手動輸入整個名稱並使用轉義鍵關閉建議菜單）。 單詞展開后，您必須再次使用 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"
],

Answer 9

我只是按照以下步驟解決了這個問題：

1. 在 VSCode 的左下角點擊 Javascript
2. 然后在頂部，您將看到一個列表，單擊“配置基於 'Javascript' 語言的設置”

3. 將這些行添加到文件中：

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

如果您想了解更多詳細信息，可以查看此鏈接。

Answer 10

為 ReactJs 啟用 JSX 自動建議的簡單而現代的方法如下面的 GIF 所示。

對於 Windows => 文件 > 首選項 > 設置

對於 MacOs => 代碼 > 首選項 > 設置

然后按照 GIF 中顯示的步驟操作。

Answer 11

我拋出了所有答案，這個配置對我有用。 必須包括語言以及添加語法配置文件。 沒有觸發器擴展沒有任何效果，但現在我只按 Tab 按鈕來獲得結果。

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

Answer 12

1. 只需進入 vscode 中的設置。
2. 您可以在設置類型 emmet 中看到搜索欄。
3. 向下滾動，有一個選項包括語言。
4. 單擊包含語言中的添加項目按鈕。
5. 將項目添加為 javascript，將值添加為 javascriptreact。

如果您感到困惑，請參考下圖：

Answer 13

您可以使用 Visual Studio Code 中的自動關閉擴展。 附言。 當您安裝擴展程序時，自動完成將無法工作，直到您重新加載 VS Code ，只需重新打開 VS Code ，或轉到自動關閉標簽擴展程序並單擊重新加載。

自動關閉標簽擴展的鏈接

Answer 14

在設置的 emmet 部分添加一個名為 javascript 且值為 javascriptreact 的項目對我有用。

我的設置的屏幕截圖

Answer 15

將擴展名從“.js”更改為“.jsx”就可以了。 但如果您想保留“.js”擴展名，請按照以下步驟操作。

去

文件 > 首選項 > 設置

在設置選項卡中，您將看到兩個名為“用戶”和“工作區”的選項卡（靠近搜索欄的底部）。 兩個選項卡都會顯示相同的設置，但用戶設置會影響 VS Code 中的所有項目，而工作區只會影響當前項目。 選擇您想要的任何選項，工作區或用戶。

然后在左側菜單欄上，你必須去

擴展 > JSON

然后在右側，您可以看到幾個設置。 向下滾動一點，你會看到類似這樣的東西。

JSON:模式
將模式關聯到當前項目中的 JSON 文件。
在 settings.json 中編輯

單擊“在 settigns.json 中編輯”。 它將打開一個 JSON 文件。 將以下代碼添加到 JSON 文件。

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

並保存文件。 現在去檢查你的 js 文件是否支持 jsx 自動補全。 這已經過測試

VS 代碼版本 1.61.2 。

PS -：以下部分僅適用於不了解 JSON 的學習者。

將上述代碼復制並粘貼到 settings.json 文件的底部，如下圖所示。 不要忘記添加逗號（由紅色箭頭指向），代碼應粘貼在最后一個右大括號（由黃色箭頭指向）之前。

如果您選擇工作區設置選項卡，那么您的 settings.json 文件中可能沒有任何內容。 如果是這樣，只需將代碼粘貼在大括號內。

Answer 16

我花了兩個步驟在 JSX 中獲得自動關閉標簽。

1. 按照上面 Kehkashan Fazal 的說明設置"emmet.includeLanguages"
2. 從 VSCode ( formulahendry.auto formulahendry.auto-close-tag ) 下載自動關閉標簽擴展

現在你有了很好的自動關閉 JSX 標簽！

Answer 17

只需執行以下兩個步驟：

1. 在檢測語言的 VSCode 底部單擊該

第一步

2. 單擊“配置'Javascript（Babel）'基於語言的設置...”或其他

第二步

3. 先用逗號“，”將這段代碼粘貼在上面，然后保存。

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

第三步

Answer 18

React Babel 的自動完成功能直到昨天對我來說都運行良好。

這些答案都沒有幫助，所以我只是重新啟動了計算機。 像魅力一樣工作；）

Answer 19

我正在從事各種項目，並且我有一個很大的設置文件。

我檢查了設置，發現這個設置毀了這一切。

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

所以我評論了它。 一切都在 React Apps 中完美運行。 謝謝

Answer 20

僅適用於 JSX 文件。 讓它不適用於 JS。

"files.associations": {
"*.js": "javascript",
"*.jsx": "javascriptreact",
},
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascriptreact": "javascriptreact"
},

Answer 21

只需將您正在處理的文件從.js命名為.jsx 。

Answer 22

Go 到設置 > 擴展 > emmet > 包含語言並添加 javascript 作為項目和 javascriptreact 作為值

Answer 23

轉到文件-->首選項-->設置在設置中搜索“emmet”

在 Emmet 下添加設置：Include Languages as

項目作為 javascript，值作為 html

設置圖片

然而，這僅適用於 html 標簽。