VSCode最佳实践

VSCode安装

  1. 从microsoft官网下载VSCode安装包:https://code.visualstudio.com/download
  2. 使用包管理器安装:
    • scoop: scoop install vscode
    • winget: winget install --id=Microsoft.VisualStudioCode

使用哪种方式安装,看您心情。我使用的是scoop包管理器安装。scoop您值得拥有!

VSCode配置

打开VSCode,按键Ctrl+Shift+P,输入Preferences: Open Settings (JSON),然后添加以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
{
"editor.fontSize": 14,
"editor.fontFamily": "'FiraCode Nerd Font Mono',Consolas, 'Courier New', monospace",
"editor.rulers": [
120
],
//使用相对行号
"editor.lineNumbers": "relative",
//丝滑打字
"editor.smoothScrolling": true,
"editor.cursorBlinking": "expand",
"editor.cursorSmoothCaretAnimation": "on",
"workbench.list.smoothScrolling": true,
//鼠标控制大小 Ctrl+鼠标左轮
"editor.mouseWheelZoom": true,
//彩虹括号与作用域块线条
"editor.guides.bracketPairs": true,
"editor.bracketPairColorization.enabled": true,
// 更加智能的代码提示
// 控制活动代码段是否阻止快速建议
"editor.suggest.snippetsPreventQuickSuggestions": false,
// 除了 `Tab` 键以外, `Enter` 键是否同样可以接受建议
// 这能减少“插入新行”和“接受建议”命令之间的歧义
"editor.acceptSuggestionOnEnter": "smart",
// 代码补全列表中,优先选择最近的建议
"editor.suggestSelection": "recentlyUsedByPrefix",
"editor.suggest.insertMode": "replace",
// 自动补全括号、引号
"editor.autoClosingBrackets": "beforeWhitespace",
"editor.autoClosingDelete": "always",
"editor.autoClosingOvertype": "always",
"editor.autoClosingQuotes": "beforeWhitespace",
// 关闭缩进猜测
"editor.detectIndentation": false,
"editor.tabSize": 4,
// 美化窗口
"window.dialogStyle": "custom",
// 自动换行和行高
"editor.wordWrap": "on",
"editor.lineHeight": 1.5,
//控制编辑器是否可以将光标移动到最后一行以后或者最上一行以上,这对vim模式下的gg、G命令来说更加友好,在settings.json中添加上以下配置项
"editor.scrollBeyondLastLine": false,
//关闭自动传参建议,使用按键手动触发,在settings.json中添加上以下配置项
"editor.parameterHints.enabled": false,
// 行内样式代码补全
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
// 双击选中被截断字符, 再也不用担心双击被下滑线截断了
"editor.wordSeparators": "`~!@%^&*()=+[{]}\\|;:'\",.<>/?(),。;:",
// 折行缩进策略和关闭右侧代码地图
"editor.minimap.enabled": false,
"editor.foldingStrategy": "indentation",
// 父级自动吸附置顶
"editor.stickyScroll.enabled": true,



// 文件夹紧凑模式
"explorer.compactFolders": true,
"notebook.compactView": true,
// typescript语言设置中文
"typescript.locale": "zh-CN",
// 类型提示
"javascript.inlayHints.enumMemberValues.enabled": true,
"javascript.inlayHints.functionLikeReturnTypes.enabled": false,
"javascript.inlayHints.parameterNames.enabled": "none",
"javascript.updateImportsOnFileMove.enabled": "always",
"javascript.preferences.quoteStyle": "single",
"typescript.preferences.quoteStyle": "single",
// TS 导入、重命名、补全自动更新相关引用
"typescript.preferences.preferTypeOnlyAutoImports": true,
"typescript.preferences.includePackageJsonAutoImports": "on",
// typescript枚举类型提示
"typescript.inlayHints.enumMemberValues.enabled": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"vue.updateImportsOnFileMove.enabled": true,
// 关闭开屏 VSCode 的亲切问候
"workbench.startupEditor": "none",
// 自动猜测文本编码
"files.autoGuessEncoding": true,
// 保存自动删除末尾空格
"files.trimTrailingWhitespace": false,
// 搜索吸附目录
"search.searchEditor.singleClickBehaviour": "peekDefinition",
// 终端代码补全(实验性配置)
"terminal.integrated.shellIntegration.suggestEnabled": true,
// 终端命令置顶
"terminal.integrated.stickyScroll.enabled": true,
"vsicons.dontShowNewVersionMessage": true,
"terminal.integrated.defaultProfile.windows": "Command Prompt",
"terminal.integrated.fontWeight": "normal",
"terminal.integrated.fontFamily": "Cascadia Code NF",


// 关闭搜索中跟踪符号链接, 提高性能
"search.followSymlinks": false,
// 搜索排除目录
"search.exclude": {
"**/node_modules": true,
"**/pnpm-lock.yaml": true,
"**/package-lock.json": true,
"**/.DS_Store": true,
"**/.git": true,
"**/.gitignore": true,
"**/.idea": true,
"**/.svn": true,
"**/.vscode": true,
"**/build": true,
"**/dist": true,
"**/tmp": true,
"**/yarn.lock": true
},
// 文件关联
"files.associations": {
"*.wxss": "css",
"*.wxml": "html",
"*.svg": "html",
"*.xml": "html",
"*.wxs": "javascript",
// json注释
"*.cjson": "jsonc",
"*.json": "jsonc"
},
// window 相对路径复制使用 /
"explorer.copyRelativePathSeparator": "/",
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/Thumbs.db": true,
"**/*.js": {
"when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中
},
"**/node_modules": true
},
"workbench.iconTheme": "material-icon-theme",
"better-comments.tags": [
{
"tag": "fix", // 关键字(不区分大小写),Better Comments 检测到关键字后才会将这行注释转换样式
"color": "#FF2D00", // 文字颜色
"strikethrough": false, // 是否显示删除线
"underline": false, // 是否显示下划线
"backgroundColor": "transparent", // 背景颜色
"bold": false, // 是否加粗
"italic": false // 是否启用斜体文字
},
],
"window.newWindowProfile": "默认",

