在WebStorm中更改代碼自動完成

Question

WebStorm對於React.js有特定的JSX代碼自動完成。它是這樣的：

div. + Tab => <div className=""></div> 

但我使用SCSS，所以我需要改變自動完成從className到styleName：

div. + Tab => <div styleName=""></div> 

Answer 1

您可以通過創建什麼Jetbrains的調用覆蓋此默認行爲「實時模板「（該功能也存在於其他Jetbrains產品中）。

首先導航到Webstorm首選項。在左側，您會看到一個樹形結構，顯示按類別列出的首選項。展開「編輯器」找到「實時模板」。

一旦你選擇實時模板，你會看到右邊顯示當前啓用的實時模板的樹形結構。 在此表的最右側，您會看到一個小的+按鈕，它允許您創建自己的實時模板。

選擇+ - >實時模板後，您需要在底部填寫縮寫，說明和模板文本。
縮寫是您輸入以激活此模板的字符。在這種情況下，輸入div。 描述字段可以是任何你想描述這個模板，它沒有任何功能影響。
模板文本部分是替換文本。在這種情況下，我會用

< DIV的styleName =「$ END $」 > </DIV>

注意$ END $是活的模板被激活後把光標在這個位置的變量。

最後，您需要指定Live Template應對哪些文件類型。請注意頁面底部的「沒有應用上下文尚未定義」。點擊單詞Define，在出現的彈出式菜單中展開Javascript以查找JSX HTML的選項並檢查它。如果您希望Live Template在其他情況下可以隨意選擇其他文件類型。