jsx中的自動完成html標籤（崇高文本）

我希望能夠在我的react/jsx代碼中爲html標籤使用自動完成功能。它與html文件的工作方式相同。我可以配置崇高的文本3爲jsx文件啓用標記自動完成嗎？jsx中的自動完成html標籤（崇高文本）

2015-05-04 Igor Okorokov

您是否嘗試過任何JSX或Babel插件以查看它們是否滿足您的需求？ – WiredPrairie

是的，我使用babel-sublime，它做得很好，但不幸的HTML自動補全不起作用。 –

我不相信這是一個功能。 – WiredPrairie

值得關注的是，你可以通過複製實現崇高的內置標籤的JSX接近並稍微修改鍵入/與Default.sublime-package自帶。以下添加到您的自定義鍵盤佈局

{ "keys": ["/"], "command": "close_tag", "args": { "insert_slash": true }, "context": 
    [ 
    { "key": "selector", "operator": "equal", "operand": "(text.html, text.xml, meta.jsx.js) - string - comment", "match_all": true }, 
    { "key": "preceding_text", "operator": "regex_match", "operand": ".*<$", "match_all": true }, 
    { "key": "setting.auto_close_tags" } 
    ] 
}

假設你正在使用的巴貝爾包，選擇meta.jsx.js將匹配JSX語法，使標籤關閉行爲。其他程序包的作用域名稱可能不同，在這種情況下，您可以使用ScopeHunter來檢查由首選JSX語法應用的作用域。

來源

2016-12-12 04:45:11

這很好，實際上最好地解決了OP的問題。他沒有問：我如何在JSX中使用emmet。他問，我怎樣才能讓崇高的處理jsx處理html的方式。需要注意的一點是：你可能想把它放在用戶文件夾中的'Default.sublime-keymap'中，而不是更改基本的。 – btwebste

@btwebste你知道SublimeText嚴重依賴插件來擴展自己嗎？儘管這個答案適用於這個問題的有限範圍，但emmet是一個很好的工具，可以在你的工具帶中使用。不要誤解我的意思，我不質疑這個答案的偉大之處（我的upvote），但其他答案同樣好（尤其是因爲我們得到了OP所要求的，然後是一些答案）。 – Mrchief

我打算評論說有人應該爲此做一個插件。所以我做了：https：//github.com/FMCorz/AutoCloseTags。感謝你的回答！ – FMCorz

它不會自動關閉的括號內爲你，你鍵入的，但你可以用崇高的內置標籤接近與命令選項。 for mac，或alt。用於windows的。

來源

2015-06-15 12:44:54 myoung

在我的測試中，這對我來說根本不起作用。有人可以證實這在Sublime中對他們確實有效嗎？它可能依賴於一個插件。 – XML

不適合我。 –

@XMLilley適合我。我唯一的React專用插件是https://github.com/babel/babel-sublime。也許這會有所作爲，因爲它爲JSX文件提供語法高亮顯示。 – maxedison

我強烈建議組合babel-sublime和emmet。如果您指定「JavaScript（Babel）」作爲您的語法，那麼兩個軟件包將一起工作，如果需要，emmet會正確生成「className」和「htmlFor」。

唯一的缺點是擴展不能使用TAB，但使用CTRL + E。這是由於TAB在JavaScript中有一堆其他用法。

來源

2016-05-20 16:33:58 Martin

我已經安裝了這兩個軟件包，但沒有「JavaScript（Babel）」作爲_Syntax_菜單中的選項提供給我。 _JavaScript _選項有一個彈出式菜單，但這裏只列出了_JavaScript_和_JSON_。對此有何洞見？ – IsenrichO

完美地工作..感謝 –

@IsenrichO在我的機器上，它列在（Babel） - > JavaScript（Babel）下。 – SherylHohman

安裝：通天&埃米特

然後添加到您的鍵綁定這 - 用戶

{ 
    "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [ 
     { 
      "operand": "source.js", 
      "operator": "equal", 
      "match_all": true, 
      "key": "selector" 
     }, 
     { 
      "key": "selection_empty", 
      "operator": "equal", 
      "operand": true, 
      "match_all": true 
     } 
    ] 
}, 
{ "keys": ["tab"], "command": "next_field", "context": 
    [ 
     { "key": "has_next_field", "operator": "equal", "operand": true } 
    ] 
}

來源

2016-06-27 17:48:34

要編輯「鍵綁定 - 用戶」是在「首選項>鍵綁定」，然後正確的。 –

如果你已經安裝好babel，試試打開你的.js和.jsx文件，然後進入查看>語法>用當前..> babel> javascript（babel）打開所有文件，查看正確的語法高亮顯示並使用CTRL + E自動完成你的.jsx中的html標記

來源

2017-11-03 03:50:52

這是你的問題嗎？ –

根據Daniel的回答，我爲此製作了一個插件。

來源：https://github.com/FMCorz/AutoCloseTags

要安裝：

添加上述庫與Package Control: Add repository
執行命令Package Control: Install package
選擇AutoCloseTags

來源

2017-11-09 16:09:58 FMCorz

正如其他建議：安裝Babel and Emmet！

Emmet Abbreviation's list （見demo here）（和cheat sheet here）
你甚至不需要尖括號鍵入 - 埃米特會做到這一點，結束標記，以及更多！

使用Ctrl鍵é擴大的縮寫。

埃米特文檔：在解釋縮寫.. 偉大的，但沒有說明如何「展開縮寫」 - 至少，我無法找到它。

從崇高，我
- 開闢了：Preferences -> Package Settings -> Emmet -> Key Bindings - Default
- 搜索expand_abbreviation
- 發現ctrl+e

幸福 - 就像一個魅力:-)

我也推薦安裝AutoCloseTags，按規定b y FMcorz和Daniel Shannon。

組合使得
- 自動閉合（解釋標籤由於嵌套規則），只需輸入</，在飛行中大，反之，埃米特將
- 擴張的「縮寫」，以全面開啓和關閉標籤（和更多）按Crtl-E。這對創建骨架非常有用。

來源

2018-01-02 22:30:53 SherylHohman

jsx中的自動完成html標籤（崇高文本）

回答

相關問題