vs code快速生成HTML头部快捷键或者插件？

Posted 2023-03-14

非html5，而是其他HTML头部快捷键或插件，如htmlxt，htmlxs，huml4t等等

参考技术A

按shift+1打出!，会出现选第一个就可以了，按Enter或tab

参考技术B 简介
VSCode是微软出的一款轻量级代码编辑器，免费而且功能强大，对javascript和NodeJS的支持非常好，自带很多功能，例如代码格式化，代码智能提示补全、Emmet插件等。VSCode推荐一个项目以文件夹的方式打开。
一、设置首选项
下载安装完成后，打开编辑器，首先要设置主题、字体大小等。
1. 设置主题
文件→首选项→颜色主题
2. 设置字体大小
文件→首选项→设置，打开了一个setting.json文件，将左边的设置复制到右边进行覆盖生效，所有编辑器的设置都在这里修改。

二、Emmet插件
最新版集成了Emmet 2.0，在文件→首选项→设置可以开启或者关闭功能

三、快捷键
所有快捷键设置：文件→首选项→键盘快捷方式
1. 在当前行中间换行到下一行：ctrl+enter
2. 当光标点击到某一行时，默认选中全行，可以直接复制剪切
3. 直接删除某一行：shift+delete或者ctrl+shift+k
4. 多行光标选择：alt+鼠标左键
5. 自动生成html结构和meta声明：首先输入“!”，然后按tab键
6. 标签自动补全：tab键
7. 折叠所有代码：ctrl+k、ctrl+0
8. 拆分编辑器：ctrl+\
查找框右边的3个参数分别为：区分大小写，全字匹配，使用正则

9. 跳转行号：ctrl+G
10. 添加函数注释：在函数上方输入“/**”，然后点击enter

11. 格式化：alt+shift+f
12. 注释：ctrl+/
13. 全部保存：ctrl+k, 然后只按s一个键
14. 向上移动一行：alt+↑
15. 向下移动一行：alt+↓
16. 向上复制一行：alt+shift+↑
17. 向下复制一行：alt+shift+↓
18. 查找：ctrl+F
19. 替换：ctrl+H
20. 文件中查找：ctrl+shift+f
可以在打开的文件夹中搜索所有文件内容
21. 文件中替换：ctrl+shift+h
22. 转到定义：F12
23. 转到实现：ctrl+F12
24. 打开文件夹：ctrl+k, ctrl+o
25. 关闭文件夹：ctrl+k, 然后单按一个f
26. 选中一段代码，通过“ctrl+[”可以左移，“ctrl+]”可以右移
open in browser
插件功能描述：从浏览器中查看html文件，使用系统的当前默认浏览器
Atuo Rename Tag
修改 html 标签，自动帮你完成尾部闭合标签的同步修改，不过有些bug。

fileheader
顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间

Live Sass Compiler

vscode--搭建自动编译sass环境

一，安装插件及使用步骤
1、vscode安装Live Sass Compiler，由于该插件依赖Live Server ，所以会自动安装Live Server
2、点击vscode底部的Watch my Sass
3、按F1键，在输入栏中输入Live Sass: Watch Sass来监听Sass文件（ Live Sass: Stop Watching Sass 停止监听文件）
4、同样在输入栏中输入 Live Sass: Compile Sass - Without Watch Mode，就会自动编译scss文件为css文件
二，配置编译规则
1、在项目的根目录下创建一个文件夹，命名为 .vscode(只能通过Linux命令创建)，并且在该文件夹下面创建一个文件settings.json
2、配置settings.json
1
2 "liveSassCompile.settings.savePath": "./dist/css",//指定编译完的css文件路径
3 "liveSassCompile.settings.format": "expanded",//指定编译css的样式类型，有这四种 expanded（默认）, compact, compressed or nested
4 "liveSassCompile.settings.extensionName": ".css",//指定编译完的文件后缀名，.css为普通代码，.min.css为压缩代码
5 "liveSassCompile.settings.excludeFolders": [
6 "**/node_modules/**",//指定忽略的文件
7 ".vscode/**"
8 ]
9
三、其他注意事项
如果要对多个文件进行监听和编译，那么只要重复操作一，安装插件及使用步骤》的2/3/4步骤。（每个scss文件只要操作一次，以后一旦保存，就会自动编译）
Easy Sass
安装 Ruby 时一定要勾选 Add Ruby executables to your PATH，用来将 Ruby 添加到系统变量，这样后续可以省却很多不必要的麻烦。装好后在命令行输入 gem sass 来安装 Sass，安装完成后启动 VSCode，在拓展商店里搜索“easy sass”，并安装，安装成功后重启 VSCode。

接下来进行配置。在 VSCode 菜单栏依次点击“文件 首选项 设置”，打开 settings.json 全局配置文件。搜索“easysass”，然后把 easysass 相关的设置项复制到右侧的用户设置编辑窗口中，再根据实际情况修改配置项。

一般生产环境中用到其中两个设置项（上图红框处中的代码）：
/** Easy Sass 插件 **/
"easysass.formats": [

"format": "compressed", // 压缩
"extension": ".css"

],
"easysass.targetDir": "./" // 自定义css输出文件路径
1
2
3
4
5
6
7
8
其中 easysass.formats 是设置编译输出的 css 风格的，可以同时编译输出多个不同风格的 CSS 文件，此处我只设置了一个 easysass.formats 项目，所以编译时只生成一个 CSS 文件。
easysass.formats[i].format 支持四个选项用以编译生成对应风格的 CSS：
nested：嵌套缩进的 css 代码。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的 css 代码。
compressed：压缩后的 css 代码。
easysass.formats[i].extension 顾名思义就是设置编译输出的文件名了，此处可以自定义文件名，输出的 CSS 文件名会按照“当前 Sass 文件名（不含拓展名）+此处自定义文件名”的格式来生成。例如：设置 easysass.formats[i].extension 为 ".min.css"，假设当前的 Sass 文件名为“style.scss”，则编译输出的 CSS 文件名为“style.min.css”。
我们的生产环境中，在很多情况下 Sass 文件和 CSS 文件是不在同一个目录下的，而Easy Sass 默认输出的 CSS 是和当前 Sass 文件处于相同目录的，为此我们需要配置输出路径

