一、VScode 介绍、下载、安装。
- 一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。
- 免费,可以直接去微软官网去下载。https://code.visualstudio/
- 下载之后直接安装,无任何阻碍。
二、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 键 即可实现快速输入代码段
四、自动格式化代码快捷键
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代码测试。
更多推荐
初用VScode并配置,自定义代码片段(快捷键),自动格式化代码快捷键,保存格式化代码快捷键
发布评论