28 个提高开发幸福度的 VsCode 插件

时间  2021-01-30
标签 php html 前端 node react ios git es6 github web 栏目 悠闲生活 繁體版
原文   原文链接
点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。

双 1111 拼团低至 85 元，来一块儿拼团学习搭建本身的博客吧php

服务器如何搭建博客html

1. Quokka.js

Quokka.js 是一个用于 JavaScript 和 TypeScript 的实时运行代码平台。这意味着它会实时运行你输入后的代码，并在编辑器中显示各类执行结果，建议亲自尝试一下。前端

图片描述

安装此扩展后，能够按Ctrl / Cmd（⌘）+ Shift + P显示编辑器的命令选项板，而后键入 Quokka 以查看可用命令的列表。选择并运行 “New JavaScript File”命令。你也能够按（⌘+ K + J）直接打开文件。在此文件中输入的任何内容都会当即执行。node

图片描述

Quokka.js相似的扩展 –react

  • Code Runner – 支持多种语言，如C，C ++，Java，JavaScript，PHP，Python，Perl，Perl 6等。
  • Runner

2. 括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)

花括号和圆括号是许多编程语言不可分割的部分，在 JavaScript 等语言中，在一屏代码中花括号和园括号可能有多层嵌套，有些括号不太容易识别哪一个对应哪一个，然而却没有简单的方法来识别这些括号先后的对应关系。ios

括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)。这是两个不一样的扩展。然而，他们就像是一对情侣，能够完美的配合使用。这些扩展将为你的编辑器添加一系列颜色，并使代码块易于辨别，一旦你习惯了它们，若是 VSCode 没有它们就会让人以为很平淡。git

不使用括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)es6

不使用括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)

使用括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)后github

使用括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)后

3. snippets(代码片断)

代码片断是编辑器中的短代码。所以，能够输入 imr 并按Tab 来展开该代码片断，而不是'import React from '。相似地，clg 变成了 console.log。web

各类各样的框架和类库都有不少代码片断：Javascript，React，Redux，Angular，Vue，Jest。 我我的认为 Javascript 代码片断很是有用，由于我主要使用 JS 。

一些很好的代码片断扩展 –

4. TODO高亮

一般在进行编码时，你认为可能有更好的方法来执行相同的操做。这时你留下注释// TODO: 须要重构 或其余相关的东西。可是你很容易忘记了这个注释，并将你的代码推送到主版本库(master) 或者生产环境(production)。 可是你若是使用 Todo Highlighter（高亮），它会高亮的显示并让你容易看到这个注释。

它以明亮的颜色突出代码中的 “TODO/FIXME” 或代码任何其余注释，以便始终清晰可见。另外还有一个很好的功能是 List Highlighted annotations ，它会在控制台中列出了全部 TODO。

图片描述

使用 Todo Highlighter（高亮）相似的扩展 –

  • Todo+ —  更强大的 Todo 高亮扩展，具备更多功能。
  • Todo Parser

5. Import Cost

该扩展容许您查看导入模块的大小，它对 Webpack 中的 bundlers 有很大帮助，你能够查看是导入整个库仍是只导入特定的实用程序。

图片描述

6. REST Client

做为 web 开发人员，咱们常常须要使用 REST api。为了检查url和检查响应，使用了 Postman 之类的工具。可是，既然编辑器能够轻松地完成相同的任务，为何还要使用不一样的应用程序呢? REST Client 它容许你发送 HTTP 请求并直接在 Visual Studio 代码中查看响应。

图片描述

7. 自动闭合标记(Auto Close Tag)和自动重命名标记(Auto Rename Tag)

自从React的出现以及它在过去几年得到的吸引力以来，以 JSX 形式出现的相似 html 的语法如今很是流行。咱们还必须使用 JavaScript 标签进行编码。任何web开发人员都会告诉你，输入标签是一件痛苦的事情。在大多数状况下，咱们须要一个可以快速、轻松地生成标签及其子标签的工具。Emmet 是 VSCode 中一个很好的例子，然而，有时候，你只是想要一些简单明了的东西。例如自动更新标签，它在你输入开始标签时自动生成结束标签。当你更改相同的标签时，关闭标记会自动更改，这两个扩展就是这样作的。

它还适用于JSX和许多其余语言，如XML，PHP，Vue，JavaScript，TypeScript，TSX。

在这里获取这两个扩展 – 自动闭合标记(Auto Close Tag) 和 自动重命名标记(Auto Rename Tag)。