visual studio code快速生成Html头部信息和炫酷的代码补全

html:4t、html:4s、html:xt、html:xs、html:xxs、html:5

 

Child: >

nav>ul>li

<nav> <ul> <li></li> </ul> </nav>

Sibling: +

div+p+bq

<div></div> <p></p> <blockquote></blockquote>

Climb-up: ^

div+div>p>span+em^bq

<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>

div+div>p>span+em^^bq

<div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>

Grouping: （）

div>（header>ul>li*2>a）+footer>p

<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>

（div>dl>（dt+dd）*3）+footer>p

<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer>

Multiplication: *

ul>li*5

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

Item numbering: ￥

ul>li.item￥*5

<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>

h￥[title=item￥]{Header ￥}*3

<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3>

ul>li.item￥￥￥*5

<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>

ul>li.item￥＠-*5

<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>

ul>li.item￥＠3*5

<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>

ID and CLASS attributes

＃header

<div id="header"></div>

.title

<div class="title"></div>

form＃search.wide

<form id="search" class="wide"></form>

p.class1.class2.class3

<p class="class1 class2 class3"></p>

Custom attributes

p[title="Hello world"]

<p title="Hello world"></p>

td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

[a=""value1"" b="value2"]

<div a="value1" b="value2"></div>

Text: {}

a{Click me}

<a href="">Click me</a>

p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to continue</p>

Implicit tag names

.class

<div class="class"></div>

em>.class

<em><span class="class"></span></em>

ul>.class

<ul> <li class="class"></li> </ul>

table>.row>.col

<table> <tr class="row"> <td class="col"></td> </tr> </table>

 

HTML

 

All unknown abbreviations will be transformed to tag， e.g. foo → <foo></foo>.

 

!

Alias of html:5

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> </body> </html>

a

<a href=""></a>

a:link

<a href="http://"></a>

a:mail

<a href="mailto:"></a>

