配置
设置字体大小:Code-->Preferences-->Settings-->Font-->Font Size调整为14
设置文件失去焦点后自动保存:Code-->Preferences-->Settings-->Files-->Auto Save调整为onFocusChange
设置Tab键自动填入最佳推荐值:Code-->Preferences-->Settings-->Tab Completion调整为on
设置Tabsize:Code-->Preferences-->Settings-->Tab Size调整为2
设置保存的时候自动格式化:Code-->Preferences-->Settings-->Format On Save勾选
设置显示代码行号:Code-->Preferences-->Settings-->Line Numbers调整为on
排除文件/文件夹进行搜索:Code-->Preferences-->Settings-->Features-->Search-->Exclude-->Add Pattern
设置文件/文件夹不显示在工作空间:Code-->Preferences-->Settings-->Files-->Exclude-->Add Pattern
取消阻止快速建议:Code-->Preferences-->Settings-->Suggestions-->Snippets Prevent Quick Suggestions取消勾选
设置自动调整import语句相关顺序:Code-->Preferences-->Settings-->Code Actions On Save-->点击Edit in settings.json添加下列代码
"editor.codeActionsOnSave": {
"source.organizeImports": true,
}
配置会最终生成一个json文件
打开命令面板:win快捷键(Ctrl+Shift+P),mac快捷键(Cmd+Shift+P)
打开setting.json文件:在命令面板输入setting.json,选择Open Settings。Default Settings是默认配置文件,最好不要直接改,而是通过setting去覆盖
大小写转换:选中文本后,在命令面板输入transform ,可以修改文本的大小写
查看日志:在命令面板输入showlogs
快速生成HTML骨架:新建空的html文件,输入html:5
左右显示多个编辑器窗口:win快捷键(Ctrl+),mac快捷键(Command+)。快捷键(Command+1)切换到左边的窗口,快捷键(Command+2)切换到右边的窗口。
快捷键
windows的 Ctrl,mac下换成Command就行了。windows的 Alt,mac下换成Option就行了
常用的(General)
| Win快捷键 | Mac快捷键 | 说明 | 英文说明 | 备注 |
|---|---|---|---|---|
| Ctrl+Shift+P, F1 | Command+Shift+P, F1 | 显示命令面板 | Show Command Palette | -- |
| Ctrl+P | Command+P | 快速打开,定位到文件 | Quick Open, Go to File… | -- |
| Ctrl+Shift+N | Command+Shift+N | 新建窗口 | New window/instance | -- |
| Ctrl+Shift+W | Command+Shift+W | 关闭窗口 | Close window/instance | -- |
| Ctrl+, | Command+, | -- | User Settings | -- |
| Ctrl+K Ctrl+S | Command+K Command+S | 打开快捷菜单列表 | Keyboard Shortcuts | -- |
基本编辑(Basic editing)
| Win快捷键 | Mac快捷键 | 说明 | 英文说明 | 备注 |
|---|---|---|---|---|
| Ctrl+X | Command+X | 剪切行(空选定) | Cut line(empty selection) | -- |
| Ctrl+C | Command+C | 复制行(空选定) | Copy line(empty selection) | -- |
| Alt+ ↑ / ↓ | Option+ ↑ / ↓ | 向上/向下移动行 | Move line up/down | -- |
| Shift+Alt + ↓ / ↑ | Shift+Option + ↓ / ↑ | 向上/向下复制行 | Copy line up/down | -- |
| Ctrl+Shift+K | Command+Shift+K | 删除行 | Delete line | -- |
| Ctrl+Enter | Command+Enter | 向下插入空白行 | Insert line below | -- |
| Ctrl+Shift+Enter | Command+Shift+Enter | 向上插入空白行 | Insert line above | -- |
| Ctrl+Shift+\ | Command+Shift+\ | 跳转到匹配的括号 | Jump to matching bracket | -- |
| Ctrl+] / [ | Command+] / [ | 缩进 | Indent/outdent line | -- |
| Home / End | Home / End | 跳转到行首/行尾 | Go to beginning/end of line | -- |
| Ctrl+Home | Command+Home | 跳转到文件开头 | Go to beginning of file | -- |
| Ctrl+End | Command+End | 跳转到文件末尾 | Go to end of file | -- |
| Ctrl+↑ / ↓ | Command+↑ / ↓ | 向上/向下滚动行 | Scroll line up/down | -- |
| Alt+PgUp / PgDn | Option+PgUp / PgDn | 向上/向下滚动页面 | Scroll page up/down | -- |
| Ctrl+Shift+[ | Command+Shift+[ | 折叠(折叠)区域 | Fold (collapse) region | -- |
| Ctrl+Shift+] | Command+Shift+] | 展开(未折叠)区域 | Unfold (uncollapse) region | -- |
| Ctrl+K Ctrl+[ | Command+K Command+[ | 折叠(未折叠)所有子区域 | Fold (collapse) all subregions | -- |
| Ctrl+K Ctrl+] | Command+K Command+] | 展开(未折叠)所有子区域 | Unfold (uncollapse) all subregions | -- |
| Ctrl+K Ctrl+0 | Command+K Command+0 | 折叠(折叠)所有区域 | Fold (collapse) all regions | -- |
| Ctrl+K Ctrl+J | Command+K Command+J | 展开(未折叠)所有区域 | Unfold (uncollapse) all regions | -- |
| Ctrl+K Ctrl+C | Command+K Command+C | 添加行注释 | Add line comment | -- |
| Ctrl+K Ctrl+U | Command+K Command+U | 删除行注释 | Remove line comment | -- |
| Ctrl+/ | Command+/ | 切换行注释 | Toggle line comment | -- |
| Shift+Alt+A | Shift+Option+A | 切换块注释 | Toggle block comment | -- |
| Alt+Z | Option+Z | 切换换行 | Toggle word wrap | -- |
导航(Navigation)
| Win快捷键 | Mac快捷键 | 说明 | 英文说明 | 备注 |
|---|---|---|---|---|
| Ctrl+T | Command+T | 显示所有符号 | Show all Symbols | -- |
| Ctrl+G | Command+G | 转到行... | Go to Line... | -- |
| Ctrl+P | Command+P | 转到文件... | Go to File... | -- |
| Ctrl+Shift+O | Command+Shift+O | 转到符号... | Go to Symbol... | -- |
| Ctrl+Shift+M | Command+Shift+M | 显示问题面板 | Show Problems panel | -- |
| F8 | F8 | 转到下一个错误或警告 | Go to next error or warning | -- |
| Shift+F8 | Shift+F8 | 转到上一个错误或警告 | Go to previous error or warning | -- |
| Ctrl+Shift+Tab | Command+Shift+Tab | 导航编辑器组历史记录 | Navigate editor group history | -- |
| Alt+ ← / → | Option+ ← / → | 返回/前进 | Go back / forward | -- |
| Ctrl+M | Command+M | 切换选项卡移动焦点 | Toggle Tab moves focus | -- |
搜索和替换(Search and replace)
| Win快捷键 | Mac快捷键 | 说明 | 英文说明 | 备注 |
|---|---|---|---|---|
| Ctrl+F | Command+F | 查找 | Find | -- |
| Ctrl+H | Command+F | 替换 | Replace | -- |
| F3 / Shift+F3 | F3 / Shift+F3 | 查找下一个/上一个 | Find next/previous | -- |
| Alt+Enter | Option+Enter | 选择查找匹配的所有出现 | Select all occurences of Find match | -- |
| Ctrl+D | Command+D | 将选择添加到下一个查找匹配 | Add selection to next Find match | -- |
| Ctrl+K Ctrl+D | Command+K Command+D | 将最后一个选择移至下一个查找匹配项 | Move last selection to next Find match | -- |
| Alt+C / R / W | Option+C / R / W | 切换区分大小写/正则表达式/整个词 | Toggle case-sensitive / regex / whole word | -- |
多光标和选择(Multi-cursor and selection)
| Win快捷键 | Mac快捷键 | 说明 | 英文说明 | 备注 |
|---|---|---|---|---|
| Alt+Click | Option+Click | 插入光标 | Insert cursor | -- |
| Ctrl+Alt+ ↑ / ↓ | Command+Option+ ↑ / ↓ | 在上/下插入光标 | Insert cursor above / below | -- |
| Ctrl+U | Command+U | 撤消上一个光标操作 | Undo last cursor operation | -- |
| Shift+Alt+I | Shift+Option+I | 在选定的每一行的末尾插入光标 | Insert cursor at end of each line selected | -- |
| Ctrl+L | Command+L | 选择当前行 | Select current line | -- |
| Ctrl+Shift+L | Command+Shift+L | 选择当前选择的所有出现 | Select all occurrences of current selection | -- |
| Ctrl+F2 | Command+F2 | 选择当前字的所有出现 | Select all occurrences of current word | -- |
| Shift+Alt+→ | Shift+Option+→ | 展开选择 | Expand selection | -- |
| Shift+Alt+← | Shift+Option+← | 缩小选择 | Shrink selection | -- |
| Shift+Alt + (drag mouse) | Shift+Option + (drag mouse) | 列(框)选择 | Column (box) selection | -- |
| Ctrl+Shift+Alt + (arrow key) | Command+Shift+Option + (arrow key) | 列(框)选择 | Column (box) selection | -- |
| Ctrl+Shift+Alt +PgUp/PgDn | Command+Shift+Option +PgUp/PgDn | 列(框)选择页上/下 | Column (box) selection page up/down | -- |
丰富的语言编辑(Rich languages editing)
| Win快捷键 | Mac快捷键 | 说明 | 英文说明 | 备注 |
|---|---|---|---|---|
| Ctrl+Space, Ctrl+I | Command+Space, Command+I | 触发建议 | Trigger suggestion | -- |
| Ctrl+Shift+Space | Command+Shift+Space | 触发器参数提示 | Trigger parameter hints | -- |
| Shift+Alt+F | Shift+Option+F | 格式化文档 | Format document | -- |
| Ctrl+K Ctrl+F | Command+K Command+F | 格式选定区域 | Format selection | -- |
| F12 | F12 | 转到定义 | Go to Definition | -- |
| Alt+F12 | Option+F12 | Peek 定义 | Peek Definition | -- |
| Ctrl+K F12 | Command+K F12 | 打开定义到边 | Open Definition to the side | -- |
| Ctrl+. | Command+. | 快速解决 | Quick Fix | -- |
| Shift+F12 | Shift+F12 | 显示引用 | Show References | -- |
| F2 | F2 | 重命名符号 | Rename Symbol | -- |
| Ctrl+K Ctrl+X | Command+K Command+X | 修剪尾随空格 | Trim trailing whitespace | -- |
| Ctrl+K M | Command+K M | 更改文件语言 | Change file language | -- |
编辑器管理(Editor management)
| Win快捷键 | Mac快捷键 | 说明 | 英文说明 | 备注 |
|---|---|---|---|---|
| Ctrl+F4, Ctrl+W | Command+F4, Command+W | 关闭编辑器 | Close editor | -- |
| Ctrl+K F | Command+K F | 关闭文件夹 | Close folder | -- |
| Ctrl+\ | Command+\ | 拆分编辑器 | Split editor | -- |
| Ctrl+ 1 / 2 / 3 | Command+ 1 / 2 / 3 | 聚焦到第 1,第 2 或第 3 编辑器组 | Focus into 1, 2 or 3 editor group | -- |
| Ctrl+K Ctrl+ ←/→ | Command+K Command+ ←/→ | 聚焦到上一个/下一个编辑器组 | Focus into previous/next editor group | -- |
| Ctrl+Shift+PgUp / PgDn | Command+Shift+PgUp / PgDn | 向左/向右移动编辑器 | Move editor left/right | -- |
| Ctrl+K ← / → | Command+K ← / → | 移动活动编辑器组 | Move active editor group | -- |
文件管理(File management)
| Win快捷键 | Mac快捷键 | 说明 | 英文说明 | 备注 |
|---|---|---|---|---|
| Ctrl+N | Command+N | 新文件 | New File | -- |
| Ctrl+O | Command+O | 打开文件... | Open File... | -- |
| Ctrl+S | Command+S | 保存 | Save | -- |
| Ctrl+Shift+S | Command+Shift+S | 另存为... | Save As... | -- |
| Ctrl+K S | Command+K S | 全部保存 | Save All | -- |
| Ctrl+F4 | Command+F4 | 关闭 | Close | -- |
| Ctrl+K Ctrl+W | Command+K Command+W | 关闭所有 | Close All | -- |
| Ctrl+Shift+T | Command+Shift+T | 重新打开关闭的编辑器 | Reopen closed editor | -- |
| Ctrl+K Enter | Command+K Enter | 输入保持打开 | Keep preview mode editor open | -- |
| Ctrl+Tab | Command+Tab | 打开下一个 | Open next | -- |
| Ctrl+Shift+Tab | Command+Shift+Tab | 打开上一个 | Open previous | -- |
| Ctrl+K P | Command+K P | 复制活动文件的路径 | Copy path of active file | -- |
| Ctrl+K R | Command+K R | 显示资源管理器中的活动文件 | Reveal active file in Explorer | -- |
| Ctrl+K O | Command+K O | 显示新窗口/实例中的活动文件 | Show active file in new window/instance | -- |
显示(Display)
| Win快捷键 | Mac快捷键 | 说明 | 英文说明 | 备注 |
|---|---|---|---|---|
| F11 | F11 | 切换全屏 | Toggle full screen | -- |
| Shift+Alt+0 | Shift+Option+0 | 切换编辑器布局 | Toggle editor layout (horizontal/vertical) | -- |
| Ctrl+ = / - | Command+ = / - | 放大/缩小 | Zoom in/out | -- |
| Ctrl+B | Command+B | 切换侧栏可见性 | Toggle Sidebar visibility | -- |
| Ctrl+Shift+E | Command+Shift+E | 显示浏览器/切换焦点 | Show Explorer / Toggle focus | -- |
| Ctrl+Shift+F | Command+Shift+F | 显示搜索 | Show Search | -- |
| Ctrl+Shift+G | Command+Shift+G | 显示 | Show Source Control | -- |
| Ctrl+Shift+D | Command+Shift+D | 显示调试 | Show Debug | -- |
| Ctrl+Shift+X | Command+Shift+X | 显示扩展 | Show Extensions | -- |
| Ctrl+Shift+H | Command+Shift+H | 替换文件 | Replace in files | -- |
| Ctrl+Shift+J | Command+Shift+J | 切换搜索详细信息 | Toggle Search details | -- |
| Ctrl+Shift+U | Command+Shift+U | 打开新命令提示符/终端 | Show Output panel | -- |
| Ctrl+Shift+V | Command+Shift+V | 显示输出面板 | Open Markdown preview | -- |
| Ctrl+K V | Command+K V | 切换 Markdown 预览 | Open Markdown preview to the side | -- |
| Ctrl+K Z | Command+K Z | 从旁边打开 Markdown 预览 | Zen Mode (Esc Esc to exit) | -- |
调试(Debug)
| Win快捷键 | Mac快捷键 | 说明 | 英文说明 | 备注 |
|---|---|---|---|---|
| F9 | F9 | 切换断点 | Toggle breakpoint | -- |
| F5 | F5 | 开始/继续 | Start/Continue | -- |
| Shift+F5 | Shift+F5 | 停止 | Stop | -- |
| F11 / Shift+F11 | F11 / Shift+F11 | 下一步/上一步 | Step into/out | -- |
| F10 | F10 | 跳过 | Step over | -- |
| Ctrl+K Ctrl+I | Command+K Command+I | 显示悬停 | Show hover | -- |
集成终端(Integrated terminal)
| Win快捷键 | Mac快捷键 | 说明 | 英文说明 | 备注 |
|---|---|---|---|---|
| Ctrl+` | Command+` | 显示集成终端 | Show integrated terminal | -- |
| Ctrl+Shift+` | Command+Shift+` | 创建新终端 | Create new terminal | -- |
| Ctrl+C | Command+C | 复制选定 | Copy selection | -- |
| Ctrl+V | Command+V | 粘贴到活动端子 | Paste into active terminal | -- |
| Ctrl+↑ / ↓ | Command+↑ / ↓ | 向上/向下滚动 | Scroll up/down | -- |
| Shift+PgUp / PgDn | Shift+PgUp / PgDn | 向上/向下滚动页面 | Scroll page up/down | -- |
| Ctrl+Home / End | Command+Home / End | 滚动到顶部/底部 | Scroll to top/bottom | -- |
插件
Auto Rename Tag:自动修改匹配的HTML标签
vscode-icons:改变编辑器里面的文件图标,执行Activate Vscode Icons命令
Path Intellisense:智能路径提示
Markdown Preview Enhanced:实时预览Markdown,执行Markdown Preview Enhanced:**相关命令
GitLens:详细的Git提交日志
Stylelint:CSS/SCSS/Less语法检查
Prettier:格式化代码
Prettier ESLint:格式化代码
Import Cost:引入包大小计算
Turbo Console Log:快捷添加console.log,一键注释/启用/删除所有console.log
ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log
css-auto-prefix:自动添加CSS私有前缀
change-case:转换命名风格,执行Change Case **相关命令
CSS Peek:定位CSS类名
vscode-json:处理JSON文件,执行vscode-json:**相关命令
Regex Previewer:实时预览正则表达式的效果,Ctrl+Alt+M(⌥⌘M)来打开/关闭
Highlight Matching Tag:找匹配标签对象
Color Highlight:颜色高亮展示
Image preview:图片显示
Indenticator:突出目前的缩进深度,没配置成功
Code Runner:运行代码
Code Spell Checker:检验单词是正确
Partial Diff:比较文件,选中代码,右键Select Text for Compare,选中另外代码,右键Compare Text with Previous Selection即可
px to rem & rpx (cssrem):单位换算
ESLint:检查javascript语法错误
view-in-browser:打开html文件在浏览器显示,选中html文件右击选中"View In Browser"或者"View In Other Browser",可以把文件在浏览器打开