正文

能够有效提升开发效率的20余款vscode插件（多图带效果展示）(代码片段)

GoldenaArcher  GoldenaArcher  2022-12-04  746

关键词：

能够有效提升性能的 20 余款 VSCode 插件

代码快捷键、报错信息、代码注释，总有一款 VSCode 的插件能够提升你的工作效率。

有下载量可以说是非常大、百万级别的插件，至少感觉是应该下载试用一下的插件们，也有你可能都没有听说过，但是个人体验非常好用的插件。

Auto Rename Tag

使用效果如下：

又因为 auto rename tag 中并不是一定需要输入“合法”的标签名，所以对于其他的框架——例如说 React——来说，用途也挺大的。

Image Preview

不知道自己是不是插入了正确的图批？试试看 Image Preview，可以预览插入的图片。

open in browser

写网页必备插件之一，可以直接通过默认快捷键 alt b 在默认的浏览器中打开页面。

Live Server

open in browser 固然好用，但是写静态页面也好，动态页面也罢，都不可能一气呵成而是需要不断的调整页面的。这种情况下，就要不断的刷新页面，那 open in browser 用起来也有些尴尬了。

Live Server 插件可以解决这个问题，它可以监听到文件的变化从而自动部署页面。

Bracket Pair Colorizer 2

之前一直用的版本是 Bracket Pair Colorizer，后来在一些 React 的项目里面用的有些吃力，发现没有办法被 Match 成功，就想换一个插件。这时候才发现作者也意识到了同样的问题，并且作了新的版本升级。

在回调函数地狱之中找不到自己现在在哪一段代码段中？试试看用 Bracket Pair Colorizer 2 吧。

Highlight Matching Tag

当嵌套比较深的时候，碰到 Bracket Pair Colorizer 2 的颜色有些重复的情况就会觉得还是有些不给力，那么，试试看这个插件吧，它只会高亮当前被选中的那一块的代码：

change-cases

顾名思义，change-cases 可以修改文字的大小写，很适合修改变量名——例如说把需要改为常量。

Intellisense 类

这是自动提示的，我主要就装了两个：

Visual Studio IntelliCode

内置了一些函数的提示，是那种你不安装也可以，但是用起来就哪里不太舒服的插件
Path Intellisense

自动提示路径的插件，从此引用路径再也不用烦恼了，强烈推荐

Code Snippet

之前在配置 VSC 的代码段提高记 MD 的效率中提到了可以自定义 Code Snippet 去提高效率，但是当市面上已经有了比较成熟的代码提示功能，自己写就显得耗时又耗力。

因为我主要写的还是 React 和 JavaScript，所以安装了两个：

ES7 React/Redux/GraphQL/React-Native snippets
JavaScript (ES6) code snippets

Prettier

很老牌的的 auto formatter 了，还有一个同样出名的是 Beautify，二选一即可。

auto formatter 也支持对项目的个性化设计，应该是说它先会找项目中的 .prettierrc 文件，优先应用配置文件中的配置，再去应用全局配置。对于 JavaScript 开发来说，最常见需要手动修改的大概只有一个引号了吧：


  "singleQuote": true

在 .prettierrc 中写入这个配置，那么以后自动格式化后的 JavaScript 的字符窜都会由 " 改为 '。

Error Lens

这个插件只建议按项目开启，如果碰到一个大家都很随意的项目，可能会让人痛不与生。

它会提示显示的报错信息，例如说语法错以及 Linting 信息：

语法错：

MarkdownLint:

想象一下如果到一个开启了 EsLint，但是大家都无视了 EsLint 项目警告信息的组，这个语法高亮大概要疯了……

对于个人项目来说，这个的确是提升自己的一个方式，毕竟作为开发来说，还是要尽可能的写出一些报错和警告都比较少的代码。

Markdown 笔记类

Markdown All in One

其实这个用的也少了，用的最多的还是 TOC
markdownlint

就是会提示消息，写出格式更加清晰的 markdown 文档，报错的信息上面已经提示过了，不过有一些信息得自己手动配置去关掉。

例如说 Markdown All in One 生成的 TOC 会在 # 一号标题 上面，这个时候就会触发 markdownlint 的报错。

禁用报错信息也挺方便的：
- ctrl + shift + p 打开 Command Palette
- 输入 mardkwonlint，选择 Create or open the markdownlint configuration file for the folder
- 加入想要禁用的配置，例如：
```
  "MD013": false,
  "MD033": false,
  "MD046": false
```
Markdown Preview Enhanced

在之前的文章里面也讲了怎么修改默认的配置

