「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」。本文将通过实现一个翻译插件实例的方式来熟悉 VS Code 插件

vscode在前端届是现在越来越普及的开发工具了，因为其开箱即用的特性让人爱不释手，但也因为这个特性让我们开发者对它本身或者其很多提效的设计理念知之甚少，这也是本系列文章出现的原因。

1. className 自动补全 有时候，我们提前定义好一些全局或者是各个组件的样式文件，然后再到 jsx 中去填写 className。这时经常会出现一些令人十分痛苦的情况，例如忘记了定义好的 className，或者是拼写错误导致样式不生效 css-helper-plug…

我们可以通过vscode.languages.registerCompletionItemProvider方法注册vscode的自动补全。 codeLens可以在不影响代码结构的前提下在编译器中展示一些与代码相关的信息或者提供一些相关的操作，而我们平时用得最多的就是GitLen…

最近开发了一个VSCode的插件叫“我爱掘金”，主要就是围绕Webview这个api来实现的。作为前端工程师，只要给你一个Webview，虽然不能撬动地球，但我们可以做很多酷炫的插件呀。比如小霸王插件，彩虹屁老婆插件 等等。 其实VSCode也是基于electron框架的桌面软…

输入一个前缀，会得到一个或多个提示，然后回车带出很多代码。 上一个例子: 自定义侧边栏+面板虽然可以实现我们的功能，但是还是有些缺点的，毕竟我们需要根据文件路径来动态生成我们的面板内容。 首先需要明确的是：vscode有一个 vscode.workspace.rootPath，…

vscode 插件我也没搞过啊，这是让我“迎难(男)而上”了！好了，废话不多说，直接开始吧。 怎么说呢，在做之前，也在网上搜过一些文章，奈何大部分都停留在 install + hello world 阶段，意思就是教你如何安装，然后写一个 hello world 简单的小 de…

在工作中经常用有一些图片来美化我们的前端页面，这时需要我们先将图片下载到本地再通过tinypng这个网站将图片压缩后上传到七牛云，最后将图片链接放在我们的代码中，虽然工作也都在搬砖，但是这种砖不是我喜欢的那种砖。于是，就想到开发一个Vscode插件来帮我自动压缩上传图片。 1.…

VS Code 软件实在是太酷、太好用了，越来越多的新生代互联网青年正在使用它。 有一点你可能会感到惊讶：VS Code 这款软件本身，是用 JavaScript 语言编写的（具体请自行查阅基于 JS 的客户端开发框架 Electron）。Jeff Atwood 在 2007 …