"extensions.experimental.affinity": {
"vscodevim.vim": 1
},
//VIM配置
"vim.hlsearch": true, // 突出显示与当前搜索匹配的所有文本
"vim.incsearch": true,
"vim.leader": "<space>", // leader键
"vim.easymotion": true, // 启用easymotion插件
"vim.surround": true, // 启用vim-surround插件
"vim.autoindent": true,
"vim.useSystemClipboard": true, // 启用系统粘贴板作为vim寄存器
"vim.useCtrlKeys": true, // 由vim接管ctrl+any的按键,而不是vscode
// 普通模式下的非递归按键绑定
"vim.normalModeKeyBindingsNonRecursive": [],
// 插入模式下的非递归按键绑定
"vim.insertModeKeyBindings": [],
// 命令模式下的非递归按键绑定
"vim.commandLineModeKeyBindingsNonRecursive": [],
// 可视模式下的非递归按键绑定
"vim.operatorPendingModeKeyBindings": [],
// 下面定义的按键将交由vscode进行处理,而不是vscode-vim插件
"vim.handleKeys": {
"<C-a>": false,
"<C-f>": false,
"<C-z>": false,
"<C-x>": false,
"<C-c>": false,
"<C-v>": false,
//"<C-w>": false,
"<C-n>": false,
"<C-y>": false,
},
"vim.statusBarColors.visualblock": [
"#86592d",
"#ffffff"
],

}

插件

VSCode常用插件

  1. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
    中文语言包,当然,如果觉得英文界面看着更顺眼,就不需要这个插件了。
  2. Git四部曲
    • GitLens
    • Git History
    • Git Graph
    • gitignore
  3. Better Comments Next
    Better Comments的更新版
  4. Markdown All in One
    Markdown 语法高亮
  5. Markdown Preview Enhanced
    Markdown预览
  6. Pettier - Code formatter
    代码格式化插件
  7. icons图标
    按下载排名,Material Icons Theme和vscode-icons是下载量最大的图标插件,效果也不错。
  8. Vim
    vscode中的vim模拟器
  9. Project Manager
    项目管理插件,可以在当前窗口中快速打开项目。
  10. Code Spell Checker
    拼写检查,防止写代码时手误导致拼写错误。
  11. CodeSnap
    截图插件,选择代码后自动截图,对于写作非常有用。
  12. Todo Tree
    显示Todo列表
  13. Lingma - Alibaba Cloud AI Code Assistant
    灵码-阿里云的AI代码助手,个人版免费,只需要一个aliyun账号,白嫖不香吗?

基本插件暂时介绍这么多,后面会根据不同的环境(profile)添加不同的插件。

前端开发

待补充

Java开发

待补充

Go语言开发

待补充

Rust语言开发

待补充

Python语言开发

待补充

C/C++语言开发

待补充

Perl语言开发

待补充