Auto Rename Tag

Auto Close Tag

相似的扩展 –

8. GitLens

正如其做者所说，GitLens 加强了 Visual Studio Code 中内置的 Git 功能，它包含了许多强大的功能，例如经过跟踪代码显示的代码做者，提交搜索，历史记录和GitLens资源管理器。你能够在此处阅读这些功能的完整说明。

图片描述

相似的扩展 –

9. Git项目管理器(Git Project Manager,GPM)

Git项目管理器(Git Project Manager,GPM)容许你直接从 VSCode 窗口打开一个针对Git存储库的新窗口。 基本上，你能够打开另外一个存储库而无需离开VSCode。

安装此扩展后，您必须将 gitProjectManager.baseProjectsFolders 设置为包含 repos 的URL列表。例如：

{
    "gitProjectManager.baseProjectsFolders": [
        "/home/user/nodeProjects",
        "/home/user/personal/pocs"
    ]
}

图片描述

相似的扩展 –

Project Manager – 我没有亲自使用它，但它有百万+安装。因此建议你必定要看一下。

10. Indenticator(缩进指示器)

它在视觉上突出显示当前的缩进个数，所以，你能够轻松区分在不一样级别缩进的各类代码块。

图片描述

11. VSCode Icons

使您的编辑更具吸引力的图标！

图片描述

相似的扩展 –

12. Dracula (Theme)

Dracula 是我最喜欢的主题。

图片描述

咱们可使用快捷键来快速的选择更换主题；

首先：按下 Ctrl + k

而后再按下：Ctrl + t

13. 其它推荐

  • Fira Code — 带编程连体字的等宽字体。 愚人码头注：clone 项目后，找到 ttf 文件夹，而后安装该文件夹中的字体文件。从新启动 VSCode ，选择TOOLS -> Options -> Fonts and Colors ，选择 Fira Code 便可。
  • Live Server — 一个具备静态和动态页面的实时从新加载功能的本地开发服务器。
  • EditorConfig for VS Code – 此插件尝试使用.editorconfig文件中的设置覆盖用户/工做区设置，不须要其余或特定于 vscode 的文件。与任何EditorConfig插件同样，若是未指定root = true，EditorConfig将继续在项目外部查找.editorconfig文件。
  • Prettier for VSCode — 一个代码格式化工具。
  • Bookmarks – 它能够帮助您在代码中导航，轻松快速地在重要位置之间移动。再也不须要搜索代码，它还支持一组选择命令，容许您选择书签线和书签线之间的区域，它对日志文件分析很是有用。
  • Path Intellisense — Visual Studio Code插件，可自动填充文件名。
  • Version Lens — 在Visual Studio代码编辑器中显示npm，jspm，bower，dub和dotnet核心的软件包版本信息。

14. Material Theme & Icons

这是 VS Code 主题中的重要角色。 做者认为重要的主题是在编辑器中用笔和纸书写最接近的东西（特别是在使用无对比变体主题时）。 从集成的工具到文本编辑器，你的编辑器看起来几乎是平的和无缝的。

想象一个史诗般的主题加上史诗般的图标。 Material Theme Icons 是替换默认 VSCode 图标的绝佳选择。设计的大型图标目录与主题融为一体，使其更加美观，这有助于你在资源管理器中轻松找到你的文件。

clipboard.png

15. 具备居中布局的禅模式或者勿扰模式 (Zen Mode)

为了让广大苦逼码农可以在 coding/docing 时有清晰的思路，表明最广大码农利益的 VSCode 也加入了“禅模式”。该模式能够在你在页面编辑文件时启用，效果是全屏化你的编辑框，而后带有若隐若现的云雾效果。

打开方式：文件 > 首选项 > 设置 > 用户设置 > 工做台 > 禅模式

clipboard.png

16. 具备连字的字体

文字的风格使阅读变得简单方便，你可使用好看连字的字体使编辑器看起来更友好。 这里是支持连字的6种最佳字体 (根据www.slant.co)

你能够尝试 Fira Code，它很是棒并且是开源的。 如下是引入 Fira Code 后在 VSCode 辊更改该字体的方法。

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

具体使用方法能够参考：

vscode中修改字体,使用 Fira Code

提升visual studio使用逼格的连体字(Fira code)以及多行编辑(MixEdit)

17. 彩虹缩进 （indent-rainbow）

缩进风格，这个扩展为文本前面的缩进着色，在每一个步骤中交替使用四种不一样的颜色。