abbr

<abbr title=""></abbr>

acronym

<acronym title=""></acronym>

base

<base href="" />

basefont

<basefont />

br

<br />

frame

<frame />

hr

<hr />

bdo

<bdo dir=""></bdo>

bdo:r

<bdo dir="rtl"></bdo>

bdo:l

<bdo dir="ltr"></bdo>

col

<col />

link

<link rel="stylesheet" href="" />

link:css

<link rel="stylesheet" href="style.css" />

link:print

<link rel="stylesheet" href="print.css" media="print" />

link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

link:touch

<link rel="apple-touch-icon" href="favicon.png" />

link:rss

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

link:atom

<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

meta

<meta />

meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

meta:win

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

meta:vp

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

meta:compat

<meta http-equiv="X-UA-Compatible" content="IE=7" />

style

<style></style>

script

<script></script>

script:src

<script src=""></script>

img

<img src="" />

iframe

<iframe src="" frameborder="0"></iframe>

embed

<embed src="" type="" />

object

<object data="" type=""></object>

param

<param name="" value="" />

map

<map name=""></map>

area

<area shape="" coords="" href="" />

area:d

<area shape="default" href="" />

area:c

<area shape="circle" coords="" href="" />

area:r

<area shape="rect" coords="" href="" />

area:p

<area shape="poly" coords="" href="" />

form

<form action=""></form>

form:get

<form action="" method="get"></form>

form:post

<form action="" method="post"></form>

label

<label for=""></label>

input

<input type="text" />

inp

<input type="text" name="" id="" />

input:hidden

Alias of input[type=hidden name]

<input type="hidden" name="" />

input:h

Alias of input:hidden

<input type="hidden" name="" />

input:text， input:t

Alias of inp

<input type="text" name="" id="" />

input:search

Alias of inp[type=search]

<input type="search" name="" id="" />

input:email

Alias of inp[type=email]

<input type="email" name="" id="" />

input:url

Alias of inp[type=url]

<input type="url" name="" id="" />

input:password

Alias of inp[type=password]

<input type="password" name="" id="" />

input:p

Alias of input:password

<input type="password" name="" id="" />

input:datetime

Alias of inp[type=datetime]

<input type="datetime" name="" id="" />

input:date

Alias of inp[type=date]

<input type="date" name="" id="" />

input:datetime-local

Alias of inp[type=datetime-local]

<input type="datetime-local" name="" id="" />

input:month

Alias of inp[type=month]

<input type="month" name="" id="" />

input:week

Alias of inp[type=week]

<input type="week" name="" id="" />

input:time

Alias of inp[type=time]

<input type="time" name="" id="" />

input:number

Alias of inp[type=number]

<input type="number" name="" id="" />

input:color

Alias of inp[type=color]

<input type="color" name="" id="" />

input:checkbox

Alias of inp[type=checkbox]

<input type="checkbox" name="" id="" />

input:c

Alias of input:checkbox

<input type="checkbox" name="" id="" />

input:radio

Alias of inp[type=radio]

<input type="radio" name="" id="" />

input:r

Alias of input:radio

<input type="radio" name="" id="" />

input:range

Alias of inp[type=range]

<input type="range" name="" id="" />

input:file

Alias of inp[type=file]

<input type="file" name="" id="" />

input:f

Alias of input:file

<input type="file" name="" id="" />

input:submit

<input type="submit" value="" />

input:s

Alias of input:submit

<input type="submit" value="" />

input:image

<input type="image" src="" />

input:i

Alias of input:image

<input type="image" src="" />

input:button

<input type="button" value="" />

input:b

Alias of input:button

<input type="button" value="" />

isindex

<isindex />

input:reset

Alias of input:button[type=reset]

<input type="reset" value="" />

< name="" id=""></>

option

<option value=""></option>

textarea

<textarea name="" id="" cols="30" rows="10"></textarea>

menu:context

Alias of menu[type=context]>

<menu type="context"></menu>

menu:c

Alias of menu:context

<menu type="context"></menu>

menu:toolbar

Alias of menu[type=toolbar]>

<menu type="toolbar"></menu>

