基本使用

快捷键 描述
Ctrl+Shift+P, F1 打开命令面板
Ctrl+~ 关闭下面的面板
Ctrl+P 快速打开文件
Ctrl+Shift+N 打开新窗口/实例
Ctrl+Shift+W 关闭窗口/实例
ctrl+b 关闭打开资源管理器
Alt+ ↑ 或 ↓ 向上/向下移动当前行
Shift+Alt + ↓ 或 ↑ 向上/向下复制当前行
Ctrl+Shift+K 删除当前行
Ctrl+Enter 在当前行以下插入
Ctrl+Shift+Enter 在当前行以上插入
Ctrl+Shift+\ 跳转到匹配的括号
Ctrl+] 或 [ 缩进/取消缩进
Home 转到行首
End 转到行尾
Ctrl+Home 转到页首
Ctrl+End 转到页尾
Ctrl+↑ 或 ↓ 向上/向下滚动
Alt+PgUp 或 PgDown 向上/向下翻页
Ctrl+Shift+[ 折叠当前代码块
Ctrl+Shift+] 展开当前代码块
Ctrl+K Ctrl+[ 折叠所有子代码块
Ctrl+K Ctrl+] 展开所有子代码块
Ctrl+K Ctrl+0 折叠所有代码块
Ctrl+K Ctrl+J 展开所有代码块
Ctrl+/ 添加/删除行注释
Alt+Z 自动换行

导航

快捷键 描述
Ctrl+T 显示所有符号
Ctrl+G 跳转到行
Ctrl+P 跳转到文件
Ctrl+Shift+O 跳转到符号
ctrl+tab 显示打开的文件,可以关闭文件
Ctrl+Shift+Tab 显示编辑器文件历史
Ctrl+Shift+E 跳转到资源管理器,再 ctrl+tab 可以但会文件
Alt+ ← 或 → 向后/向前查看文件

搜索和替换

快捷键 描述
Ctrl+F 查找
Ctrl+H 替换
F3 或 Shift+F3 查找下一个/前一个
Alt+Enter 选择所有匹配项
Ctrl+D 选择下一个匹配项
Ctrl+K Ctrl+D 跳过当前选择项
Alt+C 或 R 或 W 切换大小写敏感/正则表达式/全词

多光标与选择

快捷键 描述
Alt+Click 插入光标
Ctrl+Alt+ ↑ 或 ↓ 向上/向下插入光标
Ctrl+U 撤销上一个光标
Shift+Alt+I 在选中行的行尾插入光标
Ctrl+I 选择当前行
Ctrl+Shift+L 选择当前选中项的所有匹配项
Ctrl+F2 选择当前单词的所有匹配项
Shift+Alt+→ 扩展选择
Shift+Alt+← 缩小选择
Shift+Alt + (drag mouse) 列(框)选择
Ctrl+Shift+Alt + (arrow key) 列(框)选择
Ctrl+Shift+Alt + PgUp/PgDown 向上页/下页列(框)选择

富语言编辑

快捷键 描述
Ctrl+Space 打开建议
Ctrl+Shift+Space 打开参数提示
Tab Emmet 展开缩写
Shift+Alt+F 格式化文档
Ctrl+K Ctrl+F 格式化选择区域
F12 跳转到定义
Alt+F12 打开窗口显示定义
Ctrl+K F12 打开侧边栏显示定义
Ctrl+. 快速解决
Shift+F12 显示引用
F2 重命名符号
Ctrl+Shift+ . 或 , 替换为下一个/上一个值
Ctrl+K Ctrl+X 删除行尾空格
Ctrl+K M 更改文本语言

编辑管理

快捷键 描述
Ctrl+K F 关闭文件夹
Ctrl+\ 拆分编辑器窗口
Ctrl+k,ctrl+↓ 合并编辑器窗口
Ctrl+F4, Ctrl+W 关闭编辑窗口
Ctrl+ 1 或 2 或 3 切换到第一、第二或第三个窗口
Ctrl+K Ctrl+ ←/→ 切换到上一个/下一个窗口
Ctrl+Shift+PgUp /PgDown 向左/向右移动编辑的文件

插件

Atuo Rename Tag

修改 html 标签,自动帮你完成头部和尾部闭合标签的同步修改

vscode-icons

显示 Visual Studio 代码的图标,目前该插件已被 vscode 内部支持:“文件” -> “首选项” -> “文件图标主题”

Bracket Pair Colorizer

这个插件用于给代码中配对的符号(例如左右括号、花括号等)添加鲜明的颜色,帮助我们快速找到成对的符号。

Bracket Pair Colorizer / Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 是增强版

Highlight Matching Tag

高亮对应的 HTML 标签 以及 标识出对应的各种括号。

Color Highlight

用于给我们代码中的颜色进行高亮展示的插件。

Path Intellisense

可自动填充文件名。

HTML Snippets

完整的 HTML 代码提示,包括 HTML5

HTML CSS Support

在 html 标签上写 class 智能提示 css 样式

HTMLHint

html 代码检测,支持 html5

stylelint

CSS / SCSS / Less 语法检查

Markdown Preview

实时预览 markdown。

jQuery Code Snippets

jQuery 代码提示 超过 130 个用于 JavaScript 代码的 jQuery 代码片段。 只需键入字母’jq’即可获得所有可用 jQuery 代码片段的列表。

CSS Peek

可以在 HTML 中通过 CSS id 或则 class 来定位到其定义。

Code Runner

支持多种语言的代码的立即执行。

open-in-browser

在浏览器中打开 html 文件,快捷键 ctrl+alt+o

Live Server

这个插件基本功能是预览网页,但它的特点是:会将网页在本地服务器上预览,最重要的是代码保存之后,浏览器自动刷新

Better Comments

一款美化注释的插件,可以根据不同种类的注释,显示不同的颜色,一目了然。

Prettier

格式化插件。有的人可能会推荐 Beautify。我原来也是一直用这个,后来发现这个并不能格式化 React 的代码。所以果断换成 Prettier。

carbon-now-sh

将代码分享为图片(图片的格式可以为 png 和 svg) 是因为如果直接分享代码,在有些地方代码格式可能会乱。

GitLens

详细的 Git 提交日志。 尤其是多人协作时:哪一行代码,何时、何人提交都有记录。

SVG View

预览 SVG。

Regex Previewer

实时预览正则表达式的效果。

Jupyter

提供 Jupyter 基本支持 Jupyter Keymap : 提供 Jupyter 快捷键支持 Jupyter Notebook Renderer :渲染和解析器,渲染例如 gif、png、plotly 等格式 安装插件之后,直接创建后缀为.ipynb的文件,打开即可像 Jupyter Notebook 一样使用。

PHP Intelephense

PHP 代码提示工具,支付代码提示、查找定义、类搜索等功能,非常强大。 下载 PHP Intelephense 这个插件,要求 php 版本大于 7,且设置环境变量。 配置好了后重新 vsCode 编辑器,点击函数转到定义或引用 首选项->设置->搜索 PHP Intelephense 插件进行配置 在settings.json中编辑添加下面路径

"php.validate.executablePath": "D:\\wamp64\\bin\\php\\php7.4.0\\php.exe",
"php.executablePath": "D:\\wamp64\\bin\\php\\php7.4.0\\php.exe"

技巧

vscode 资源管理器文件过滤和搜索过滤

文件位置:文件(File)-首选项(Preference)-设置(setting) ->搜索->"setting.json"文件输入一下内容即可

"files.exclude": {
    "**/*.zip": true,
    "**/*.tar": true,
    "**/*.tar.gz": true,
    "**/*.pdf": true,
    "**/*.rar": true,
    "**/*.chm": true,
    "**/*.pdf": true
},
"search.exclude": {
    "node_modules": true
}

原子替换

html 替换为格式化 html 标签

<(.*?)>
`<$1>`