固然若是须要自定义本身喜欢的颜色，请将如下代码段复制并粘贴到 settings.json 中

"indentRainbow.colors": [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.2)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.5)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.7)",
"rgba(16,16,16,0.8)",
"rgba(16,16,16,0.9)",
"rgba(16,16,16,1.0)"
],

18. 自定义标题栏

这是一个很棒的视觉调整，改变了不一样项目的标题栏颜色，以便轻松识别它们。 若是你处理可能具备相同代码或文件名的应用程序（例如react-native 应用程序和 React Web应用程序），这很是有用

设置方式：打开方式：文件 > 首选项 > 设置 > 工做区设置

19. Tag Wrapping

若是你不认识 Emmet，那么你多是一个喜欢打字的人。Emmet 容许你写入缩写代码并返回的相应标记，目前 VSCode 已经内置，因此不用配置了。

若是你想了解更多的 Emmet 的简写，能够查看 Emmet Cheatsheet

20. 内外平衡

这条建议来自 https://vscodecandothat.com/，做者很是推荐它。

你可使用 balance inward 和 balance outward 的 Emmet 命令在 VS 代码中选择整个标记。 将这些命令绑定到键盘快捷键是有帮助的，例如 Ctrl + Shift + 向上箭头用于平衡向外，而 Ctrl + Shift +向下箭头 用于平衡向内。

21. Turbo Console.log()

没有人喜欢输入很是长的语句，好比 console.log()。这真的很烦人，尤为是当你只想快速输出一些东西，查看它的值，而后继续编码的时候。若是我告诉你，你能够像 Lucky Luke同样快速地控制台记录任何东西呢?

这是经过名为 Turbo Console Log 的扩展来完成的。它支持对下面一行中的任何变量进行日志记录，并在代码结构以后自动添加前缀。你还能够 取消注释/注释 alt+shift+u / alt+shift+c 为全部由这个扩展添加的 console.log()。

此外，你也能够经过 alt+shift+d 删除全部：

22. Live server

这是一个很是棒的扩展，能够帮助你启动一个本地开发服务器，为静态和动态页面提供实时从新加载功能，它对 HTTPS、CORS、自定义本地主机地址和端口等主要特性提供了强大的支持。

若是与 VSCode LiveShare 一块儿使用，它甚至可让你共享本地主机。

23. 使用多个游标 复制/粘贴

Mac: opt+cmd+up or opt+cmd+down

Windows: ctrl+alt+up or ctrl+alt+down

Linux: alt+shift+up or alt+shift+down

24. Breadcrumbs（面包屑）

编辑器的内容上方如今有一个被称为 Breadcrumbs 的导航栏，它显示你的当前位置，并容许在符号和文件之间快速导航。要使用该功能，可以使用 View > Toggle Breadcrumbs 命令或经过 breadcrumbs.enabled 设置启用。要与其交互，请使用 Focus Breadcrumbs 命令或按 Ctrl + Shift + 。

25. Code CLI

代码有一个强大的命令行界面，容许你控制如何启动编辑器。你能够经过命令行选项打开文件、安装扩展名、更改显示语言和输出诊断信息。

想象一下，你经过 git clone <repo-url> 克隆一个远程库，你想要替换你正在使用的当前 VS Code实例。 经过命令 code . -r 将在没必要离开 CLI 界面的状况下完成这一操做 (在此处了解更多信息)。

26. Polacode

你常常会看到带有定制字体和主题的代码截屏，以下所示。这是在VS代码与 x 扩展

我知道 Carbon 也是一种更好，更可定制的替代品。 可是，Polacode 容许你保留在代码编辑器中并使用你可能已购买的任何专用字体，这些字体在 Carbon 中没法使用。

27. Quokka (JS/TS ScratchPad)

Quokka 是J avaScript 和 TypeScript 的快速原型开发平台。在你输入代码时，它将当即运行你的代码，并在代码编辑器中显示各类执行结果。

Quokka 的一个很棒的扩展插件，当你准备技术面试时，你能够输出每一个步骤，而没必要在调试器中设置断点。它还能够帮助您在实际使用以前研究库的函数，如 Lodash 或 MomentJS，它甚至能够用于异步调用。

28. WakaTime

若是你想记录天天编程所花的时间，WakaTime 是一个扩展，它能够帮助记录和存储有关编程活动的指标和分析。

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq44924588... 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。

clipboard.png

本文同步分享在 博客“前端小智”（SegmentFault）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程