vscode常用配置、快捷键及插件使用

2023-10-27

一、配置

通过文件==》首选项==》设置(或者ctrl + ,)即可打开设置页面。以下是一些常用设置:
1、字体

  • 可以直接设置fontsize大小
  • 也可以通过勾选mouse wheel zoom 去使用ctrl + 滚轮对字体大小进行缩放

2、word wrap 是否换行
当一行代码过多的时候,设置成on即可自动换行,不需要拖动滚动条去查看。

3、auto save 自动保存
没有随手保存习惯的,可以开启自动保存配置,以防突发情况代码丢失。

4、Enabled 导航路径
开启后,可以看到文件所在的具体路径地址

5、format On Paste 粘贴时自动格式化
粘贴代码之后,代码的格式会出现混乱的情况。如果不想改动整个代码,还得选中粘贴的部分代码再手动格式化。那么我们就可以通过配置formatOnPaste 改变。

6、word Separators 分词器
平时中间使用-分隔符的连接词双击总是只能选中一个单词,复制起来就很麻烦
在这里插入图片描述
只要我们在该配置中去掉光标处的-的分隔符就可以做到复制完全,这里涉及到的其他分隔符亦是如此。
在这里插入图片描述
在这里插入图片描述
7、用户代码片段
我们经常能看到别人输入一个缩写,就可以出现所需要的完整语句,而这就是通过用户代码片段做到的。
使用方法:文件 - > 首选项 - > 用户代码片段—>新建全局代码片段文件---->输入新建文件的文件名
在这里插入图片描述
注:
(1)这里的prefix是你在编辑器里输入的缩写内容
(2)这里的body是回车以后出现的内容,并且它是一个数组,每一行的内容都是数组里的每一项,并且需要用引号引起来。在这里插入图片描述
我设置的prefix是log,body是console.log(); 这样在我输入log时再回车就可以出现console.log() 完整语句。

二、快捷键

高效的使用vscode,记住一些常用的快捷键是必不可少的。
1、对于行:
(1) 新开行:

  • 光标在末尾,回车即可;
  • 光标不在末尾,ctrl + enter向下重开一行;
  • 光标不在末尾,ctrl + shift + enter向上重开一行 ;

(2) 删除行:

  • 光标没有选择内容时,ctrl + x 剪切行;
  • 光标选中内容时,ctrl + x 则是剪切选中的内容,ctrl + shift + k 删除行;

(3)移动行:alt + 向上/下箭头;
(4)复制行:shift + alt + 向下/上箭头 ;

2、对于词:
(1)逐个选中相同词:ctrl + d
(2)删除前一个词:ctrl + backspace;

3、其他:
(1)文件内搜索:ctrl + f
(2)任意处添加光标:alt + d;
(3)批量选中当前文件中所有匹配的文本:ctrl + F2;
(4)折叠所有代码:ctrl+ k + 0;
(5)展开所有代码:ctrl + k + j;
(6)定位并移动到行或字符位置:ctrl + g;

4、自定义
快捷键之多,我们不可能全部记住,那么如果我们想去搜索某个快捷键,或者感觉某个快捷键使用起来不顺手,又或者需要解决与其他软件快捷键冲突的问题,就可自己去定义快捷键。
打开方式:点击 VSCode 左下角管理的齿轮按钮,选择键盘快捷方式或者选择菜单栏的文件—>首选项 --> 键盘快捷方式,进入快捷键的设置,在这里就可以查看和修改所有的快捷键列表了。

当我们修改的时候点击左侧笔状图标(或双击),在弹出的框中输入想替换成的快捷键,如果设置有重复,也会有相应提示。
在这里插入图片描述

三、插件

VSCode具有丰富而强大的插件,这些优秀的插件使得VSCode生态体系更加吸引人,让开发效率大大提升。
打开方式:点击Vscode左侧侧边栏的扩展工具,在搜索框中搜索所需要下载的插件。
1、汉化 插件名:Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

2、主题
VSCode支持多种主题,喜欢尝试不同风格的可以直接搜索安装。

3、括号对彩色化 插件名:Bracket Pair Colorizer
这个扩展使用颜色来标识匹配的括号。开发过程中小括号,中括号经常层层嵌套,有时候报错,但是很难找到是哪里缺一个或者多一个,用颜色来进行区分就能够很快分辨。

4、高亮匹对标签 插件名:Highlight Matching Tag
此插件高亮显示成对的开始和结束标签。在结构比较复杂的时候,可以快速定位

5、自动同步标签名 插件名:Auto Rename Tag
用这个插件可以告别每次改变标签的时候要重复修改头部和尾部标签,可降低漏改错改的可能性。

