vs扩展代码_如何制作自己的VS代码扩展

vs扩展代码

I just made my first VS Code extension. And it felt good! This article will cover basic steps to help you create your own VS Code extension. Along the way I'll share what I learned from making one for the first time.

我刚刚做了我的第一个VS Code扩展。而且感觉很好！本文将介绍一些基本步骤，以帮助您创建自己的VS Code扩展。一路上，我将分享我从第一次制作中学到的东西。

I am not an expert at this yet, but I can truly say that nothing is as hard as it seems. ????

我现在还不是专家，但是我可以真正地说出什么都不像看起来那么难。 ????

让我们谈谈VS Code及其扩展市场 (Let's talk about VS Code and its Extension Marketplace)

If you opened this article, you have probably at least heard about VS Code (or Visual Studio Code). If not, it's basically a light-weight code editor developed by Microsoft.

如果打开本文，您可能至少听说过VS Code(或Visual Studio Code)。如果没有，那么它基本上是Microsoft开发的轻量级代码编辑器。

Since VS Code is a code editor, it can perform much faster and lighter than a typical IDE such as Eclipse. But with that performance comes one disadvantage: IDEs often provide better tools such as built-in linters, better code templates, code versioning tools, and some features such as auto complete.

由于VS Code是代码编辑器，因此它的执行速度比Eclipse等典型的IDE更快，更轻。但是，这种性能带来了一个缺点：IDE通常会提供更好的工具，例如内置的linter，更好的代码模板，代码版本控制工具以及某些功能，例如自动完成。

But where VS Code actually shines is the power of the community. It allows you to install extensions that come directly from the VS Code marketplace itself. These extensions allow you to customize it however you wish. You can, for example, add a linter or any other features like colorful brackets. You can even put a nyan cat in your VS Code!

但是VS Code真正发挥作用的地方是社区的力量。它允许您安装直接来自VS Code市场本身的扩展。这些扩展名允许您根据需要自定义它。例如，您可以添加短毛绒或其他任何功能，例如彩色括号。您甚至可以在VS Code中放一只猫！

vs扩展代码_如何制作自己的VS代码扩展 — Who doesn't like a nyan cat?

为什么要创建VS Code扩展？ (Why should you create a VS Code extension?)

Yes, ‘why’ is the keyword here. It's the first and most important thing to talk about when you want to start doing something.

是的，这里的关键字“为什么”。当您想开始做某事时，这是谈论的第一件也是最重要的事情。

Ask yourself why do you want to make it? Most people usually answer because they want to learn something or gain fame, or maybe even both. But the more reasons there are, the more motivation you will have.

问问自己为什么要这样做？大多数人之所以回答，是因为他们想学点东西或获得名望，或者甚至两者兼而有之。但是，原因越多，您的动力就越大。

One thing I can say is that you don’t need to think big yet. Just make a tool that is very specific, that maybe only you will use. The first step is always the hardest. And at the end of day at least you've helped yourself with your extension.

我可以说的一件事是，您还不需要大胆思考。只是制作一个非常具体的工具，也许只有您会使用。第一步总是最困难的。至少在一天结束时，您已经帮助自己扩展了自己。

As for myself, I built an extension because of one particular reason: I wanted to make a tool that I could use to increase my productivity. And that would maybe even help a small part of the community near me. (Spoiler: it's golang unit test generator)

至于我自己，我建立扩展程序的原因有一个：我想制作一个可以用来提高生产率的工具。这甚至可以帮助我附近的一小部分社区。 (剧透：这是golang单元测试生成器)

That’s why the extensions that I've made are very precise and have a very specific use case. I'm not going for a big mark, I am aiming to increase my productivity and learn something new. I think that is enough reason for me.

这就是为什么我所做的扩展非常精确并且具有非常特定的用例的原因。我的目标不是很大，我的目标是提高生产率并学习新知识。我认为这对我来说已经足够了。

And of course everything seemed impossible at the start. Making VS Code extensions looks like some genius level piece art of work (but of course it's not). Since I have a lot of free time on my hands at the moment, I figured I might as well try it out.

当然，一开始似乎一切都不可能。进行VS Code扩展看起来像是一些天才级的作品(但是当然不是)。由于目前我有很多空闲时间，因此我认为我不妨尝试一下。

构建VS代码扩展的第一步 (The Very first step of Building a VS Code Extension)

To get started, you have to have VS Code installed. In case you don’t have it yet, I will just put the download link here.

首先，您必须安装VS Code。如果您还没有的话，我将把下载链接放在这里。

VS Code extensions support two main languages: JavaScript and TypeScript. So having some knowledge of either of these is pretty mandatory.

VS Code扩展支持两种主要语言：JavaScript和TypeScript。因此，对其中任何一项都有一定的了解是非常必要的。

Also, make sure you have Node.js installed, since we are going to use a lot of npm packages here.

另外，请确保您已安装Node.js，因为我们将在此处使用很多npm软件包。

如何生成VS代码扩展模板 (How to Generate a VS Code Extension Template)

Ah, templates. How very convenient. VS Code already has its own template generator, so let’s jump straight into it.

啊，模板。多么方便。 VS Code已经拥有自己的模板生成器，因此让我们直接进入它。

First, install your template generator with npm install -g yo generator-code

首先，使用npm install -g yo generator-code安装模板生成npm install -g yo generator-code

Afterwards, let's run it with yo code. And it will prompt out this weird head thing (?) and language selection. Just pick your preferred language and proceed. (I picked JavaScript here).

之后，让我们用yo code运行它。它将提示出这些奇怪的头文字(？)和语言选择。只需选择您喜欢的语言并继续即可。 (我在这里选择了JavaScript)。

Afterwards, you will need to edit your extension name and description. You can just proceed with anything you prefer.

之后，您将需要编辑您的扩展名和描述。您可以继续进行您喜欢的任何事情。

Now, a folder called hellovscode will be created in your home directory. Open it with VS Code by simply typing code hellovscode in the folder directory.

现在，将在您的主目录中创建一个名为hellovscode的文件夹。只需在文件夹目录中键入code hellovscode ，即可使用VS Code打开它。

Use the F5 key to run your extension and another window will popup. Now press ctrl+shift+p and find the Hello World command, run it, and a popup should come out in the bottom right corner. Like this:

使用F5键运行您的扩展程序，然后将弹出另一个窗口。现在按ctrl+shift+p并找到“ Hello World命令，运行它，然后会在右下角弹出一个窗口。像这样：

Voilà! You've just run your first extension. But what is actually happening with all that? Don’t worry, I will explain some bits below, mainly regarding two files: extension.js and package.json.

瞧！您刚刚运行了第一个扩展程序。但是，所有这些实际上发生了什么？不用担心，我将在下面解释一些内容，主要涉及两个文件： extension.js和package.json 。

VS Code中的Extension.js文件是什么？ (What is the Extension.js File in VS Code?)

This is where you will spend most of your time coding. This file will contain all your code blocks and logic flow.

在这里，您将花费大部分时间进行编码。该文件将包含您的所有代码块和逻辑流程。

There isn’t much difference between this and normal Node code. But one of the main differences is registering your commands. You will come upon this block vscode.commands.registerCommand('hellovscode.helloWorld'.

此代码与普通Node代码之间没有太大区别。但是主要区别之一是注册命令。您将遇到这个块vscode.commands.registerCommand('hellovscode.helloWorld' 。

In a nutshell, it will register your function call to be used.

简而言之，它将注册要使用的函数调用。

Another difference is the frequent usage of the VS Code API – but we will come back to that later on.

另一个区别是VS Code API的频繁使用-但我们稍后会再讲。

If you looked through the code, you will see this too: vscode.window.showInformationMessage('Hello World from hellovscode!');

如果您仔细阅读了代码，也会看到以下内容： vscode.window.showInformationMessage('Hello World from hellovscode!');

As an experiment, try changing the value of the message and try running it again.

作为实验，请尝试更改消息的值，然后尝试再次运行它。

Package.json (Package.json)

This file is the one that basically will link the commands you created from extension.js with the commands that you defined.

该文件基本上是将您从extension.js创建的命令与您定义的命令链接的文件。

You will see the command that you have registered above hellovscode.helloWorld being put as a part of the command titled Hello World. And that’s how the command actually links to your code.

您将看到在hellovscode.helloWorld上方注册的命令作为名为Hello World的命令的一部分被放置。这就是命令实际链接到您的代码的方式。

Apart from this, this file will also enable the command to be put on the right click bar. It will also filter where the command should appear (file type).

除此以外，此文件还将使命令可以放在右键单击栏上。它还将过滤命令应出现的位置(文件类型)。

如何发布您的VS Code插件 (How to Publish Your VS Code Plugin)

Just in case you might want to publish your extension, I will show you how to do that here:

万一您可能要发布扩展程序，我将在这里向您展示如何执行此操作：

Step 1: First and foremost, install vsce with npm install -g vsce. We will use this most of the time to publish.

步骤1：首先，请使用npm install -g vsce 。我们将大部分时间用于发布。

Step 2: If you don’t have a Microsoft account yet, you should register here since we will be needing the access token you'll get.

第2步：如果您还没有Microsoft帐户，则应在此处注册，因为我们将需要获取访问令牌。

Step 3: Once you have the account sign in to the marketplace. Create your organization and click on it (you should see something like the below).

第3步：一旦您拥有帐户，便登录市场。创建您的组织并单击它(您应该看到类似下面的内容)。

Step 4: Now click on the upper right corner where the red circle is and select Personal Access Token. Create your personal access token and choose all accessible organizations with full access.

步骤4：现在，单击右上角的红色圆圈，然后选择“个人访问令牌”。创建您的个人访问令牌，然后选择所有具有完全访问权限的可访问组织。

Step 5: Remember your token since you'll use it when uploading your extension.

第5步：记住您的令牌，因为在上载扩展程序时将使用它。

Step 6: You will need to create your publisher identity now. So go to your command prompt and type run vsce create-publisher YOUR_PUBLISHER_NAME .Insert your own name, email, and personal access token when prompted. Your publisher account should successfully be created.

步骤6：您将需要立即创建发布者身份。因此，转到命令提示符，然后输入run vsce create-publisher YOUR_PUBLISHER_NAME YOUR_PUBLISHER_NAME。在出现提示时，插入您自己的姓名，电子邮件和个人访问令牌。您的发布者帐户应成功创建。

Step 7: It’s publishing time! Prepare your extension environment in the command prompt and type vsce package. This will package your extension to marketplace format. Then type vsce publish.

第7步：发布时间到了！在命令提示符下准备扩展环境，然后键入vsce package 。这会将您的扩展程序打包为市场格式。然后输入vsce publish 。

And that’s it, your extension will be published.

就是这样，您的扩展程序将被发布。

On a side note, when publishing you should modify your readme (at least the first part where it says This is Readme for.. ) since vsce will detect it and ask you to modify it.

附带说明一下，发布时，您应该修改自述文件(至少第一部分说“ This is Readme for.. )，因为vsce会检测到它并要求您对其进行修改。

构建VS代码扩展的一些其他技巧 (Some Additional Tips for Building VS Code Extensions)

Now you should have some basic understanding of how VS Code extensions work. Here, I will share some things that I have learned.

现在，您应该对VS Code扩展的工作原理有一些基本的了解。在这里，我将分享一些我学到的东西。

利用VS Code的API (Utilizing VS Code's API)

VS Code itself has provided a lot of APIs for you to use to make your extension. You might encounter several common obstacles when building your extension, like getting your cursor position, getting the line position, or maybe getting the highlighted word. Those all can be tackled with using the VS Code API.

VS Code本身提供了许多API，供您用来进行扩展。在构建扩展时，您可能会遇到一些常见的障碍，例如获取光标位置，获取行位置或获取突出显示的单词。使用VS Code API可以解决所有这些问题。

You should read through their documentation and experiment with their API. You can even try reading through their API code! With the amount of documentation inside the code itself, you should be able to somewhat figure out which API will be most helpful.

您应该通读他们的文档并尝试使用他们的API。您甚至可以尝试阅读其API代码！借助代码本身内部的大量文档，您应该能够确定哪种API最有用。

谷歌搜索(阅读文档或代码) (Googling things (read the docs or code))

Most of the time in our programming life, when we are stuck there is always Google or Stack Overflow that can provide quick help.

在我们编程的大部分时间里，当我们陷入困境时，总会有Google或Stack Overflow可以提供快速帮助。

But this time it will not always save you.

但是这一次并不会总能挽救您。

First of all, googling for help in this case is quite tricky. For example, say you want to highlight a word on cursor – you might search for vs code extension how to get total line... or something similar.

首先，在这种情况下谷歌搜索帮助非常棘手。例如，假设您要突出显示光标上的一个单词–您可以搜索vs code extension how to get total line...或类似内容。

But let me tell you, most of the time it will direct you to the real extension itself or give you manual on how to use VS Code.

但是，让我告诉您，大多数情况下，它会将您定向到真正的扩展本身，或者为您提供有关如何使用VS Code的手册。

One way you can make it easier for yourself is by adding the "API" keyword in your search, like vs code extension api how to ....

使自己更轻松的一种方法是在搜索中添加“ API”关键字，例如vs code extension api how to ...

Also, it is pretty hard to find the relevant answers in Google, because the developer community is not that huge, and VS Code extensions may look intimidating for many newcomers. But truthfully, it is not exactly that hard.

另外，由于开发者社区并不庞大，因此很难在Google中找到相关的答案，而且VS Code扩展对于许多新手来说可能会令人生畏。但是说实话， 这并不那么难 。

That’s why sometimes the best way to learn how to develop a VS Code extension is by reading the documentation or the code.

这就是为什么有时最好的方法是通过阅读文档或代码来学习如何开发VS Code扩展。

VS代码扩展GitHub示例存储库 (A VS Code Extension GitHub Example Repository)

I have provided a text manipulation example in my GitHub repository which might help for code references (watch out for some messy code though!). The code will generate some template unit tests in the Go language.

我在GitHub存储库中提供了一个文本操作示例，该示例可能有助于代码引用(不过请注意一些凌乱的代码！)。该代码将使用Go语言生成一些模板单元测试。

结语 (Wrapping up)

What I have covered here are just the basics of creating a VS Code extension. One message I want you to take to heart is that it is not as hard as it looks. Sometimes you just need to push yourself a bit and try it out.

我在这里介绍的只是创建VS Code扩展的基础。我想让您振作起来的一条信息是， 它并不像看起来那么难。 有时，您只需要稍微尝试一下就可以尝试一下。

You might come across some challenges along the way, but if you never even start you are missing out completely.

在此过程中，您可能会遇到一些挑战，但是，即使您从未开始，也可能会完全错过。

In the end, thanks for taking the time to read this. I hope you enjoyed it and started to understand all the things I just explained.

最后，感谢您抽出宝贵的时间阅读本文。我希望您喜欢它并开始理解我刚才解释的所有内容。

And hopefully you will also start making an extension too!

希望您也将开始扩展！

Happy coding to you all in this social distancing time.

在这个社交距离遥远的时代，祝大家编码愉快。

翻译自: https://www.freecodecamp.org/news/making-vscode-extension/