After VScode creates a new HTML file, use the ‘! + TAB ‘will automatically generate an HTML template
But because the default template didn’t meet our requirements, we had to change lang and mate:vp every time, which was very troublesome
By modifying the contents of the file, you can modify the HTML code segments generated by default each time
The method is as follows:
Most tutorials on the web are available through the following directory
{VScode installation path}\resources\app\extensions\emmet\node_modules\vscode-emmet-helper\out\expand\ expands-full.js
Locate the expansion-full.js file
And then modify it
However, when I tried this method, I found that node_modules\vscode-emmet-helper\out\expand\ expands-full.js was not found in the emmet directory
Through testing, I found that this can also be achieved through the following paths:
1. Find the fileemmetNodeMain.js
Via \Microsoft VS Code\resources\app\ Extensions \emmet\dist\node\ emmetNodemain.js
You can find the file emmetNodemain.js
As shown in figure:
2. Use VScode or another editor to open it
3. Start the modification
Solemnly remind, please be sure to backup before modification, in case of emergency.Copy the code*** Find function (default shortcut Ctrl+F) ***
3.1 Changing the lang to zh-cn
Find the variables: {lang:,
Change lang:”en” to lang:” zh-cn “;
As shown in figure:
3.2 modify the meta: vp (viewport)
This action will be generated by default
< meta name = "viewport" content = "width = device - width, initial - scale = 1.0" >
Modified to
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Do the same as the previous step
Find “meta:vp” (note that the quotes should also be copied)
Use “meta: vp”, “meta [name = viewport content =” width = ${1: device – width}, initial – scale = ${2:1. 0} ‘]”
Replace the whole thing with the following code (note the notation)
"Meta: vp" : "[name = meta 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} ']"
The result is shown below:
3.3 Modifying the initial position of time marker generated by the H5 template
By default, use! When an exclamation point generates an H5 template, the cursor defaults to device-width text, and 3-4 Tab keys are required to move the cursor into the body.
Device-width = “width”;
[name = “meta viewport content =” width = ${1: device – width}, initial – scale = ${2:1. 0} ‘] “.
Delete ${1} and then remove the initial cursor to device – the width of the selected text in the same way, remove ${2: and} can remove initial cursor on 1.0 of the selected text The result is shown in figure
"Meta :vp":"meta[name=viewport content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no']"
Title {${1:Document}} {${1:Document}} {${1:Document}} {${1:Document}} {${1:Document}} {${1:Document}} You can change it to the character you want, such as XXX
4. Save the file, close the file, and restart VS Code
Create a new HTML file to test
5. Achieve results
Note: updating VScode loses changes and requires reconfigurationCopy the code
That is:
<! DOCTYPEhtml>
<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>
Copy the codeReferences:
Author: xishuiinsz
Link: www.jianshu.com/p/4effad66e…
Link: www.yuque.com/gangafengli…