它的优点在于语法高亮支持非常好，缺点就是 - [ ] checklist 的语法支持好像有点问题，我留了个 issue，好像没反馈……？
Markdown Preview Mermaid Support

添加 Mermaid 的支持，对于 Mermaid 的只吃好像更新也不是非常勤快，最新版本的语法还是没法用

不过比起没有好多了
Mermaid Markdown Syntax Highlighting

Mermaid 的语法高亮，同样，比起没有好多了

Jupyter

Jupyter 运行 JavaScript 我也在之前的博客中总结过了：在 Jupyter Notebook 中运行 JavaScript

Quokka

注：这个插件的默认 key binding 和 Markdown Preview 有所冲突，即 ctrl+k v 这个热键。

有没有被无穷无尽的 console.log() 烦到？

试试看这个插件，我找到有这个插件的时候自己都觉得蛮惊喜的：

免费版的个人用是够了，付费版的我也不知道有什么功能……大概会更加强大一些吧，但是白嫖也挺香的。

Regex Preview

依旧解决了 console.log 的问题，正则毕竟一直都挺让人头疼的。

刚开始的正则使用的是以下的邮箱检验正则：

const regex =
  /(?:[a-z0-9!#$%&'*+/=?^_`|~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`|~-]+)*|"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\\.)3(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])/;

可以看到这条正则成功的将邮箱检验出来了，于是我又换了个简单的 555，右边也将电话中的 555 字段高亮显示了。

vscode-faker

创造假数据的一个插件，包括电话、人名、事件、字符串等。

Create Files & Folders : On The Go

这是一款比较小众的插件，尺寸也挺小的，主要功能就是两个，新建文件和新建文件夹。

默认快捷键是用 ctrl+alt+N 去新建一个文件，ctrl+alt+shift+N 去新建一个文件夹。随后输入 /path/subpath/fileName.js 或 /path/subpath/TestPath 指定路径去新建文件或文件夹。

这个功能，搭配 VSCode 本身就有的复制相对路径 ctrl+k ctrl+shift+c 的功能简直就是完美搭配。

有一个很老牌的插件叫 Auto Close Tag，和 Auto Rename Tag 的作者是一个人——Jun Han。

不过，VSCode 一直在做升级，现在自带了 auto close 的功能，所以我觉得 auto close tag 的用处不是很大，而且在使用过程中经常会出现因为过度智能化而导致很多闭合标签，还得手动删除。

VSCode 自带的 auto close 功能：

vscode深入理解图标含义提升开发效率

...很难辨别。某些情况下，熟知这些图标的含义，能够帮助开发者快速的做出选择。例如：当使用PyTorch进行图像分类时，加载标准数据集Mnist，当输入mnist后，VSCode给出了多行提示，一个选项是m 查看详情

vscode推荐安装插件(代码片段)

...而已我我觉得安装一些有用的插件多自己日常的开发效率能够大查看详情

深度盘点：23个提高开发效率和美观的vscode插件神器(代码片段)

VSCode(全称：VisualStudioCode)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全、代码重构、查看定义功能，并且内置了命令行工具和Git版本控制系统。用户可以更改主题和键盘快捷方式... 查看详情

vscode入门快捷键

...器，采取了和VS相同的UI界面，搭配合适的插件可以大幅提升前端开发的效率。　　布局：左侧是用于展示所要编辑的所有文件和文件夹的文件管理器，依次是：资源管理器，搜索，GIT，调试，插件。右侧是打开文件的编辑区域... 查看详情

idea神级插件！效率提升20倍！

...ntellijidea之后，进行如下的初始化操作，工作效率提升20倍。一.安装插件1.Codota代码智能提示插件只要打出首字母就能联想出一整条语句，这也太智能了，还显示了每条语句使用频率。原因是它学习了我的项目代码... 查看详情

几款提升开发体验的vscode插件推荐(代码片段)

...com/今天就推荐几款通用的VSCode插件给大家，可以极大提升大家的使用体验和效率。大家可以直接通过侧边栏的插件市场搜索下载使用。1.GitLensGitLens增强了VSCode内置的Git功能，方便我们直接查看仓库中文件的变动情况和提... 查看详情

几款提升开发体验的vscode插件推荐(代码片段)

今天推荐几款通用的VSCode插件给大家。对于轻量级的文本或代码编辑器，最开始用过Notepad++，后来换了Sublime和Atom，最后换成了VSCode。作为一款微软出品的编辑器，最吸引我的是轻量级、启动快，扩展丰... 查看详情

实用vscode插件汇总

提升开发效率的插件1.BetterComments BetterComments你可以使用不同的前缀来让注释显示为不同的颜色。非常适合快速扫描并发现重要的代码片段。若使用的话,建议团队统一规范.2.BracketPairColorizer你是否经常在项目中出现查找是否缺... 查看详情

vscode实用插件推荐，让你的开发效率火力全开

辅助开发类：1.VeturVUE开发必备插件1.语法高亮，包括vue/htmlcss/sass/scss/less/stylusjs/ts2.语义高亮，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件3.语法错误检查，包括CSS/SCSS/LESS/Javascript/TypeScri... 查看详情

idea神级插件！效率提升20倍！(代码片段)

...ntellijidea之后，进行如下的初始化操作，工作效率提升20倍。一.安装插件1.Codota代码智能提示插件只要打出首字母就能联想出一整条语句，这也太智能了，还显示了每条语句使用频率。原因是它学习了我的查看详情

能让你开发效率翻倍的15款vscode插件/扩展配置！(代码片段)

...学原文：https://juejin.cn/post/6981651362559836190VSCode是微软开发的的一款代码编辑器,就如官网上说的一样:VSCode重新定义了代码编辑器VScode已经自带了很多丰富的功能,如果想要更多功能？就需要装VSCode扩展[1].比如:添加新语言、... 查看详情

优化工作手段，提升工作效率

...工作中，如何有效的提升个人乃至团队的有效产出，如何能够更快速的推动企业信息化工作，让信息化更贴近核心用户，有哪些方法与工具能够为我们新一年的工作打下坚实的基础呢？欲知详情，请看下文... &nb... 查看详情

vscode超实用插件推荐，让你的开发效率火力全开(代码片段)

辅助开发类：1. VeturVUE开发必备插件1.语法高亮，包括vue/htmlcss/sass/scss/less/stylusjs/ts2.语义高亮，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件3.语法错误检查，包括CSS/SCSS/LESS/Javascript/TypeSc... 查看详情

idea常用插件---提升开发效率究极利器

IDEA常用插件—提升开发效率究极利器IDEA版本2020.1以下按照★的个数来评分，满分五★一、外观美化MaterialThemeUI----个性化的字体、颜色，背景颜色★★★★★使用:在线安装好，然后看https://www.pianshen.com/article/71141808475... 查看详情

10个很棒的javascript库，提升web开发效率

...可用性。作为程序员，拥有和使用正确的JavaScript库会更有效率，并让编程变得更加轻松、快捷。每年，都会有不少的JavaScript库出现，也有不少的逐渐成为程序员的主流库。看看本查看详情

.net高效开发之不可错过的实用工具

...yPowertool:VS专业版的效率工具。WebEssentials:提高开发效率，能够有效的帮助开发人员编写CSS，JavaScript,HTML等代码。MSVSMON:远程Debug监控器(msvsmon.exe)是一种轻量级的应用程序，能够远程控制VS来调试程序。在远程调试期间，VS在调试主... 查看详情

csdnchrome插件上新功能了，高亮博客详情页关键字，提升阅读效率

...客详情页高亮显示关键字的功能，方便大家快速找到有效信息，提升阅读效率安装。进入插件市场使用。安装完成就生效了，可以打开博客详情页查看效果插件的主要功能是把标签、分类、搜索词(从站内搜索过来才... 查看详情

正文

能够有效提升开发效率的20余款vscode插件（多图带效果展示）(代码片段)

能够有效提升性能的 20 余款 VSCode 插件

Auto Rename Tag

Image Preview

open in browser

Live Server

Bracket Pair Colorizer 2

Highlight Matching Tag

change-cases

Intellisense 类

Code Snippet

Prettier

Error Lens

Markdown 笔记类

Jupyter

Quokka

Regex Preview

vscode-faker

Create Files & Folders : On The Go

vscode深入理解图标含义提升开发效率

vscode推荐安装插件(代码片段)

深度盘点：23个提高开发效率和美观的vscode插件神器(代码片段)

vscode入门快捷键

idea神级插件！效率提升20倍！

几款提升开发体验的vscode插件推荐(代码片段)

几款提升开发体验的vscode插件推荐(代码片段)

实用vscode插件汇总

vscode实用插件推荐，让你的开发效率火力全开

idea神级插件！效率提升20倍！(代码片段)

能让你开发效率翻倍的15款vscode插件/扩展配置！(代码片段)

推荐10个nb的idea插件，开发效率至少提升一倍

优化工作手段，提升工作效率

vscode超实用插件推荐，让你的开发效率火力全开(代码片段)

idea常用插件---提升开发效率究极利器

10个很棒的javascript库，提升web开发效率

.net高效开发之不可错过的实用工具

csdnchrome插件上新功能了，高亮博客详情页关键字，提升阅读效率