> 《網頁設計》SublimeText和VSCode被遺忘的Emmet包裝程式碼標籤功能 - iamtie(我是鐵)

2020年12月14日 星期一

《網頁設計》SublimeText和VSCode被遺忘的Emmet包裝程式碼標籤功能

《網頁設計》SublimeText和VSCode被遺忘的Emmet包裝程式碼標籤功能

鐵(Tie)
之所以會說是被遺忘的功能,是因為在以前的Sublime Text是非常好用且預設熱鍵的Emmet功能,後來卻隨著改版被移除熱鍵了,得自己重新設定才行。那時在Mac的熱鍵是control+w,Windows的熱鍵則是ctrl+shift+g,能夠用來選取多項的Html標籤並在他們的外層再增加標籤。

應用說明

這個功能又叫做「用縮寫換行(Wrap Individual Lines With Abbreviation)」
簡單說就是反白選取你要包的東西以後,接著按下「用縮寫換行」的熱鍵,再打上你外面要包上的標籤,最後按下Enter就大功告成了!

看圖會比較明白

可以在選取的標籤的外圍,透過這個功能打上Emmet,讓你包裹一層又一層你想要的標籤。

多個的話也沒問題!

Mac可以透過「Command+滑鼠左鍵」來做複選
Windows則是「Ctrl+滑鼠左鍵」來做複選
當然你也可以直接用搜尋的方式,直接選取你要包裹的所有內容,一次選取來做包覆。

選取多個(多行)並將他們反白包裹起來之後,接著只要用「用縮寫換行(Wrap Individual Lines With Abbreviation)」功能,來打上你要添加的標籤,就可以一次完成包覆了。

設定方式

Sublime Text 設定方法


Preferences→Package Settings→Emmet→Key Bindings

然後在右邊的使用者自訂內容中添加這段程式碼即可

    {
        "keys": ["control+w"],
        "command": "emmet_wrap_with_abbreviation",
        "context": [{"key": "setting.is_widget",  "operand": false }]
    }

keys是熱鍵按鈕的設定,可以隨自己喜好調整,不要有衝突就好。

VS Code 設定方法

他的設定方式就比較簡單了(中文化可參考底下的相關資料)

喜好設定→鍵盤快速鍵→搜尋「emmet wrap」→新增「Emmet:使用縮寫換每一行」的熱鍵(不是下面使用縮寫換行那個)

新增熱鍵的時候會直接跟你的鍵盤對應,直接按你想要的按鍵就好,不用跟Sublime Text一樣要手打,滿方便的。

相關資料

Emmet
Emmet Cheat Sheet(簡碼教學)
VS Code 的中文 (繁體) 語言套件

我是鐵,以上就是這篇文章的設定教學啦!
鐵的 SEO 佈局策略 大公開!

沒有留言:

張貼留言