快捷键 | 技术文档

# 快捷键

打开颜色主题选择下拉框: ctrl + k + ctrl + t

# 光标相关

快捷键	描述
Home	移动到行首
End	移动到行尾
Ctrl + Home	移动到文件开头
Ctrl + End	移动到文件结尾
Shift + Home	选中光标到行首的内容
Shift + End	选中光标到行尾的内容
Ctrl + D	选中下一个匹配内容
Ctrl + U	回退上一个光标操作

# 全局命令

在 Windows 中，VSCode 的安装程序选项中有是否把 Code 加入 Path 的选项，勾选上即可

在 macOS 中，VSCode 可以将自身配置到环境变量 Path 中

使用快捷键 shift + command + p，然后输入 shell code 回车即可

# 字体相关

{
    // 字体大小
    "editor.fontSize": 13,
    // tab键缩进4个空格
    "editor.tabSize": 4,
    // 字体粗细
    "editor.fontWeight": "normal",
    // 字体样式
    "editor.fontFamily": "CascadiaCode-Regular, CascadiaMono, Menlo",
    // 连字效果
    "editor.fontLigatures": true,
}

1
2
3
4
5
6
7
8
9
10
11
12

# 设置字体

打开设置，搜索 Editor: Font Family，将字体名称放到输入框中的字体前面即可

漂亮的字体会让人赏心悦目，推荐几个不错的字体:

'JetBrains Mono Regular', 'Fira Code Regular', 'Cascadia Code Regular'

# 连字效果

不是所有的字体都支持连字效果的，VSCode 默认的字体就不支持，但上面推荐的两个字体都是支持的

打开设置，搜索 fontLigatures，然后打开 settings.json 文件，添加以下配置即可开启连字效果

"editor.fontLigatures": true,

# 代码片段

用户代码片段配置存放目录，我的代码片段配置存储库: 点击前往 (opens new window)

cd "/Users/liang/Library/Application Support/Code/User/snippets"

markdown 文件相关配置，在 settings.json 中添加以下内容

"[markdown]":{
    // 关闭保存自动格式化
    "editor.formatOnSave": false,
    // markdown 文件开启代码片段提示
    "editor.quickSuggestions": true,
}

1
2
3
4
5
6

# javascript

触发代码: re

const name = require("package");

# markdown

触发代码	代码片段
a	`[技术博客](https://www.itqaq.com)`
img	`![](https://doc.itqaq.com/liang.png)`

触发代码: table，生成 markdown 表格

| Tables |  Are  |
| :----: | :---: |
| col 1  | right |
| col 2  | right |

1
2
3
4

# 全局代码片段

打印数据，适用语言: javascript,typescript

console.log(name); // prefix: l
console.log("name: ", name) // prefix: lg

1
2

定义变量，适用语言: javascript,typescript

let name = value; // prefix: la

const name = value; // prefix: ca

1
2
3

触发代码: fun，适用语言: javascript,typescript

function name(args) {
    
}

1
2
3

prefix	example
rt	return

# 其他配置

# 单词分隔符

PHP 变量以 $ 符号开头，鼠标双击变量名是只能选中变量名称，如果想要选中 $ 符号，可以通过修改下面配置实现。在设置中搜索下面配置项，去除该配置中的 $ 符号即可

editor.wordSeparators

# 代码格式化

{
    "[html]": {
		"editor.defaultFormatter": "vscode.html-language-features"
	},
    "[json]": {
		"editor.defaultFormatter": "vscode.json-language-features"
	},
    "[javascript]":{
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

常用插件 →