一、VScode 介绍、下载、安装。
一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。免费，可以直接去微软官网去下载。/下载之后直接安装，无任何阻碍。二、VScode配置
如果要写HTML代码，快速构建出HTML的架构的方法
新建HTML文件右下角的纯文本改为HTML输入英文的!叹号，看到补全的 ! ,直接回车自动生成。
编写完HTML代码，要在浏览器中打开
最左侧的五个图标为一列。点击第五个扩展商店输入open in browser直接下载
下载完之后，有两个快捷键但是使用时还是有错误。需要配置本地的浏览器到VScode
打开：文件》首选项》设置
在右侧的工作区设置中刚添加以下数据
{"open-in-browser.default": "Chrome",}
然后在要执行的文件，右键，点击最下面的英文。
第一个是默认的浏览器
第二个是其他的浏览器。
三、用户自定义代码片段（快捷键）
第一步：文件==>首选项==>用户代码片段
第二步：选择代码片段文件 html.json
第三步：输入要自定义的快捷键 和 模板代码段
{// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected.// Example:// "Print to console": {// "prefix": "log",// "body": [// "console.log('$1');",// "$2"// ],// "description": "Log output to console"// }"vh": {"prefix": "vh", // 触发的关键字 输入vh按下tab键"body": ["<!DOCTYPE html>","<html lang=\"en\">","<head>"," <meta charset=\"UTF-8\">"," <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"," <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">"," <title>Document</title>"," <script src=\"../vue/vue.js\"></script>","</head>","","<body>"," <div id=\"app\"></div>"," <script>"," var vm=new Vue({"," el:'#app',"," data:{","","},"," methods:{","","},","});"," </script>","</body>","","</html>",],"description": "vh components"}}
第四步：进入 .html 后缀的文件中 按快捷键 vh 后按 tab 键 即可实现快速输入代码段
四、自动格式化代码快捷键
win：实现vs code中代码格式化快捷键：【Shift】+【Alt】+F
Mac：shift+option+F
五、保存格式化代码快捷键
实现保存时自动代码格式化：
保存快捷键： 【Ctrl】+【S】
1）文件 ------.>【首选项】---------->【设置】；
2）搜索emmet.include;
3）在settings.json下的【工作区设置】中添加以下语句：
“editor.formatOnType”: true,
“editor.formatOnSave”: true
4) 随便写点 js代码测试。
