VSCode开发中有哪些好用的插件和快捷键

目录

• 前言
• 1、vscode插件
• 1.1 Live-server
• 1.2 Auto Rename Tag
• 1.3 Code Spell Checker
• 1.4 Code Runner
• 1.5 CodeGeeX
• 1.6 JavaScript (ES6) code snippets
• 1.7 Git History
• 1.8 Vue (Official)
• 1.9 Vue VSCode Snippets
• 1.10 GitHub Repositories
• 1.11 javascript console utils
• 2、VScode快捷键
• 2.1 下一个相同变量
• 2.2 选择所有相同变量
• 2.3 查找并跳转到某个文件
• 2.4 搜索
• 2.5 打开/关闭侧边栏
• 2.6 移动相关
• 2.7 向上/向下插入一行
• 2.8 切换工作区
• 2.9 重命名文件/文件夹
• 2.10 转到某一行
• 2.11 切换编辑的文件
• 2.12 格式化文件
• 2.13 放大缩小编辑器界面
• 2.14 折叠/展开代码
• 2.15 CV工程师必备
• 小结

先来说下vscode的优点：

1. 轻量级和灵活性：vscode走的是插件化的设计思路，因此它本身软件比较轻量，其它功能通过插件进行扩展，我们也可以自己动手去写插件，集轻量性和灵活性于一身。
2. 强大的插件生态系统和活跃的社区：vscode拥有十分强大的插件生态系统，各种常见的功能都能很容易找到对应的插件，满足我们日常的开发可以说是绰绰有余啦！而且它的社区非常活跃，有问题可以去社区寻找答案。
3. 跨平台：在Windows、macOS 和 Linux三端的操作系统上都能用。
4. Git支持：vscode提供了图形化的git操作，可以很方便的进行版本控制、分支管理、查看差异、解决冲突，用起来巨爽。
5. 强大的维护团队：vscode背后的维护团队是Microsoft微软，这团队实力不用多说。

拥有这么多优点，难怪现在能成为我们前端程序员的宠儿。

在日常开发中，如果能掌握好vscode的使用方法和技巧，那写起代码来真的是手拿把攥，事半功倍，接下来给大家介绍一些又好用又能提升效率的vscode插件和快捷键。

这个插件会启动一个本地的服务器，可以实时预览代码效果，不需要手动刷新，比如我们写一个html文件时，想实时看到html在浏览器中的预览效果，这个就非常合适了。

这个插件可以帮助我们对XML/HTML标签对重命名，比如你需要把标签<a></a>改成<p></p>，你只需要改把开始标签的a改成p即可，这个插件会帮你同步修改结束标签。

这个插件可以对你的代码进行拼接检查，比如你拼写了一个错误的单词，他会给出标记。

可以右键直接运行代码，支持多种语言，比如C, C++, Java, Javascript, JS, PHP, Python, Ruby, Go等。

如果要运行ts，需要先全局安装typescript和ts-node。

这是一款免费的AI代码辅助工具，它提供代码生成/完成、评论生成、代码翻译和基于AI的聊天等功能，我们用它写代码的话，它会帮助我们进行代码推导和自动补全，还可以帮助我们一键生成注释，有什么技术问题也可以使用它的聊天功能进行询问找寻答案，可以说十分方便，最重要的是只需要去它的官网注册一个账号即可免费使用。

这个插件预设了很多ES6的代码片段，可以使用它定义好的一些快捷键触发对应预设的 ES6 语法片段 snippets，从而提高我们的开发效率。

这个插件可以帮助我们查看git日志、文件历史记录、比较分支或提交，对于项目多人协助和定位bug非常有用。

一款支持vue3的官方推荐插件，从 Volar 更名而来，支持 vue 最新语法。

里面内置了很多vue的代码片段，比如创建单文件基础架子的 vbase, template 相关的 vfor、vmodel等，也支持 Vue Composition API、Vuex、vue-router 等相关常用的代码片段，非常实用。

我之前如果想在 vscode 中查看 GitHub 上的代码，需要通过 git clone 或者 download 的方式先将 GitHub 仓库代码下载到本地。

