VSCode 1.69 !+tab 無效問題(更新)

發表於 2022-07-12 分類於 VSCode

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

最近 VSCode 更新到 1.69 之後以往常用的 !+tab 會失去效用，所以這邊紀錄一下解決方式。

前言

最近 VSCode 更新到 1.69 之後以往常用的 ! + tab 會失去效用，所以這邊紀錄一下解決方式。

事發原因

自從 VSCode 更新到 1.69 之後前端開發最常用的 ! + tab 不再出現任何下拉提示訊息

展開 HTML

剛好這個也有人提出討論

html emmet suggestion not automatically display

那因為這個原因導致開發上可能會有一些困擾，所以這邊快速記錄一下解決方式

解決方式

首先第一個方式是輸入 html:5

html:5

但這字真的有夠長的，所以講一下另一招，進入到「設定」頁面

Setting

接下來在上方搜尋「Trigger Expansion On Tab」，中文是

Trigger Expansion On Tab

這個設定意思是啟用「按下 Tab 就展開 Emmet 縮寫」，這樣子就可以正常使用 ! + tab 了

! + tab

但有趣的地方在於，下拉提示視窗還是不會出現，可能未來 VSCode 或下一個版本就會修正了吧。

題外話補一下，可以試著在 settings.json 加入以下這一段

{
    ...
    // 預設 HTML 樣板 lang 等
    "emmet.variables": {
        "lang": "zh-Hant-TW",
        "charset": "UTF-8",
    },
    ...
}

這樣預設生出來就會有 zh-Hant-TW 跟 UTF-8 設置了，如下範例

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

後續更新

目前 VSCode 1.69.2 已經修正了 ! 不會出現 HTML 提示視窗的問題囉