VScode 常见使用方式

VScode 编辑器的使用:

1. VScode如何配置代码片段

(1) 第一步:

image.png

(2.) 第二步:

image.png

2. VScode常用插件的使用及说明

(1) 方法一：
按F1 或者Ctrl + Shift + p ,输入 extensions,点击第一个就可以(Windows)

按F1 或者command + Shift + p ,输入 extensions,点击第一个就可以(Mac)

必装的十四个插件:

1. Chinese:中文(简体)语言包
2. open in browser: 该插件可以在通过编辑器打开默认浏览器显示代码效果
3. guides: 显示代码对齐辅助线,很好用
4. HTMLHint: html代码检测,支持html5
5. vscode-icons: 显示Visual Studio代码的图表,目前该插件已被vscode内部支持:"文件"=>"首选项"=>"文件图标主题"
6. Import Cost: 该插件会在行尾显示导入的包的大小,为了计算包的大小,该插件要使用Webpack...
7. path Intellisense: 这个插件可以很好的识别引入文件路径,提供路径提示功能
8. material Theme: 这是一款颜色主题的插件,让你的vscode变得更顺眼
9. prettier : 格式化美化代码
10. Turbo Console Log: 使用方法 :
    选中你对应的变量 Ctrl + Alt + l 就会出现console.log("要打印的变量")
    删除所有console.log alt + shift + d
    注释所有console.log alt + shift + c
    启用所有console.log alt + shift + u
11. Browser Preview如果你没有双屏开发时切来切去的麻烦 安装这个的话就没不用来回切换了
12. Live Server :通过该插件可以开启 本地服务器
13. Auto Rename Tag 修改HTML 标签, 自动帮你完成头部和尾部闭合标签的同步修改
14. vuter: vue多功能集成插件

3. VScode快捷键的使用及说明

1、编辑器与窗口管理

新建文件: Ctrl+N

文件之间切换: Ctrl+Tab

打开一个新的VS Code编辑器: Ctrl+Shift+N

关闭当前窗口: Ctrl+W

关闭当前的VS Code编辑器: Ctrl+Shift+W

切出一个新的编辑器窗口（最多3个): Ctrl+\

切换左中右3个编辑器窗口的快捷键: Ctrl+1 Ctrl+2 Ctrl+3

2、代码编辑

(1) 格式调整
代码行向左或向右缩进: Ctrl+[ 、 Ctrl+]

复制或剪切当前行/当前选中内容: Ctrl+C 、 Ctrl+V

代码格式化: Shift+Alt+F

向上或向下移动一行: Alt+Up 或 Alt+Down

向上或向下复制一行: Shift+Alt+Up 或 Shift+Alt+Down

在当前行下方插入一行: Ctrl+Enter

在当前行上方插入一行: Ctrl+Shift+Enter

(2) 光标相关

移动到行首: ** Home**
 
 
移动到行尾: ** End**
 
 
移动到文件结尾: ** Ctrl+End**
 
 
移动到文件开头: Ctrl+Home
 
 
移动到定义处: F12
 
 
查看定义处缩略图(只看一眼而不跳转过去): Alt+F12
 
 
选择从光标到行尾的内容: Shift+End
 
 
选择从光标到行首的内容： Shift+Home
 
 
删除光标右侧的所有内容(当前行): ** Ctrl+Delete**
 
 
扩展/缩小选取范围： Shift+Alt+Right 和 Shift+Alt+Left
 
 
多行编辑(列编辑): Alt+Shift+鼠标左键 或 Ctrl+Alt+Down/Up
 
 
同时选中所有匹配编辑(与当前行或选定内容匹配): Ctrl+Shift+L
 
 
下一个匹配的也被选中: Ctrl+D
 
 
回退上一个光标操作: Ctrl+U
 
 
撤销上一步操作: Ctrl+Z
 
 
手动保存: Ctrl+S

[](javascript:void(0); "复制代码")

(3) 查找替换

查找: Ctrl+F

查找替换: Ctrl+H

(4) 显示相关

全屏显示(再次按则恢复): F11

放大或缩小(以编辑器左上角为基准): Ctrl +/-

侧边栏显示或隐藏： Ctrl+B

显示资源管理器(光标切到侧边栏中才有效): Ctrl+Shift+E

显示搜索(光标切到侧边栏中才有效): Ctrl+Shift+F

显示(光标切到侧边栏中才有效): Git Ctrl+Shift+G

显示 Debug: Ctrl+Shift+D

显示 Output: Ctrl+Shift+U