6、 预览正则表达式效果 插件名:Regex Previewer
安装成功之后,在正则语句的上方会出现Test Regex,点击它(或者使用ctrl + alt + m快捷键)就打开输入匹配框,输入要匹配的内容,当匹配成功的时候,会高亮显示

7、压缩文件 插件名:minify
打开要进行压缩的文件,按住快捷键ctrl+shift+p,弹出命令面板时选择minify,对文件进行压缩

8、快速打印变量:插件名:Turbo Console Log
如果你不想自定义用户代码片段生成调试语句,那么可以使用该插件。
使用方法:先选中变量,再通过ctrl + alt + l 快捷键快速生成console.log() (这个快捷键与锁住QQ的快捷键冲突,建议使用的时候先修改)(支持多选插入)

另外,使用alt + shift + c 一键注释掉所有的console.log;
alt + shift + u 一键启动所有的console.log;
alt + shift + d 一键删除所有的console.log;

:这里的注释,启动,删除都是针对该插件生成的console.log,自己写的不会起作用。

9、像素转换 插件名:px to rem
px:像素,rem:相对单位,1rem等于根元素的font-size值,当移动端使用rem布局时,就是页面中的元素采用rem作为单位。
由于我们平时习惯以px为单位,因此我们需要先填写转换的数值,再选中需要转换的属性,按住快捷键alt + z,即可快速将px单位转化位rem

10、文件头部注释和函数注释 插件名:koroFileHeader

11、Vue 多功能集成插件 插件名:Vuter
具有语法高亮,智能提示,错误提示,格式化,自动补全等功能。
此外再结合上面所说的用户代码片段,就可以自定义vue模板,一键生成,简单快速。
在这里插入图片描述

12、git管理 插件名:GitLens — Git supercharged
GitLens 在 Git 管理上有很多强大的功能,比如:
(1)我们能跟踪到是什么人在什么时候提交的什么代码:
(2)File history:查看当前文件的历史提交记录。
(3)Branchs:查看本地有哪些分支,以及每个分支的历史提交记录。
(4)Stashes:查看工作区被暂存的内容。
(5)Search & Compare
Search :可以根据提交的文件,作者,改变等进行搜索查看。
Compare :可以比较两个不同分支之间的差异

13、同步配置和插件 插件名:code settings sync
该插件可以将你所下载的所有插件及配置保持到Gitee云端,避免换电脑时重复下载配置
我们只需要在新的设备,安装这一个插件,再从Gitte中下载保存配置即可。
使用方法如下:
(1) 使用gitee发布代码片段(配置代码部分不能为空,但可以任意写,之后上传配置的时候会被覆盖掉 )
在这里插入图片描述

(2)发布之后,地址链接取codes后的参数,即为配置gists值
在这里插入图片描述

(3)找到设置–>私人令牌—>生成新令牌,仅勾选gists。
在这里插入图片描述

(4)提交之后,显示私人令牌已生成,即为access_token值
在这里插入图片描述

(5)在vscode设置中找到set gitte gist,并将获取到的gist值和access_token值填入
在这里插入图片描述

(6)最后,使用ctrl + shift + p快捷键打开命令面板,输入upload setting命令,即可将插件配置上传
在这里插入图片描述
这是上传信息
在这里插入图片描述

再打开gitte中创建的代码片段,即可看到刚刚上传的配置了。
(7)新设备下载时,重复第五步操作,填写对应的值,再打开命令面板,输入download setting命令即可。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vscode常用配置、快捷键及插件使用 的相关文章

