安装
- 官网：https://code.visualstudio.com/ 在首页选择相应的操作系统进行安装
image.png
插件
- 项目文件显示图标的常用插件 vscode-icons
安装方法：
快捷键 Ctrl+P ，输入ext install vscode-icons再回车，然后选择第一个点击【安装】按钮，待安装成功之后再点击【重新加载】按钮
手动配置：
27.gif
- 在浏览器中 预览/打开 html 文件的插件 -- View In Browser
使用快捷键
ctrl+f1
- VSCode 中 Emmet 的开启方法
Emmet 使用教程：https://www.w3cplus.com/tools/emmet-cheat-sheet.html
由于新版的 VSCode 默认是将其功能关闭的，需要手动的到设置中去修改
- 修改方法:
先依次找到菜单：
文件 -> 首选项 -> 设置 -> 之后ctrl+f输入/复制emmet.triggerExpansionOnTab将找到的左侧(默认设置)的代码复制到右侧(用户设置)中去并将false改为true再按ctrl+s保存即可
image.png
常用快捷键
- 折叠/展开代码
# 折叠当前片段
ctrl + shift + [
# 展开当前片段
ctrl + shift + ]
# 折叠所有片段
ctrl + k ctrl + 0 （零）
# 展开所有片段
ctrl + k ctrl + j
- 当前选中的代码片段向左/右缩进
# 向左
ctrl + [
# 向右
ctrl + ]
- 配合使用多行选择编辑器中的代码片段
# 方法1
ctrl + shift + alt + uparrow
ctrl + shift + alt + leftarrow
ctrl + shift + alt + downarrow
ctrl + shift + alt + rightarrow
# 方法2
alt + click （鼠标左键）
- 可以选中页面中相同的单词进行同时编辑
# 首先选中一些代码字符/单词再
ctrl + shift + L
- 向上/下复制当前行的代码
alt + shift + uparrow
alt + shift + downarrow
- 向上/下移动当前行的代码
alt + uparrow
alt + downarrow
- F2 重命名函数/类的名称，实现其他地方以及声明位置名称的同步更改
# 首先鼠标左键点中函数名称使光标在其上，再按 F2 ，最后编辑 + 回车即可
- 可以将一些逻辑代码封装出来
# 先用鼠标选中可复用的逻辑代码片段，之后在代码的前面会出现一个小灯泡，之后点击灯泡会出现三个选项
# 1. 提取为当前函数中的内部函数，实现函数内部的复用
# 2. 提取为全局的公用函数，实现全局都可复用
# 3. 提取为当前函数中的内部变量，实现函数内部的调/复用
- 代码格式化
# 自动格式化当前页面的所有代码
shift + alt + f
# 格式化选中的代码片段
ctrl + k ctrl + f
- 智能定位到语法错误代码的位置以及显示错误原因
F8
用户自定义设置
- 设置在保存文件时自动格式化代码
参考地址
顶部菜单 -> 文件 -> 首选项 -> 设置 -> 在右侧的【用户设置】中增加下面的规则即可
"editor.formatOnSave": true,