VS Code 食用小结

一些经常使用的快捷操做以及vsc自带的功能

注：

1.某些软件快捷键会有冲突 例如搜狗输入法调起软键盘，显卡旋转屏幕等，遇到问题解决冲突

2.如下针对不一样系统和台机或笔记本的按键区别用/代替，顺序是windows系统台机/windows系统笔记本/Mac 或 windows系统/Mac

光标移动

• 针对单词的光标移动：Ctrl/Cmd + 左右方向键

• 光标移动到行首或行末

  • Windows:

    • 台机：Home行首 End行末

    • 笔记本：Fn + 左右方向键

  • Mac: Cmd + 左右方向键

• 光标代码块始末移动（花括号始末之间跳转）:Ctrl/Cmd + Shift + \

• 光标移动到文档首尾

  • Windows:
    • 台机：Ctrl + Home/End
    • 笔记本：Alt + 左右方向键
  • Mac: Cmd + 上下方向键

建立多个光标

可用于一些批量处理的操做

• Alt/Cmd + 鼠标左键：按着按键鼠标点击想要建立光标的位置，可生成多个光标
• Ctrl/Cmd + Alt/Option + 上下方向键：以当前光标的位置纵向建立多个光标（可配合光标移动到行首行位进行批量操）与系统快捷键翻转屏幕有冲突，须要先自行处理再使用
• Alt/Option + Shift + i: 选中内容的最后建立光标，选中多行则多个
• 鼠标中键按住拖动

文本选择

• 纯键盘操做：以上1.1的操做 + Shift 就能够完成对应的文本选择

• 纯鼠标的操做：

  • 自由选择
  • 点两下会选中当前单词，点三下选中当前行，点四下选中当前文档
  • 拖动左边行号选中多行

• 同时选中多个相同内容：选中内容 => Ctrl + D(屡次按键则选中多个)

当前行的操做

• 删除当前行: Ctrl/Cmd + Shift + K

• 剪切当前行: Ctrl/Cmd + X

• 从当前行不管光标在什么位置，新开一行

  • 向下新开一行：Ctrl/Cmd + Enter
  • 向上新开一行：Ctrl/Cmd + Shift + Enter

• 移动当前行：Alt/Option + 上下方向键

• 复制同时移动当前行：Alt/Option + Shift + 上下方向键

####注释

• 注释一行：Ctrl/Cmd + /
• 选中注释：Alt/Option + A

一个窗口多个编辑窗口

最多三个：Ctrl/Cmd + \

跳转到文档指定行数

Ctrl/Cmd + G 输入将要跳转的行数，执行便可

跳转到指定文件的指定行数

结合以上两个 Ctrl/Cmd + P 输入文件名接着输入：和指定行数

跳转到指定声明、类、函数

Ctrl/Cmd + Shift + O：使用方向键选择或搜索而后回车便可

代码格式化

可搭配格式化插件及个性化设置 推荐Prettier

• 整个文档格式化：Alt/Option + Shift + F
• 选中内容格式化: Ctrl/Cmd + K Ctrl/Cmd + F

鼠标拖动

• 选中一行或多行，鼠标左键按住拖动到松手位置
• 选中内容按住Ctrl/Option拖动，能够将内容复制粘贴到松手位置

搜索与替换

搜索栏后面的三个小图标为匹配规则

• 单文件搜索

  • Ctrl/Cmd + F输入搜索内容
  • 选中内容再Ctrl/Cmd + F

• 多文件搜索：左侧边栏小搜索图标

查看引用及跳转

Shift + F12：显示引用列表（在一个 js 文件里 export 了一个函数，在另一个文件里引用了它可是 shift + F12 找不到，那么能够在这个项目下添加一个 jsconfig.json 文件，这个文件会让 VSCode 知道，当前这个文件夹下的文件都是属于同一个项目的，从而进行索引）配置参考

自定义快捷键

Ctrl/Cmd + Shift + P能够打开命令面板并搜索"打开键盘快捷方式"回车，可自定义快捷键

字符大小写转换

Ctrl/Cmd + Shift + P打开命令面板 搜索 "转换为大写" 或 “转换为小写” 运行便可

按照字母进行 行排序

感受这个用不太到 hhh

Ctrl/Cmd + Shift + P打开命令面板 搜索 "按升序排列行" 或 “按降序排列行” 运行便可

打开文件过多时跳转到指定文件

Ctrl/Cmd + P: 可查看和搜索最近打开过的文件进行跳转 还未跳转前，Ctrl/Cmd + Enter 能够多窗口打开此文件

代码片断

Ctrl/Cmd + Shift + P打开命令面板 搜索 "配置用户代码片断"

选择语言我以vue.json为例，回车后会显示十几行被注释的内容，取消注释就是这样了

{
	// Place your snippets for Vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
    // 代码片断的名字
	"Print to console": { 
        // 打出log字符时能够看到代码片断的提示
		"prefix": "log", 
        // 代码片断内容
		"body": [ 
			"console.log('$1');",
			"$2"
		],
        // 提示时展现的内容
		"description": "Log output to console" 
	}
}
复制代码

$1光标位置

$2占位符 Tab后光标的位置

${1:label} label为自定义内容并会被选中

详细的可参考