用上这个插件之后，可以在 VSCode 中直接浏览、编辑 GitHub 仓库代码，并且支持 搜索 功能，非常方便。

安装上这个插件后，使用 Ctrl/Cmd + Shift + L 可以快速生成 console.log 语句， 也可以光标选中变量再按 Ctrl/Cmd + Shift + L, 会把变量名称也打印出来，十分方便。

接下来给大家介绍一些vscode非常好用的快捷键。

光标选中某个变量后，可以用Ctrl/Command + d向后查找下一个相同变量，再继续按一次可以继续往下查找。

如果相同变量非常多，又需要对它们统一进行编辑操作，可以使用Ctrl/Command+shift+l选中所有相同变量，然后就可以统一进行编辑操作了。

如果需要查找并跳转到某个文件，可以先按下Ctrl/Command+p，然后用输入文件名或者文件路径，在筛选出的文件列表中点击文件即可跳转到对应的文件中。

• Ctrl/Command + f：文件内搜索。
• Ctrl/Command + shift + f：全局搜索。

可以使用Ctrl/Command + b打开/关闭侧边栏。

• 移动当前行：先光标选中某一样，然后可以使用alt+上/下方向键向上/向下移动该行。
• 移动到文件头部、尾部： Ctrl + Home/End（windows），Ctrl + 上/下方向键（mac）。
• 移动到行首、行尾：Home/End（windows，mac 外接键盘下也能用），Command + 左/右方向键（mac）。
• 基于单词的移动： Ctrl/Option + 左/右方向键。

• Ctrl/Command + enter：向上插入一行。
• Ctrl/Command + shift + enter：向下插入一行。

可以使用Ctrl + r切换打开目录，也就是切换工作区，先按下Ctrl + r，然后选择目录即可切换，默认是覆盖当前窗口打开，要新窗口打开需要先按住Ctrl键再点击目录。

先选中某一个文件/文件夹，然后window按F2，mac按enter键即可重命名当前名文件/文件夹。

如果文件内容过多，可以使用Ctrl/Command + g命令，然后输入行数即可精准定位到某一行。

• Ctrl/Command + tab：切换到下一个文件。
• Ctrl/Command + shift + tab：切换到上一个文件。

可以使用shift + alt + f格式化当前文件。

Ctrl/Command + +/-可以放大缩小编辑器界面。

• 折叠/展开当前代码块：Ctrl/Command + Shift + [（折叠当前代码块），Ctrl/Command + Shift + ]（展开当前代码块）。
• 折叠/展开当前文件所有代码：Ctrl/Command + k，Ctrl/Command + 0（折叠所有代码，按住 Ctrl/Command，分别点击 k 和 0），Ctrl/Command + k，Ctrl/Command + j（展开所有代码，按住Ctrl/Command，分别点击 k 和 j）。
• 折叠/展开当前光标所在区域：Ctrl/Command + k，Ctrl/Command + [（折叠光标所在区域代码，按住 Ctrl/Command，分别点击 k 和[），Ctrl/Command + k，Ctrl/Command + ]（展开光标所在区域代码，按住Ctrl/Command，分别点击 k 和]）。

• Ctrl/Command + s：保存。
• Ctrl/Command + c：复制。
• Ctrl/Command + v：粘贴。
• Ctrl/Command + x：剪切。
• Ctrl/Command + z：撤销。
• Ctrl/Command + a：全选。
• Alt/Option + shift + 上/下方向键: 复制当前行。

以上就是我个人在日常前端开发中常用的VSCode插件和快捷键了，熟练使用之后发现开发编码的效率大大提升了，如果大家还有什么好用的VSCode插件和快捷键，欢迎大家推荐给我哦！

到此这篇关于VSCode开发中有哪些好用的插件和快捷键的文章就介绍到这了,更多相关VSCode插件和快捷键内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客！

您可能感兴趣的文章:

• VSCode Vue开发推荐插件和VSCode快捷键(小结)
• 初学Go必备的vscode插件及最常用快捷键和代码自动补全
• Vscode常用快捷键列表、插件安装、console.log详解
• VSCode插件开发全攻略之命令、菜单、快捷键