點燈坊

失くすものさえない今が強くなるチャンスよ

如何建立自訂 Code Snippet ?

Sam Xiao's Avatar 2020-12-11

WebStorm 已經內建 Emmet 與 Lorem,但卻沒內建 Fakeimg,但我們可自行建立 Code Snippet。

Version

WebStorm 2020.3

Live Template

live000

Preferences -> Editor -> Live Templates -> HTML/XML
右側新增 Live Template。

live001

新增 fakeimg

<img src="https://picsum.photos/300/200/?random=10">

live002

設定 fakeimg 適用於 HTMLVue

Conclusion

  • WebStorm 雖然已經內建不少 code snippet,但透過 live template 可建立自己的 code snippet