随机推荐

  • main(int argc, char **argv)中argc和argv的具体含义,以及操作系统如何处理它们

    main int argc char argv 中argc和argv的具体含义 以及操作系统如何处理它们 请高手详细解释一下 谢谢 1 argc 参数的个数 argv 参数的字符串形式的数组 2 C C code int main int
  • 解决display:none

    selenium 解决页面元素display none的方法 在UI自动化测试中 有时候会遇到页面元素无法定位的问题 包括xpath等方法都无法定位 是因为前端元素被设置为不可见导致 这篇博客 介绍下如何通过JavaScript修改页面元素
  • 2019CISCN华中赛区分区赛部分wp

    pwn1 64位程序 只开启了NX 栈不可执行 保护 试着运行发现是一个菜单题 选项二 三没用 拖到IDA中查看 发现在encrypt选项中存在gets造成的栈溢出漏洞 不过输进去的字符串被分段异或了 我们可以先进行异或一下 然后在输入程序
  • 嵌入式C惯用法

    1 cpp里的c代码按照c的方式来编译和调用 时常在cpp的代码之中看到这样的代码 ifdef cplusplus extern C endif 一段代码 ifdef cplusplus endif 这样的代码到底是什么意思呢 首先 cpl
  • git for Linux 详细安装步骤 及 详细设置 ----git源码编译安装

    前记 git svn sourcetree gitee github gitlab gitblit gitbucket gitolite gogs 版本控制 仓库管理 系列工程笔记 Platform Ubuntu18 04 LTS Git
  • gulp-rev 和 rev-collector 控制版本总是上一个旧版本的bug原因

    原因是执行顺序的问题 css处理 gulp task css function return gulp src css path pipe stylus config stylus pipe autoprefixer config auto
  • Acwing - 131. 直方图中最大的矩形

    131 直方图中最大的矩形 AcWing题库 题目描述 tag 单调栈 直方图是由在公共基线处对齐的一系列矩形组成的多边形 矩形具有相等的宽度 但可以具有不同的高度 例如 图例左侧显示了由高度为 2 1 4 5 1 3 3 的矩形组成的直方
  • 2021年防关联浏览器哪个好(防关联测评)

    之前文章我已经介绍了防关联浏览器行业的隔离效果比较 这次专门为大家分享一下各个软件的售后客服专业度 软件操作界面易上手程度 以及相应时间方面的比较 作为一个付费用户 尤其是像我这种花了几万学习的亚马逊测评基础知识的同学 本身就没有什么电脑网
  • wifi 小米pro 驱动 黑苹果_macOS安装教程兼小米Pro安装过程记录

    引言 一直以来就想写个macOS的安装教程 可惜没有TransMac以及BIOS设置的截图 正好小米PRO黑苹果高级群的班长 原味菠萝最近一直在写小米Pro安装黑苹果的教程 由于他工作繁忙 一直也没有完稿 我就在他写作的基础上将这篇教程完善
  • Day 6 - 集合及字符串习题

    输入一个字符串 打印所有奇数位上的字符 下标是1 3 5 7 位上的字符 例如 输入 abcd1234 输出 bd24 s1 adkfuyhiwuhtshd print s1 1 2 输入用户名 判断用户名是否合法 用户名长度6 10位 u
  • 小白教程!x2m和x3m音频格式转换.mp3格式

    如果你下载的文件是一个 x2m或 x3m格式文件的 这种格式是经过加密处理的 正常情况下是无法进行格式转换的 不过这里也不是完全没有办法 今天就教你一个比较简单的x2m和x3m格式转换方法 这个格式转换方法需要借助一个小工具来实现 不过它并
  • 初识puppet!

    什么是puppet puppet是一个IT基础设施自动化管理工具 它能够帮助系统管理员管理基础设施的整个生命周期 供应 provisioning 配置 configuration 联动 orchestration 及报告 reporting
  • 创建网页实现上传文件(简明教程)

    在菜鸟教程中有文件和详细教程 链接 菜鸟教程 其中想要实现上传任意文件只需要将upload file php文件中的内容替换为以下代码
  • vsCode 调试c代码时 undefined reference to `WinMain‘

    编辑好的文件没有进行保存 或者是没有定义main函数 保存后执行即可 保存前 保存后 另外注意主函数main 拼写问题
  • 关于Class.forName()

    Class forName xxx 采用类加载机制 传入类的全路径名可以在程序运行的过程中动态地加载一个类 返回这个类的Class对象 这个对象对于任何一个类来说都是单例唯一的 通过这个Class对象利用反射进而可以创建这个类的实例 得到这
  • 【06】Vue_集成mavon-editor编辑器

    06 Vue 集成mavon editor编辑器 官网 https www npmjs com package mavon editor 文章目录 06 Vue 集成mavon editor编辑器 一 mavon editor 安装 二 项
  • OTDR曲线中的事件类型

    我们通过OTDR原理一文了解了反射 散射的原理 现在我们结合上图 形象的看下正常连接点的光反射OTDR图形是什么样子的 首先是UPC连接 大家都知道UPC连接的端面是超球面 即使再精密的端面连接也会有间隙 也就是会有空气 折射率肯定就会变化
  • Python代码中“# -*- coding: utf-8 -*-”的作用及正确的位置

    语句 coding utf 8 的作用是告诉Python解释器和IDE 我这个文件中的内容你们该以什么样的编码进行读取和保存 在Python 3中 默认是以 utf 8 对代码内容进行读取和保存的 语句 coding utf 8 的具体作用
  • 蓝桥杯真题七段码

    题目 七段码对应的a b c d e f g分别用数字0 1 2 3 4 5 6表示 一 DFS check函数 这里与普通的dfs并不相同 因为这里的dfs不要求一定要到达叶子节点 但是dfs方法走了很多多余的路太笨了 这是我最开始的想法
  • vscode常用配置、快捷键及插件使用

    一 配置 通过文件 首选项 设置 或者ctrl 即可打开设置页面 以下是一些常用设置 1 字体 可以直接设置fontsize大小 也可以通过勾选mouse wheel zoom 去使用ctrl 滚轮对字体大小进行缩放 2 word wrap