VScode 介绍、下载、安装。
- 一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。
- 免费，可以直接去微软官网去下载。https://code.visualstudio.com/
- 下载之后直接安装，无任何阻碍。
VScode配置
-
如果要写HTML代码，快速构建出HTML的架构的方法
- 新建HTML文件
- 右下角的纯文本改为HTML
- 输入英文的 ! 叹号，看到补全的 ! ,直接回车自动生成。
-
编写完HTML代码，要在浏览器中打开
- 最左侧的五个图标为一列。点击第五个扩展商店
- 输入 open in browser
- 直接下载
- 下载完之后，有两个快捷键
key command Alt + B open in default browser Shift + Alt + B open in specified 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 键 即可实现快速输入代码段