Lisp语言开发

待补充

快捷键

通用

  1. Ctrl+Shift+P 显示命令面板
  2. Ctrl+P 快速打开Quick Open
  3. Ctrl+Shift+N 新建一个窗口实例
  4. Ctrl+Shift+W 关闭当前窗口实例

编辑

快捷键 功能 Function
Ctrl+X 剪切行(空选定) Cut line (empty selection)
Ctrl+C 复制行(空选定)Copy line (empty selection)
Alt+ ↑ / ↓ 向上/向下移动行 Move line up/down
Shift+Alt + ↓ / ↑ 向上/向下复制行 Copy line up/down
Ctrl+Shift+K 删除行 Delete line
Ctrl+Enter 在下面插入行 Insert line below
Ctrl+Shift+Enter 在上面插入行 Insert line above
Ctrl+Shift+\ 跳到匹配的括号 Jump to matching bracket
Ctrl+] / [ 增加/减少缩进行 Indent/outdent line
Home 转到行首 Go to beginning of line
End 转到行尾 Go to end of line
Ctrl+Home 转到文件开头 Go to beginning of file
Ctrl+End 转到文件末尾 Go to end of file
Ctrl+↑ / ↓ 向上/向下滚动行 Scroll line up/down
Alt+PgUp / PgDown 向上/向下滚动页面 Scroll page up/down
Ctrl+Shift+[ 折叠(折叠)区域 Fold (collapse) region
Ctrl+Shift+] 展开(未折叠)区域 Unfold (uncollapse) region
Ctrl+K Ctrl+[ 折叠(未折叠)所有子区域 Fold (collapse) all subregions
Ctrl+K Ctrl+] 展开(未折叠)所有子区域 Unfold (uncollapse) all subregions
Ctrl+K Ctrl+0 折叠(折叠)所有区域 Fold (collapse) all regions
Ctrl+K Ctrl+J 展开(未折叠)所有区域 Unfold (uncollapse) all regions
Ctrl+K Ctrl+C 添加行注释 Add line comment
Ctrl+K Ctrl+U 删除行注释 Remove line comment
Ctrl+/ 切换行注释 Toggle line comment
Shift+Alt+A 切换块注释 Toggle block comment
Alt+Z 切换换行 Toggle word wrap

导航 Navigation

快捷键 功能 Function
Ctrl + T 显示所有符号 Show all Symbols
Ctrl + G 转到行… Go to Line…
Ctrl + P 转到文件… Go to File…
Ctrl + Shift + O 转到符号… Go to Symbol…
Ctrl + Shift + M 显示问题面板 Show Problems panel
F8 转到下一个错误或警告 Go to next error or warning
Shift + F8 转到上一个错误或警告 Go to previous error or warning
Ctrl + Shift + Tab 导航编辑器组历史记录 Navigate editor group history
Alt + ←/→ 返回/前进(返回上一步/返回下一步) Go back / forward
Ctrl + M 切换选项卡移动焦点 Toggle Tab moves focus

搜索和替换 Search and replace

快捷键 功能 Function
Ctrl + F 查找 Find
Ctrl + H 替换 Replace
F3 / Shift + F3 查找下一个/上一个 Find next/previous
Alt + Enter 选择查找匹配的所有出现 Select all occurences of Find match
Ctrl + D 将选择添加到下一个查找匹配 Add selection to next Find match
Ctrl + K Ctrl + D 将最后一个选择移至下一个查找匹配项 Move last selection to next Find match
Alt + C / R / W 切换区分大小写/正则表达式/整个词 Toggle case-sensitive / regex / whole word

多光标选择 Multiple Cursor and Selections

快捷键 功能 Function
Alt +单击 插入光标 Insert cursor
Ctrl + Alt +↑/↓ 在上/下插入光标 Insert cursor above / below
Ctrl + U 撤消上一个光标操作 Undo last cursor operation
Shift + Alt + I 在选定的每一行的末尾插入光标 Insert cursor at end of each line selected
Ctrl + I 选择当前行 Select current line
Ctrl + Shift + L 选择当前选择的所有出现 Select all occurrences of current selection
Ctrl + F2 选择当前字的所有出现 Select all occurrences of current word
Shift + Alt + → 展开选择 Expand selection
Shift + Alt + ← 缩小选择 Shrink selection
Shift + Alt + (拖动鼠标) 列(框)选择 Column (box) selection
Ctrl + Shift + Alt +(箭头键) 列(框)选择 Column (box) selection
Ctrl + Shift + Alt + PgUp / PgDown 列(框)选择页上/下 Column (box) selection page up/down

丰富的语言编辑 Rich languages editing

快捷键 功能 Function
Ctrl + 空格 触发建议 Trigger suggestion
Ctrl + Shift + Space 触发器参数提示 Trigger parameter hints
Tab Emmet 展开缩写 Emmet expand abbreviation
Shift + Alt + F 格式化文档 Format document
Ctrl + K Ctrl + F 格式选定区域 Format selection
F12 转到定义 Go to Definition
Alt + F12 Peek定义 Peek Definition
Ctrl + K F12 打开定义到边 Open Definition to the side
Ctrl + . 快速解决 Quick Fix
Shift + F12 显示引用 Show References
F2 重命名符号 Rename Symbol
Ctrl + Shift + . /, 替换为下一个/上一个值 Replace with next/previous value
Ctrl + K Ctrl + X 修剪尾随空格 Trim trailing whitespace
Ctrl + K M 更改文件语言 Change file language

编辑器管理

快捷键 功能 Function
Ctrl+F4, Ctrl+W 关闭编辑器 Close editor
Ctrl+K F 关闭文件夹 Close folder
Ctrl+\ 拆分编辑器 Split editor
Ctrl+ 1 / 2 / 3 聚焦到第1,第2或第3编辑器组 Focus into 1st, 2nd or 3rd editor group
Ctrl+K Ctrl+ ←/→ 聚焦到上一个/下一个编辑器组 Focus into previous/next editor group
Ctrl+Shift+PgUp / PgDown 向左/向右移动编辑器 Move editor left/right
Ctrl+K ← / → 移动活动编辑器组 Move active editor group

文件管理

快捷键 功能 Function
Ctrl+N 新文件 New File
Ctrl+O 打开文件… Open File…
Ctrl+S 保存 Save
Ctrl+Shift+S 另存为… Save As…
Ctrl+K S 全部保存 Save All
Ctrl+F4 关闭 Close
Ctrl+K Ctrl+W 关闭所有 Close All
Ctrl+Shift+T 重新打开关闭的编辑器 Reopen closed editor
Ctrl+K 输入保持打开 Enter Keep Open
Ctrl+Tab 打开下一个 Open next
Ctrl+Shift+Tab 打开上一个 Open previous
Ctrl+K P 复制活动文件的路径 Copy path of active file
Ctrl+K R 显示资源管理器中的活动文件 Reveal active file in Explorer
Ctrl+K O 显示新窗口/实例中的活动文件 Show active file in new window/instance

显示

快捷键 功能 Function
F11 切换全屏 Toggle full screen
Shift+Alt+1 切换编辑器布局 Toggle editor layout
Ctrl+ = / - 放大/缩小 Zoom in/out
Ctrl+B 切换侧栏可见性 Toggle Sidebar visibility
Ctrl+Shift+E 显示浏览器/切换焦点 Show Explorer / Toggle focus
Ctrl+Shift+F 显示搜索 Show Search
Ctrl+Shift+G 显示Git Show Git
Ctrl+Shift+D 显示调试 Show Debug
Ctrl+Shift+X 显示扩展 Show Extensions
Ctrl+Shift+H 替换文件 Replace in files
Ctrl+Shift+J 切换搜索详细信息 Toggle Search details
Ctrl+Shift+C 打开新命令提示符/终端 Open new command prompt/terminal
Ctrl+Shift+U 显示输出面板 Show Output panel
Ctrl+Shift+V 切换Markdown预览 Toggle Markdown preview
Ctrl+K V 从旁边打开Markdown预览 Open Markdown preview to the side

调试

快捷键 功能 Function
F9 切换断点 Toggle breakpoint
F5 开始/继续 Start/Continue
Shift+F5 停止 Stop
F11 / Shift+F11 下一步/上一步 Step into/out
F10 跳过 Step over
Ctrl+K Ctrl+I 显示悬停 Show hover

集成终端

快捷键 功能 Function
Ctrl+` 显示集成终端 Show integrated terminal
Ctrl+Shift+` 创建新终端 Create new terminal
Ctrl+Shift+C 复制选定 Copy selection
Ctrl+Shift+V 粘贴到活动端子 Paste into active terminal
Ctrl+↑ / ↓ 向上/向下滚动 Scroll up/down
Shift+PgUp / PgDown 向上/向下滚动页面 Scroll page up/down
Ctrl+Home / End 滚动到顶部/底部 Scroll to top/bottom