1.VSCode下载
VSCode下载链接: Visual Studio Code - Code Editing. Redefined
2.VSCode汉化
3.VSCode常用插件(安装步骤同汉化)
3.1 Auto Close Tag (自动闭合HTML/XML标签)
3.2 Auto Rename Tag (自动完成另一侧标签的同步修改)
3.3 Beautify (格式化 html ,js,css)
3.4 Bracket Pair Colorizer(给括号加上不同的颜色，便于区分不同的区块)
3.5 Debugger for Chrome(映射vscode上的断点到chrome上，方便调试)
3.6 ESLint(js语法纠错，可以自定义配置)
3.7 GitLens(方便查看git日志)
3.8 HTML CSS Support (智能提示CSS类名以及id)
3.9 HTML Snippets(智能提示HTML标签，以及标签含义)
3.10 JavaScript(ES6) code snippets(ES6语法智能提示，以及快速输入)
3.11 jQuery Code Snippets(jQuery代码智能提示)
3.12 Markdown Preview Enhanced(实时预览markdown)
3.13 markdownlint(markdown语法纠错)
3.14 Material Icon Theme(vscode图标主题)
3.15 Icon fonts(图标字体)
3.16 open in browser(右键快速在浏览器中打开html文件)
3.17 Path Intellisense(自动提示文件路径)
3.18 React/Redux/react-router Snippets(React/Redux/react-router语法智能提示)
3.19 Vetur(Vue多功能集成插件，错误提示等)
3.20 Class autocomplete for HTML(智能提示HTML class =“”属性)
3.21 npm Intellisense(require 时的包提示)
3.21 open in browser(alt+b 快捷开启默认浏览器查看页面效果)
4.VSCode快捷键
4.1 左侧是按键，右侧是功能(下同)
4.2 基础编辑
4.3 导航
4.4 搜索和替换
4.5 多光标和选择
4.6 语言编辑
4.7 编辑器管理
4.8 文件管理
4.9 显示
4.10 调试
4.11 集成终端
（一）新建html快捷键
当我们想在VSCode中新建html代码时，可以 输入! 然后回车或者Tab即可自动生成一个html文件模板，效果如下：
（二）自定义html5模板
但我们每次新建html模板时候，总是感觉太单调，例如我是希望每次新建都自动引入Vue并新建一个空的页面模板，这是是完全可以实现的：
（1）找到html.json文件：点击设置，找到用户代码片段
搜索html，出现html.json文件，点击即可
（2）打开html.json文件后即可自定义设置H5模板
附上html.json文件配置，直接填入原大括号中即可：
"h5 template": {
"prefix": "vh", // 对应的是使用这个模板的快捷键
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Document</title>",
"\t<script src=\"./lib/vue-2.4.0.js\"></script>",
"</head>\n",
"<body>",
"\t<div id =\"app\"> </div>\n",
"\t<script>",
"\t //创建Vue实例,得到 ViewModel",
"\t var vm = new Vue({",
"\t\tel: '#app',",
"\t\tdata: {},",
"\t\tmethods: {}",
"\t });",
"\t</script>",
"</body>\n",
"</html>"
],
"description": "HT-H5" // 模板的描述
}
4445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
