VScode学习安装配置及一些常用快捷键
前端学习查询文档资料：www.w3school.com.cn
一.VScode配置
①安装VScode
②安装中文语言包
③尝试安装ayu主题（非必要）
④将一个目录作为项目目录（在文件夹右键，选择用code运行）
⑤创建一个新网页
⑥安装live server
⑦尝试通过live server来运行网页
⑧设置代码自动存储（非必要）
小Tips
VScode设置自定义代码块
界面左下角 管理（图标）>用户代码段 或 文件>首选项>用户片段
例：
{
"ve": {
"prefix": "ve", // 触发的关键字 输入ve按下tab键
"body": [
"<!DOCTYPE html>"
"<html>"
"<head>"
" <meta charset='UTF-8'>"
" <meta http-equiv='X-UA-Compatible' content='IE=edge'>"
" <meta name='viewport' content='width=device-width, initial-scale=1.0'>"
" <title>数据绑定</title>"
" <!-- 引入Vue -->"
" <script type='text/javascript' src='../js/vue.js'></script>"
"</head>"
"<body>"
//<!-- 准备好一个容器 -->
" <div id='app'>"
"</div>"
"<script type='text/javascript'>"
" Vue.config.productionTip = false "//阻止 vue 在启动时生成生产提示。
" new Vue({"
" el: '#app',"
" data: {"
" name: "
" }"
" })"
"</script>"
"</body>"
"</html>"
],
"description": "ve components"
}
}
}
需要JSON格式，
把一大段片段改成每行都是双引号：
按住鼠标中键，然后选择这些文本，进入多光标模式，然后再输入双引号
折叠代码
//#region
...
需要折叠的代码
...
//#endreigon
二.常用快捷键
1.ctrl+/ 注释快捷键
2.标签名+tab直接生成开始和结束符号<></>
3.ctrl+回车 换行，光标后的结束符号不会跟着 换行
4.alt+shift+↓复制当前行
5.!+回车，快速产生html格式架构
6.shift+alt+f 格式化
7.ctrl+f 查找关键字
8.ctrl+h 替换
9.< + v,在vue文件中快速产生格式架构
10.Ctrl+~ 开启终端
三.安装vue脚手架
cmd命令行输入 npm config set registry https://registry.npm.taobao.org
1.(仅第一次执行)：全局安装@vue/cli
npm install -g @vue/cli
2.切换到你要创建项目的目录，然后使用命令创建项目
vue create xxxx
3.启动项目
npm run serve
