安装vscode
下载：https://code.visualstudio.com/
安装：一直点下一步即可
配置
插件配置
- 汉化插件：chinese 其它插件安装和下图中类似
- Live Server： 浏览器打开html插件,自动刷新浏览器页面
- HTML Snippets： H5代码片段以及提示
- HTML CSS Support： 让 html 标签上写class 智能提示当前项目所支持的样式 新版已经支持scss文件检索
- CSS Peek： css代码提示
- vetur： vue2框架所需的插件 语法高亮、智能感知、Emmet等
- Vue Language Features (Volar)： vue3框架代码片段
- VueHelper： vue2snippet代码片段
- Material Icon Theme：美化图标
- wxapp-helper: 微信小程序开发助手,可生成页面、组件
- WXML - Language Service：微信小程序代码片段
- 小程序开发助手：微信小程序开发助手
- Tabnine AI ： AI智能代码提示插件
- Auto Close Tag： 自动关闭标签
- Auto Rename Tag： 自动重命名标签
- Eva Theme： 漂亮的黑色主题
- HBuilderX Soft Green Light Theme： HBuilderX 绿柔护眼主题
- Image preview: 图片预览
- EJS language support： ejs代码片段
- ES7+ React/Redux/React-Native snippets： es js react代码提示
- vue2 snippet: vue2代码片段 ，比如输入vue可以生成vue2模板文件
- IntelliSense for CSS class names in HTML ：css类名提示
- Tailwind CSS IntelliSense ：Tailwind CSS代码提示
配置自动保存
点击菜单栏：文件–勾选自动保存
插件迁移
当换了电脑需要重新安装插件时，可以把原来电脑vscode中的插件拷贝过来。
1.复制 C:\Users\Administrator\.vscode\extensions 文件夹
2.在 新的电脑上同样找到安装目录下的.vscode，替换掉extensions 或者复制之前extensions下的插件文件，粘贴到当前新目录就好了
快捷键
快速生成html模块
!
注释
ctrl+ /
删除
删除一行或者选中的区域：ctrl+shift+k
选中相同的内容
ctrl+d
列选
第一种方式： 按住shift+alt，再按住鼠标左键选择区域
第二种方式： 按住ctrl+alt， 再按上下键
拖动复制
按住shift+alt，再按↓，可以复制关闭所在的行
Emmet快速生成标签
参考文档：VScode如何快速生成Html标签（Emmet的简单使用)
div.box
<div class="box"></div>
div#footer
<div id="footer"></div>
div*3
<div></div>
<div></div>
<div></div>
p+h2
说明： + 表示两个标签都生成
<p></p>
<h2></h2>
ul>li
<ul>
<li></li>
</ul>
ul#a>li.b*3>a[href=’abc.com/$’]>{$}
说明： * 3 代码生成数量为3 ，$ 代表的是自动生成序号 , > 代表的是子元素
<ul id="a">
<li class="b"><a href="abc.com/1">1</a></li>
<li class="b"><a href="abc.com/2">2</a></li>
<li class="b"><a href="abc.com/3">3</a></li>
</ul>
未完待续。。。后面用到新的功能再来加上