俗话说,工欲善其事必先利其器,我们码农的器是什么尼?没错,就是我们亲爱的IDE,前端开发者最爱的编辑器应该是vscode了吧。但是我们要怎么去锋利它尼?不外乎就是熟悉它的使用方法、快捷键以及第三方的插件。接下来,我整理了一些vscode常用的快捷键以及常用插件,希望可以帮助各位码农锋利自己的武器。
快捷键器篇
窗口文件相关快捷键
新建文件

Ctrl+N
文件之间切换贴

Ctrl+Tab
打开一个新的VS Code编辑器

Ctrl+Shift+N
关闭当前窗口

Ctrl+W
关闭当前的VS Code编辑器

Ctrl+Shift+W
切出一个新的编辑器窗口(最多3个)

Ctrl+
切换左中右3个编辑器窗口的快捷键

Ctrl+1 Ctrl+2 Ctrl+3
全屏显示

F11
放大或缩小(以编辑器左上角为基准)

Ctrl +/-
侧边栏显示或隐藏

Ctrl+B
显示 Debug

Ctrl+Shift+D
显示 Output

Ctrl+Shift+U
搬砖相关快捷键
复制

Ctrl+C
剪切

Ctrl+X
粘贴

Ctrl+V
代码行向左或向右缩进

Ctrl+[ 、 Ctrl+]
代码格式化

Shift+Alt+F
向上或向下移动一行

Alt+Up 或 Alt+Down
向上或向下复制一行

Shift+Alt+Up 或 Shift+Alt+Down
在当前行下方插入一行

Ctrl+Enter
在当前行上方插入一行

Ctrl+Shift+Enter
移动到行首

Home
移动到行尾

End
移动到文件结尾

Ctrl+End
移动到文件开头

Ctrl+Home
选择从光标到行尾的内容

Shift+End
选择从光标到行首的内容

Shift+Home
删除光标右侧的所有内容(当前行)

Ctrl+Delete
删除当前行

ctrl+shift+k
下一个匹配的也被选中

Ctrl+D
回退上一个光标操作

Ctrl+U

可能有的小伙伴会说,这快捷键也太多了吧,但是这仅仅是冰山一角。不过各位小伙伴也不要慌张,vscode同样也提供了非常人性化的自定义快捷键功能。那到底怎么自定义尼?下面奉上一张宝图,大家就一目了然了。
看到这里,可能很多小伙伴会有疑惑,为什么我的编辑器是中文的,而你的是英文尼?这就和我们接下来要说的常用插件有关了。带我慢慢道来。
插件篇
编辑器常用插件
Chinese (Simplified) Language Pack for Visual Studio Code

安装这个插件就可以把编译器原始的英文界面更改为中文界面了。
background

编码搬砖的过程,无疑是相当枯燥乏味的,但是如果加上这样的小姐姐尼?是不是一下就不枯燥了?

答案是肯定的。也很幸运的有background这个插件,安装之后会有一个默认的背景图片,如图所示:
这个时候,我们可以在修改设置中搜索background修改设置json文件,如下所示:

修改代码奉上:

{
“background.useDefault”: false,
“background.style”: {
“content”:"’’",
“pointer-events”:“none”,
“position”:“absolute”,//图片位置
“width”:“100%”,
“height”:“100%”,
“z-index”:“99999”,
“background.repeat”:“no-repeat”,
“background-size”:“100%,100%”,//图片大小
“opacity”:0.2 //透明度
},
“background.customImages”: [//此处配置自己对应的背景图
“file:///F:/IDE_bg/qingxin.jpg”
],

}

Rainbow Fart

背景图片有了,那么能不能也有声音尼?我可以肯定的告诉你,可以。只需要安装Rainbow Fart这个插件,然后启动这个插件就可以在编码的过程中,出现小姐姐的声音了。启动方法如下:

