VS Code 插件 主题 快捷键

window 下的操作,自己亲自测试

进入了normal mode,无法进行编辑,如何进入insert mode

  • 安装了vim插件,所以操作就是vim相同,按i可以进入。

快捷键

  • 打开终端命令行:ctrl + `
    VS Code 插件 主题 快捷键_第1张图片
    终端命令
VS Code 插件 主题 快捷键_第2张图片
终端快捷键

VS Code 插件 主题 快捷键_第3张图片
调试快捷键

VS Code 插件 主题 快捷键_第4张图片
文件管理快捷键

VS Code 插件 主题 快捷键_第5张图片
桌面显示快捷键

VS Code 插件 主题 快捷键_第6张图片
编辑管理快捷键

VS Code 插件 主题 快捷键_第7张图片
语言操作快捷键

VS Code 插件 主题 快捷键_第8张图片
多光标操作

VS Code 插件 主题 快捷键_第9张图片
查询和替换

VS Code 插件 主题 快捷键_第10张图片
导航操作

VS Code 插件 主题 快捷键_第11张图片
通用快捷键

VS Code 插件 主题 快捷键_第12张图片
基础编辑快捷键
  • 打开命令面板:ctrl + shift + p
    VS Code 插件 主题 快捷键_第13张图片
    命令面板

    在这里直接输入一些命令,比如输入snippet,选择打开用户代码片段,选中你要编辑的语言代码片段,这里选中javaScript,你会看到如下界面:
    VS Code 插件 主题 快捷键_第14张图片
    代码片段

    其中:
prefix      : 这个参数是代码段的唤出关键字
body        : 这个是代码段的主体,需要设置的代码放在这里,字符串间换行的话使用\r\n换行符隔开,注意如果值里包含特殊字符需要进行转义.
        多行语句的以,隔开
$1          : 这个为光标的所在位置.
$2          : 使用这个参数后,光标的下一位置将会另起一行,按tab键可进行快速切换,还可以有$3,$4,$5.....
description : 代码段功能描述

现在就把注释里面的那段代码取出来,到在一个js文件中输入:log的时候,会自动获取到我们刚才定义好的代码片段,并给出对应的描述信息,当多个相同序号的$[num]出现,将会同步更新;特别的$0表示最终光标的位置:

VS Code 插件 主题 快捷键_第15张图片
sinppet的作用

按住 tab键,从 $1的位置跳到$2的位置

  • 多位置同时编辑:按住alt + 鼠标左键点击对应要编辑的位置,按Esc退出多点编辑状态

  • Ctrl + p输入框里面填写user settings 选中,打开用户设置,检索代码段,修改为优先显示,并且通过Tab补全

    VS Code 插件 主题 快捷键_第16张图片
    优先显示sinppet

  • 快速切换代码位置:Alt + up(向上键)

  • js注释模版:在function上面输入/**然后按Tab

  • git提交: ctrl + shift + g

    VS Code 插件 主题 快捷键_第17张图片
    git提交界面

  • debug调试 ctrl + shift + d

    VS Code 插件 主题 快捷键_第18张图片
    debug界面

VS Code 插件

VS Code 插件 主题 快捷键_第19张图片
插件查找位置
  • view in Browser:右键在浏览器里面查看文件,使用你的默认浏览器打开

  • html snippets:初级的HTML代码片段和提示

  • IntelliSense for CSS class names:对当前项目所使用的css样式,在html上面自动提示

  • jQuery code snipper:jquery的代码段提示

  • bootstrap 3 sinnpet:Bootstrap代码块

  • debugger for chrome:映射chrome的debug功能

  • vscode-icon:项目目录结构的图标

    VS Code 插件 主题 快捷键_第20张图片
    vscode-icon

  • path intellisense:自动识别项目文件的路径,进行补全和提示

  • ESlint:js代码检测和提示

  • beautify:格式化代码的工具

  • project manager:多个项目之间切换

  • auto rename tag:自动同步修改html标签,包括尾部的闭合标签

  • gitLens:git日志插件

  • fileheader:顶部注释模版,自动更新最后修改时间

    VS Code 插件 主题 快捷键_第21张图片
    注释模版信息

    找到对应的位置,修改为自己的信息;在首选项-----> 键盘快捷方式----->找到fileheader快捷键,自己修改
    VS Code 插件 主题 快捷键_第22张图片
    快捷键修改:ctrl + alt + i

  • filesize:在底部显示当前文件的大小,点击可以看见详细信息

  • bracket pair colorizer:让括号有独立的颜色

  • markdownlint:搭建MarkDown写作环境的插件

  • vetur:vue框架的插件,语法高亮,Emmet等

  • vuehelper:vue的snipper代码片段

VS Code 主题

Dracula主题

VS Code 插件 主题 快捷键_第23张图片
Dracula主题

VS Code 插件 主题 快捷键_第24张图片
网图

你可能感兴趣的:(VS Code 插件 主题 快捷键)