大家好,我是Echa。
VS Code 的诞生,给多少前端研发人员带来了数不尽的方便,可以大大提高开发者的开发效率和代码质量以及错误提醒等等,没有编辑器的出现,估计前端开发人员又要回到原始的txt 文本 编写前端程序了。下面小编带着大家详细介绍 VS Code 有哪些好玩的。
全文大纲
- VS Code 介绍
- VS Code 必备插件集合
- VS Code 前端框架插件集合
- VS Code 前端开发插件集合
- VS Code 主题与图标插件集合
- VS Code Git 集成插件集合
- VS Code 编程美化插件集合
- VS Code 功能强化插件集合
- VS Code 数据统计插件集合
- VS Code 数据库插件集合
- VS Code 开发效率插件集合
- VS Code 程序员摸鱼神器插件集合
VS Code
官方网址:
https://code.visualstudio.com/
VSCode(全称:Visual Studio Code)是一款由微软开发且跨平台的免费源代码编辑器。
可以任意选择Windows、Linux、macOS的不同系统对应安装。该软件支持语法高亮、代码自动补全、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内置的扩展程序商店安装扩展以拓展软件功能,VSCode 使用 Monaco Editor 作为其底层的代码编辑器。
通过安装一些插件可以让这个编辑器变成一个编译器。 VSCode支持C++、Python、Java、C#、Go等多种语言,功能强大、插件丰富并且启动速度极快,值得每个开发人员拥有。
作为跨平台的编辑器,它是Linux系统开发中最受开发者欢迎的开发环境。
如下图:
VS Code 必备插件集合
- Chinese 简体中文插件包
打开VScode点击商店搜索框内输入chinese 出现的第一个点击安装(install)按钮。
- Settings Sync(配置同步到云端)
Settings Sync可以同步你当前的VSCode配置环境,当你需要在其它的电脑工作时,您不用重头再来一遍。新机器登录一下就搞定了。再也不用折腾环境了。
大致原理:使用GitHub Gist来同步多台计算机上的设置,代码段,主题,文件图标,启动,键绑定,工作区和扩展。
- wakatime(编程时间及行为跟踪统计)
VS Code 前端框架插件
- ES7+ React/Redux/React-Native snippets
该插件提供了许多速记前缀来加速开发并帮助开发人员为 React、Redux、GraphQL 和 React Native 创建代码片段和语法。
- VSCode React Refactor
这是一个专门为 React 开发人员设计的 VS Code 扩展。在处理大型项目时,重构可能很有挑战性。可以使用 VSCode React Refactor 快速重构代码,它会将 JSX 代码片段提取到新的类、组件中。此外,它还支持 TypeScript、TSX、常规函数、类和箭头函数。
- Simple React Snippets
该插件提供了一组精心挑选的 React 代码片段,可以通过输入几个字母轻松地将其添加到代码中。例如,输入 imr 会将 React 导入到组件中。
- Typescript React Code Snippets
此插件包含了使用 Typescript 的 React 代码片段,它支持 Typescript(.ts) 或 TypeScript React (.tsx) 等语言。以下是使用 TypeScript 创建 React 组件的两个片段。
- Vue Language Features (Volar)
volar 是专门为 Vue 3 构建的语言支持插件。它基于 @vue/reactivity 按需计算一切,实现原生 TypeScript 语言服务级别的性能。
随着 Vue 3 + TypeScript 越来越流行,Vetur(Vue 的官方 VS Code 扩展)开始出现问题,例如,将 Vue 与 TypeScript 一起使用时 CPU 使用率过高,或者不支持 Vue 3 的新