menu:t

Alias of menu:toolbar

<menu type="toolbar"></menu>

video

<video src=""></video>

audio

<audio src=""></audio>

html:xml

<html xmlns="http://www.w3.org/1999/xhtml"></html>

keygen

<keygen />

command

<command />

bq

Alias of blockquote

<blockquote></blockquote>

acr

Alias of acronym

<acronym title=""></acronym>

fig

Alias of figure

<figure></figure>

figc

Alias of figcaption

<figcaption></figcaption>

ifr

Alias of iframe

<iframe src="" frameborder="0"></iframe>

emb

Alias of embed

<embed src="" type="" />

obj

Alias of object

<object data="" type=""></object>

src

Alias of source

<source></source>

cap

Alias of caption

<caption></caption>

colg

Alias of colgroup

<colgroup></colgroup>

fst， fset

Alias of fieldset

<fieldset></fieldset>

btn

Alias of button

<button></button>

btn:b

Alias of button[type=button]

<button type="button"></button>

btn:r

Alias of button[type=reset]

<button type="reset"></button>

btn:s

Alias of button[type=submit]

<button type="submit"></button>

optg

Alias of optgroup

<optgroup></optgroup>

opt

Alias of option

<option value=""></option>

tarea

Alias of textarea

<textarea name="" id="" cols="30" rows="10"></textarea>

leg

Alias of legend

<legend></legend>

sect

Alias of section

<section></section>

art

Alias of article

<article></article>

hdr

Alias of header

<header></header>

ftr

Alias of footer

<footer></footer>

adr

Alias of address

<address></address>

dlg

Alias of dialog

<dialog></dialog>

str

Alias of strong

<strong></strong>

prog

Alias of progress

<progress></progress>

datag

Alias of datagrid

<datagrid></datagrid>

datal

Alias of datalist

<datalist></datalist>

kg

Alias of keygen

<keygen />

out

Alias of output

<output></output>

det

Alias of details

<details></details>

cmd

Alias of command

<command />

doc

Alias of html>（head>meta[charset=UTF-8]+title{￥{1:Document}}）+body

<html> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> </body> </html>

doc4

Alias of html>（head>meta[http-equiv="Content-Type" content="text/html;charset=￥{charset}"]+title{￥{1:Document}}）+body

<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title> </head> <body> </body> </html>

html:4t

Alias of !!!4t+doc4[lang=￥{lang}]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title> </head> <body> </body> </html>

html:4s

Alias of !!!4s+doc4[lang=￥{lang}]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title> </head> <body> </body> </html>

html:xt

Alias of !!!xt+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=￥{lang}]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title> </head> <body> </body> </html>

html:xs

Alias of !!!xs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=￥{lang}]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title> </head> <body> </body> </html>

html:xxs

Alias of !!!xxs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=￥{lang}]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title> </head> <body> </body> </html>

html:5

Alias of !!!+doc[lang=￥{lang}]

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> </body> </html>

ol+

Alias of ol>li

<ol> <li></li> </ol>

ul+

Alias of ul>li

<ul> <li></li> </ul>

dl+

Alias of dl>dt+dd

<dl> <dt></dt> <dd></dd> </dl>

map+

Alias of map>area

<map name=""> <area shape="" coords="" href="" /> </map>

table+

Alias of table>tr>td

<table> <tr> <td></td> </tr> </table>

colgroup+， colg+

Alias of colgroup>col

<colgroup> <col /> </colgroup>

tr+

Alias of tr>td

<tr> <td></td> </tr>

+

Alias of >option

< name="" id=""> <option value=""></option> </>

optgroup+， optg+

Alias of optgroup>option

<optgroup> <option value=""></option> </optgroup>

!!!

<!doctype html>

!!!4t

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

!!!4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

!!!xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

!!!xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

!!!xxs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

c

<!-- ￥{child} -->

cc:ie6

<!--[if lte IE 6]> ￥{child} <![endif]-->

cc:ie

<!--[if IE]> ￥{child} <![endif]-->

cc:noie

<!--[if !IE]><!--> ￥{child} <!--<![endif]-->