但是由于默認(rèn)模板不滿足我們的要求,所以每次都要修改lang和mate:vp,十分麻煩

通過修改文件內(nèi)容可以實(shí)現(xiàn)修改" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > VS Code修改html默認(rèn)模板代碼(Win10)

VS Code修改html默認(rèn)模板代碼(Win10)

時(shí)間:2023-06-10 11:09:01 | 來源:網(wǎng)站運(yùn)營

時(shí)間:2023-06-10 11:09:01 來源:網(wǎng)站運(yùn)營

VS Code修改html默認(rèn)模板代碼(Win10):VScode新建html文件后,使用'!+tab'會(huì)自動(dòng)生成一個(gè)html模板

但是由于默認(rèn)模板不滿足我們的要求,所以每次都要修改langmate:vp,十分麻煩

通過修改文件內(nèi)容可以實(shí)現(xiàn)修改每次默認(rèn)生成的html代碼段

方法如下:

目前網(wǎng)上大多數(shù)教程都是通過以下目錄

{VScode安裝路徑}/resources/app/extensions/emmet/node_modules/vscode-emmet-helper/out/expand/expand-full.js

找到expand-full.js文件

進(jìn)而進(jìn)行修改

然而,在本人嘗試該方法時(shí)發(fā)現(xiàn),emmet目錄下并沒有node_modules/vscode-emmet-helper/out/expand/expand-full.js這一路徑和文件

通過測(cè)試我發(fā)現(xiàn)了通過以下路徑也可以達(dá)到目的:

1.找到文件emmetNodeMain.js

通過/Microsoft VS Code/resources/app/extensions/emmet/dist/node/emmetNodeMain.js

可以找到文件emmetNodeMain.js

如圖:







2. 使用VScode或其他編輯器將其打開




3. 開始修改

鄭重提醒,修改之前請(qǐng)務(wù)必備份之,以防不測(cè)。

*** 查找 功能(默認(rèn)快捷鍵 Ctrl+F ) ***


3.1 修改lang為zh-CN

查找variables:{lang:,

lang:"en"修改為lang:"zh-CN";

如圖:










3.2 修改meta:vp(viewport)

此操作會(huì)將將默認(rèn)生成的

<meta name="viewport" content="width=device-width, initial-scale=1.0">

修改為

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">




同上一步操作

查找"meta:vp" (注意引號(hào)也要復(fù)制)



"meta:vp":"meta[name=viewport content='width=${1:device-width}, initial-scale=${2:1.0}']"

整體替換為下列代碼(注意符號(hào))

"meta:vp":"meta[name=viewport content='width=${1:device-width}, initial-scale=${2:1.0}, minimum-scale=${3:1.0}, maximum-scale=${4:1.0}, user-scalable=${5:no}']"

結(jié)果如圖:










3.3 修改H5模板生成時(shí)光標(biāo)的初始位置

默認(rèn)情況下,使用!感嘆號(hào)生成H5模板時(shí),光標(biāo)默認(rèn)是選中device-width文本狀態(tài),需要3-4個(gè)Tab鍵才能將光標(biāo)移入body中。








"meta:vp":"meta[name=viewport content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no']"




4.在全部修改結(jié)束后保存,關(guān)閉文件,重啟VS code

新建html文件進(jìn)行測(cè)試




5.實(shí)現(xiàn)效果




注意:更新 VScode 會(huì)丟失更改,需要重新配置










即:

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Document</title></head><body></body></html>


參考資料:

1.

作者:xishuiinsz

鏈接:https://www.jianshu.com/p/4effad66eccc

2.

鏈接:https://www.yuque.com/gangafengliu/frontend-tricks/custom-emmet-snippets







































關(guān)鍵詞:模板,默認(rèn),修改

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