安装
- 官网:https://code.visualstudio.com/ 在首页选择相应的操作系统进行安装
插件
- 项目文件显示图标的常用插件 vscode-icons
安装方法:
快捷键 Ctrl+P ,输入ext install vscode-icons
再回车,然后选择第一个点击【安装】按钮,待安装成功之后再点击【重新加载】按钮
手动配置:
- 在浏览器中 预览/打开 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
保存即可
常用快捷键
- 折叠/展开代码
# 折叠当前片段
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,