VSCode使用

553 阅读10分钟

配置

设置字体大小: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, F1Command+Shift+P, F1显示命令面板Show Command Palette--
Ctrl+PCommand+P快速打开,定位到文件Quick Open, Go to File…--
Ctrl+Shift+NCommand+Shift+N新建窗口New window/instance--
Ctrl+Shift+WCommand+Shift+W关闭窗口Close window/instance--
Ctrl+,Command+,--User Settings--
Ctrl+K Ctrl+SCommand+K Command+S打开快捷菜单列表Keyboard Shortcuts--

基本编辑(Basic editing)

Win快捷键Mac快捷键说明英文说明备注
Ctrl+XCommand+X剪切行(空选定)Cut line(empty selection)--
Ctrl+CCommand+C复制行(空选定)Copy line(empty selection)--
Alt+ ↑ / ↓Option+ ↑ / ↓向上/向下移动行Move line up/down--
Shift+Alt + ↓ / ↑Shift+Option + ↓ / ↑向上/向下复制行Copy line up/down--
Ctrl+Shift+KCommand+Shift+K删除行Delete line--
Ctrl+EnterCommand+Enter向下插入空白行Insert line below--
Ctrl+Shift+EnterCommand+Shift+Enter向上插入空白行Insert line above--
Ctrl+Shift+\Command+Shift+\跳转到匹配的括号Jump to matching bracket--
Ctrl+] / [Command+] / [缩进Indent/outdent line--
Home / EndHome / End跳转到行首/行尾Go to beginning/end of line--
Ctrl+HomeCommand+Home跳转到文件开头Go to beginning of file--
Ctrl+EndCommand+End跳转到文件末尾Go to end of file--
Ctrl+↑ / ↓Command+↑ / ↓向上/向下滚动行Scroll line up/down--
Alt+PgUp / PgDnOption+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+0Command+K Command+0折叠(折叠)所有区域Fold (collapse) all regions--
Ctrl+K Ctrl+JCommand+K Command+J展开(未折叠)所有区域Unfold (uncollapse) all regions--
Ctrl+K Ctrl+CCommand+K Command+C添加行注释Add line comment--
Ctrl+K Ctrl+UCommand+K Command+U删除行注释Remove line comment--
Ctrl+/Command+/切换行注释Toggle line comment--
Shift+Alt+AShift+Option+A切换块注释Toggle block comment--
Alt+ZOption+Z切换换行Toggle word wrap--

导航(Navigation)

Win快捷键Mac快捷键说明英文说明备注
Ctrl+TCommand+T显示所有符号Show all Symbols--
Ctrl+GCommand+G转到行...Go to Line...--
Ctrl+PCommand+P转到文件...Go to File...--
Ctrl+Shift+OCommand+Shift+O转到符号...Go to Symbol...--
Ctrl+Shift+MCommand+Shift+M显示问题面板Show Problems panel--
F8F8转到下一个错误或警告Go to next error or warning--
Shift+F8Shift+F8转到上一个错误或警告Go to previous error or warning--
Ctrl+Shift+TabCommand+Shift+Tab导航编辑器组历史记录Navigate editor group history--
Alt+ ← / →Option+ ← / →返回/前进Go back / forward--
Ctrl+MCommand+M切换选项卡移动焦点Toggle Tab moves focus--

搜索和替换(Search and replace)

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

多光标和选择(Multi-cursor and selection)

Win快捷键Mac快捷键说明英文说明备注
Alt+ClickOption+Click插入光标Insert cursor--
Ctrl+Alt+ ↑ / ↓Command+Option+ ↑ / ↓在上/下插入光标Insert cursor above / below--
Ctrl+UCommand+U撤消上一个光标操作Undo last cursor operation--
Shift+Alt+IShift+Option+I在选定的每一行的末尾插入光标Insert cursor at end of each line selected--
Ctrl+LCommand+L选择当前行Select current line--
Ctrl+Shift+LCommand+Shift+L选择当前选择的所有出现Select all occurrences of current selection--
Ctrl+F2Command+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/PgDnCommand+Shift+Option +PgUp/PgDn列(框)选择页上/下Column (box) selection page up/down--

丰富的语言编辑(Rich languages editing)

Win快捷键Mac快捷键说明英文说明备注
Ctrl+Space, Ctrl+ICommand+Space, Command+I触发建议Trigger suggestion--
Ctrl+Shift+SpaceCommand+Shift+Space触发器参数提示Trigger parameter hints--
Shift+Alt+FShift+Option+F格式化文档Format document--
Ctrl+K Ctrl+FCommand+K Command+F格式选定区域Format selection--
F12F12转到定义Go to Definition--
Alt+F12Option+F12Peek 定义Peek Definition--
Ctrl+K F12Command+K F12打开定义到边Open Definition to the side--
Ctrl+.Command+.快速解决Quick Fix--
Shift+F12Shift+F12显示引用Show References--
F2F2重命名符号Rename Symbol--
Ctrl+K Ctrl+XCommand+K Command+X修剪尾随空格Trim trailing whitespace--
Ctrl+K MCommand+K M更改文件语言Change file language--

编辑器管理(Editor management)

Win快捷键Mac快捷键说明英文说明备注
Ctrl+F4, Ctrl+WCommand+F4, Command+W关闭编辑器Close editor--
Ctrl+K FCommand+K F关闭文件夹Close folder--
Ctrl+\Command+\拆分编辑器Split editor--
Ctrl+ 1 / 2 / 3Command+ 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 / PgDnCommand+Shift+PgUp / PgDn向左/向右移动编辑器Move editor left/right--
Ctrl+K ← / →Command+K ← / →移动活动编辑器组Move active editor group--

文件管理(File management)

Win快捷键Mac快捷键说明英文说明备注
Ctrl+NCommand+N新文件New File--
Ctrl+OCommand+O打开文件...Open File...--
Ctrl+SCommand+S保存Save--
Ctrl+Shift+SCommand+Shift+S另存为...Save As...--
Ctrl+K SCommand+K S全部保存Save All--
Ctrl+F4Command+F4关闭Close--
Ctrl+K Ctrl+WCommand+K Command+W关闭所有Close All--
Ctrl+Shift+TCommand+Shift+T重新打开关闭的编辑器Reopen closed editor--
Ctrl+K EnterCommand+K Enter输入保持打开Keep preview mode editor open--
Ctrl+TabCommand+Tab打开下一个Open next--
Ctrl+Shift+TabCommand+Shift+Tab打开上一个Open previous--
Ctrl+K PCommand+K P复制活动文件的路径Copy path of active file--
Ctrl+K RCommand+K R显示资源管理器中的活动文件Reveal active file in Explorer--
Ctrl+K OCommand+K O显示新窗口/实例中的活动文件Show active file in new window/instance--

显示(Display)

Win快捷键Mac快捷键说明英文说明备注
F11F11切换全屏Toggle full screen--
Shift+Alt+0Shift+Option+0切换编辑器布局Toggle editor layout (horizontal/vertical)--
Ctrl+ = / -Command+ = / -放大/缩小Zoom in/out--
Ctrl+BCommand+B切换侧栏可见性Toggle Sidebar visibility--
Ctrl+Shift+ECommand+Shift+E显示浏览器/切换焦点Show Explorer / Toggle focus--
Ctrl+Shift+FCommand+Shift+F显示搜索Show Search--
Ctrl+Shift+GCommand+Shift+G显示Show Source Control--
Ctrl+Shift+DCommand+Shift+D显示调试Show Debug--
Ctrl+Shift+XCommand+Shift+X显示扩展Show Extensions--
Ctrl+Shift+HCommand+Shift+H替换文件Replace in files--
Ctrl+Shift+JCommand+Shift+J切换搜索详细信息Toggle Search details--
Ctrl+Shift+UCommand+Shift+U打开新命令提示符/终端Show Output panel--
Ctrl+Shift+VCommand+Shift+V显示输出面板Open Markdown preview--
Ctrl+K VCommand+K V切换 Markdown 预览Open Markdown preview to the side--
Ctrl+K ZCommand+K Z从旁边打开 Markdown 预览Zen Mode (Esc Esc to exit)--

调试(Debug)

Win快捷键Mac快捷键说明英文说明备注
F9F9切换断点Toggle breakpoint--
F5F5开始/继续Start/Continue--
Shift+F5Shift+F5停止Stop--
F11 / Shift+F11F11 / Shift+F11下一步/上一步Step into/out--
F10F10跳过Step over--
Ctrl+K Ctrl+ICommand+K Command+I显示悬停Show hover--

集成终端(Integrated terminal)

Win快捷键Mac快捷键说明英文说明备注
Ctrl+`Command+`显示集成终端Show integrated terminal--
Ctrl+Shift+`Command+Shift+`创建新终端Create new terminal--
Ctrl+CCommand+C复制选定Copy selection--
Ctrl+VCommand+V粘贴到活动端子Paste into active terminal--
Ctrl+↑ / ↓Command+↑ / ↓向上/向下滚动Scroll up/down--
Shift+PgUp / PgDnShift+PgUp / PgDn向上/向下滚动页面Scroll page up/down--
Ctrl+Home / EndCommand+Home / End滚动到顶部/底部Scroll to top/bottom--

官方文档快捷键(windows)

插件

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",可以把文件在浏览器打开

参考

Visual Studio Code默认快捷键大全

第一次使用VS Code时你应该知道的一切配置