在vscode软件中使用ctrl+shift+p 打开命令面板,复制Enable Rainbow Fart 后回车,右下方弹出的提示后点击open按钮,或直接访问(http://127.0.0.1:7777/ ),在弹出的页面点击授权,如下图所示:

授权成功之后,就可以愉快的编码了。
  • 1
  • 2
  • 3

open in browser

在浏览器中打开页面
Live Server

以服务器的方式打开页面
搬砖常用插件
Auto Close Tag

标签自动闭合
Auto Rename Tag

开始标签和结束标签自动进行同步
Bracket Pair Colorizer

会已不同颜色和横线显示括号的范围
HTML Snippets

快速的生成html标签
JS-CSS-HTML Formatter

代码格式化
Color Info

颜色提示插件,只需要将鼠标放在颜色值上悬停,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息啦。
jQuery Code Snippets

jQuery自动提示
Path Autocomplete

路径自动补齐
ESLint

检测JS必备
Html Css Support

在标签新增class的时候会提示之前写过的class
Beautify / Beautify css/sass/scss/less

样式格式化(两个的区别还没感受出来)
Vetur

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/118280239

vscode常用插件快捷键的更多相关文章

  1. VSCode常用插件之vscode-stylelint使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 vscode-stylelint这是一个检验CSS/SASS/LESS代码规范的插件. StyleLint 使用指南 vscode-style ...

  2. VSCode常用插件之ESLint使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 ESLint这是VS Code ESLint扩展,将ESLint JavaScript集成到VS Code中. 首先简单说一下使用流程: 1. ...

  3. VSCode常用插件之vscode-fileheader使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 vscode-fileheader这是一个给js文件(html.css也可以使用,但是没意义!!!)生成头部注释的插件,每次修改js文件之后会 ...

  4. VSCode常用插件汇总

    vscode常用插件汇总: 点击插件名字,查看使用文档 vscode-fileheader : 添加注释到文件头,并支持自动更新文件修改时间. EditorConfig for vs code :   ...

  5. VSCode常用插件之Simple New File使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 Simple New File这是一个从命令面板简单创建新文件.文件夹.通过侧边栏创建新文件可能会很繁琐.该扩展旨在通过命令面板使创建文件或目 ...

  6. VSCode常用插件之open in browser使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 open in browser安装完这个插件就可以在编辑器菜单右键html,在默认浏览器打开了,高级使用暂未了解,请自行其它文章学习

  7. VSCode常用插件之EditorConfig for vs code 使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 当大家在公司工作时,不可能永远是一个人维护一个项目,当多个人参与一个项目,每个人使用的编辑器不一样,代码风格自然也不一样,那么如何让使用不同编 ...

  8. VsCode 常用插件清单

    插件离线安装说明 在一些内网开发环境中,无法做到在线安装,这个时候就需要对插件进行离线安装 了 打开 VSCode 插件市场网址 Extensions for the Visual Studio fa ...

  9. vscode常用的快捷键

    对于编程人员来说,记住一些常用的快捷键能够提高工作效率:我认为,对于编程人员来说,掌握一些常用的快捷键是非常有必要的! Ctrl + Shift + N 打开新的编辑器窗口 Ctrl + Shift ...

随机推荐

  1. Python接入企业微信 - 推送信息到内部群里

    前言 之前一篇文章提到了使用wechatpy库来实现企业微信应用登录:Django + Taro 前后端分离项目实现企业微信登录 其实这个库可以实现的功能非常多,基本微信开发涉及到的功能都能实现. 本 ...

  2. Zalando Postgres Operator 快速上手

    本指南旨在让您快速了解在本地 Kubernetes 环境中使用 Postgres Operator. 前提条件 由于 Postgres Operator 是为 Kubernetes (K8s) 框架设 ...

  3. 3.初识Java

    一.Java特性和优势 简单性 面向对象 可移植性 高性能 分布式 动态性 多线程 安全性 健壮性 二.Java三大版本 一次编写到处运行 JavaSE:标准版(桌面程序,控制台开发) JavaME: ...

  4. 微信小程序wx.login先执行onLaunch与onLoad加载顺序问题

    @ 目录 遇到问题 请求api返回需要先登录,实际上登录已成功 问题分析 解决问题 自定义回调函数 app.js index.js 扩展提问 学习交流 随机数字随机幸运数+ My Blog 技术交流 ...

  5. 【HCIE】ipv6之6to4隧道如何计算48位前缀地址

    6to4隧道支持router-router,host-router,router-host,host-host 采用专用6to4地址,前缀为2002::/16 其中如何结合ipv4地址? 2002:i ...

  6. 有意思的CVE-2022-0337复现

    前言 前两天在刷tw,看到了个比较有意思的一个CVE漏洞,价值奖励是10000美刀,比较好奇的是价值10000美刀的漏洞是什么样子的,漏洞利用就是需要在浏览器中进行用户交互才能触发该漏洞,但由于 Wi ...

  7. 【Java分享客栈】一文搞定京东零售开源的AsyncTool,彻底解决异步编排问题。

    一.前言 本章主要是承接上一篇讲CompletableFuture的文章,想了解的可以先去看看案例: https://juejin.cn/post/7091132240574283813 Comple ...

  8. 看完复旦博士用Python统计核酸结果后,我照着也写了一个

    前几天,人民日报公众号报道了复旦博士生自己写代码,通过OCR和正则表达式统计核酸截图结果.具体文章见:https://mp.weixin.qq.com/s/l8u9JifKDlRDoz32-jZWQg ...

  9. iptables系列教程(一)| iptables入门篇

    一个执着于技术的公众号 前言 在早期的 Linux 系统中,默认使用的是 iptables 配置防火墙.尽管新型 的 firewalld 防火墙已经被投入使用多年,但是大量的企业在生产环境中依然出于各 ...

  10. 如何形象简单地理解java中只有值传递,而没有引用传递?

    首先,java中只有值传递,没有引用传递.可以说是"传递的引用(地址)",而不能说是"按引用传递". 按值传递意味着当将一个参数传递给一个函数时,函数接收的是原 ...