vscode的安装
汉化：
-
打开vscode，按下【Ctrl+Shift+P】，出来一个输入框，输入：
configure language，敲【回车】配置语言 -
点击
Install additional languages...，表示安装其他语言。因为我们刚安装好以后，只有en（英文），没有zh-cn（中文简体）。点击之后稍等片刻，左侧会出现一个列表，如下图：选择语言安装 -
点击绿色小按钮进行安装，或者点击到中文简体语言中，点击绿色小按钮都可以
点击安装 -
点击按钮以后，稍等片刻，vscode安装中。。。待安装成功后，页面右下角会有提示如下图：
安装成功的提示 -
点击【yes】按钮，vscode会重启，重启后，就可以发现时中文版了。
中文版vscode界面
vscode插件安装
vscode有两个很常用的模块，用来管理代码和插件，如下图：
| vscode常用的两个模块 |
|---|
 |
点击扩展管理，会出现一个搜索框和我们已经安装好的插件，如下图：
| 扩展管理页面 |
|---|
 |
打开浏览器插件
安装第一个插件：open in browser，这个插件可以让我们从编辑器中直接打开浏览器的，默认没这个功能。搜索框中输入open in browser，其实只需要输入open就发现有提示出来了，效果如下：
| 搜索插件 |
|---|
 |
点击安装按钮。稍等片刻，就会安装成功。
| 安装成功 |
|---|
 |
这时候将搜索框中的内容删掉，在已安装的插件中就能看到新安装的插件了：
| 安装成功 |
|---|
 |
使用快捷键：【alt+b】
自动补全路径插件
这个插件可以让我们在做项目的时候，提示路径并补全，可以减少我们在路径方面出错。
插件名称：Path Intellisense，搜索效果如下图：
| 插件搜索结果 |
|---|
 |
vue自动补全代码片段
插件名称：Vue 3 Snippets
vue文件高亮
插件名称：Vuter
nodejs代码提示
插件名: node-snippets
微信小程序代码提示
插件名: 小程序开发助手
保存自动格式化HTML, CSS, JS代码
插件名: JS-CSS-HTML Formatter
自动重命名配对的html/xml标签
插件名: Auto Rename Tag
追踪至样式
插件名: CSS Peek
安装方式同上。
vscode的使用：
隐藏右边迷你预览图 => 查看 => 切换小视图
侧边栏左右切换 : =>查看 => 向右切换侧边栏
打开文件夹 : => 文件 => 打开文件夹
-
资源管理器中:新建文件 + 新建文件夹 + 刷新 + 全部折叠文件夹
一般我们写代码之前，会先新建一个文件夹，然后将文件夹拖到内容区域（不到拖到侧边栏），资源管理器中会自动显示这个文件夹。文件夹名称旁边会有新建文件、新建文件夹、刷新、折叠等按钮，如下图：
vscode资源管理器 -
【ctrl + shift + p】/或者设置(左下角右下角的齿轮)=> 命令面板 => 搜索:【snippet】 => 找到:【新建全局代码片段文件】 =>收入文件名称（自定义） => 在新建的片段文件中配置片段
新建代码片段 配置项：（这个片段的目的是输入【h5】就能快速生成html5的页面以及script标签）
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n107" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">{
"create h5 page":{ # 片段名称
"scope": "javascript,typescript,html,typehtml,php,typephp", # 适用的文件类型
"prefix": "h5", # 使用什么生成片段
"body": [ # 片段内容
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"<meta charset=\"UTF-8\">",
"<title>Document</title>",
"</head>",
"<body>",
"",
"</body>",
"<script type=\"text/javascript\">",
"$1",
"</script>",
"</html>"
],
"description": "create html page and script tag" # 片段描述
}</pre>
片段内容的格式时中括号，里面放入每一行的代码，每行代码中间用逗号隔开，碰到和外面引号冲突的地方，使用反斜杠\，想让光标停留在哪里，就在哪里使用$1来表示。
-
更改默认配置，vscode默认情况会有字体大小、字体等配置，可以将他修改自己习惯的配置。【左下角右下角的齿轮】 => 【设置】
vscode默认配置 files.autoSave：文件自动保存，默认时off，修改为afterDelayeditor.fontSize：以像素为单位控制字体大小editor.tabSize：一个制表符（tab键的输入）等于的空格数
-
常用快捷键
Ctrl + / : 注释
Alt+B : 快速开启浏览器
复制 : shift + alt + ↓
移动 : alt + ↓
格式化代码规范 : shift + alt + F
折叠侧边栏 : Ctrl + B
-
浏览器调出控制台
F12 打开控制台
mac双系统的 F12 = fn+F12
Ctrl+N : 新建
Ctrl + C : 复制 ( 光标在这一行即可)
Ctrl + X : 删除当前行
Ctrl+Z 撤销这一次操作
Ctrl+Shift+Z : 反撤销
