代码片段管理工具

by Sam Williams

通过山姆·威廉姆斯

VS代码片段：提高编码效率的最强大工具 (VS Code snippets: the most powerful tool to boost your coding productivity)

用更少的按键编写更多的代码 (Write more code with fewer keystrokes)

Everyone wants to be able to produce more code in fewer keystrokes. Arrow functions in JavaScript have become incredibly popular recently — and they only save you 6 characters!

每个人都希望能够用更少的按键产生更多的代码。 JavaScript中的箭头功能最近变得非常流行-它们只能为您节省6个字符！

(function(){console.log('a')})() // 32 charachters(()=>{console.log('a')})() // 26 charachters

But there is a better way to save typing — and this article will show you the tool to do it.

但是，有一种更好的保存类型的方法-本文将向您展示实现此目的的工具。

代码段 (Code Snippets)

For years, people have used code snippets to save time — whether they are common functions, file structures or even templates for whole systems. This is not a new idea.

多年以来，人们一直在使用代码段来节省时间-无论它们是通用功能，文件结构，还是整个系统的模板。 这不是一个新的想法。

The problem with a lot of existing systems is that these snippets were often stored in text files or other file systems and needed to be manually copied and pasted into wherever they were needed.

许多现有系统的问题在于，这些代码段通常存储在文本文件或其他文件系统中，需要手动复制并粘贴到所需的位置。

This was great for large snippets of code. But one-liners were often quicker to type than to search for the file, copy it and paste it in.

这对于大型代码片段非常有用。 但是，单行键入通常比搜索文件，复制并粘贴文件更快。

The next step was tools such as TextExpander or AutoHotKeys, where special key sequences could be set up to paste code snippets into wherever you were typing. These are great and can save you loads of time… but we can take it one step further.

下一步是诸如TextExpander或AutoHotKeys之类的工具，可以在其中设置特殊的键序列，以将代码段粘贴到您键入的任何位置。 这些功能很棒，可以节省您的时间...但是我们可以更进一步。

VS代码片段 (VS Code Snippets)

VS Code has a system that is more powerful than even TextExpander or AutoHotKeys. Its inbuilt code snippets can be configured to do much more than just pasting the code.

VS Code的系统甚至比TextExpander或AutoHotKeys更强大。 它的内置代码段可以配置为完成更多功能，而不仅仅是粘贴代码。

Before we talk about the fancy features, we’ll learn how to create a snippet.

在讨论高级功能之前，我们将学习如何创建代码段。

In VS Code, press ctrl+shift+P to open the command palette and search for snippet. Selecting ‘Configure User Snippets’ presents you with a list of coding languages that you can create a snippet for. We’re going to go with JavaScript.

在VS Code中，按ctrl + shift + P打开命令选项板并搜索代码段。 选择“配置用户代码段”会为您提供可以为其创建代码段的编码语言列表。 我们将使用JavaScript。

This opens the snippet editor. There is a comment showing you how to create a basic snippet, but we’re going to create our own.

这将打开代码片段编辑器。 有一条评论向您展示了如何创建基本代码段，但我们将创建自己的代码段。

This snippet is one that is my favourite line of code. It’s a nice pattern for promise handling.

这是我最喜欢的代码行之一 。 这是处理诺言的好模式。

const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);

To create our snippet, we need to create a new key in the object. This key points to an object with a prefix, body and description .

要创建代码段，我们需要在对象中创建一个新键。 该键指向带有prefix ， body和description的对象。

"insert handle function": {    "prefix": "",    "body": [],    "description": ""}

The prefix is the text that we want to enter to trigger this snippet. You need to make sure that this is unique. Calling it handle would trigger the snippet every time you call the function so we can go with something like promHandle .

前缀是我们要输入以触发此代码段的文本。 您需要确保这是唯一的。 每次调用该函数时，调用它的handle都会触发该代码段，因此我们可以使用诸如promHandle类的promHandle 。

The body is an array of the lines in the snippet. If you have multiple lines of code then you’ll have multiple strings in the body array. The description is what will be shown when you see the suggestion in VS Code.

主体是代码段中的线的数组。 如果您有多行代码，则body数组中将有多个字符串。 当您在VS Code中看到建议时，将显示说明。

When all of this is completed you get something like this:

当所有这些都完成后，您将得到以下内容：

"insert handlefunction": {    "prefix": "promHandle",    "body": [        "const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);"    ],    "description": "inserting a 'handle' function"}

With your snippet file saved, when you start typing promhandle you get a new suggestion. Keying down to that shows the description of the snippet as well as the first line of the code.

保存您的代码段文件后，当您开始输入promhandle您会得到一个新的建议。 向下键入将显示代码段的描述以及代码的第一行。

Now you can save yourself hundreds of characters by creating your own snippets. But there are some even more powerful features!

现在，您可以通过创建自己的代码片段来保存数百个字符。 但是还有一些更强大的功能！

标签插入点 (Tab Insert Points)

When you paste your snippets, there are usually bits of info that you need to add in. Whether it’s the naming a function or choosing the variables, you can set points in your code where you need to enter data. When you past these snippets you can tab between these insertion points.

粘贴代码片段时，通常需要添加一些信息。无论是命名函数还是选择变量，都可以在代码中设置需要输入数据的点。 当您经过这些片段时，可以在这些插入点之间切换。

To add an insert point, you just need to add $1 for the first point, $2 for the second and so on. This is really useful for functions where they expect an object.

要添加一个插入点，只需在第一个点添加$1 ，在第二个点添加$2 ，依此类推。 这对于期望对象的函数确实很有用。

"sendMessage": {    "prefix": "sendMessage",    "body": [        "await botHelper.sendToUser({message$1, userID});"    ],    "description": "await sending a message using bot helper"},

You can have multiple tab points spread throughout the code, meaning you can quickly and easily populate your snippet without having to click or arrow-key to each point.

您可以在整个代码中分布多个制表符点，这意味着您可以快速轻松地填充代码段，而无需单击或箭头指向每个点。

特定语言的摘要 (Language-specific snippets)

When we first opened the snippet editor, we were presented with a list of languages. We chose JavaScript, but you could have chosen any of the other 44 languages. The great thing about VS Code snippets is that they can be locked to a specific file type.

首次打开代码段编辑器时，我们会看到一系列语言。 我们选择了JavaScript，但您可以选择其他44种语言中的任何一种。 VS Code代码片段的妙处在于，它们可以锁定为特定的文件类型。

If you are writing a HTML file, you won’t get all of your JavaScript or Python snippets. This also means you can have the same prefix produce different snippets based on the file type you’re currently working in! But don’t worry, you can still add global snippets if you want to be able to use them in any file type.

如果您正在编写HTML文件，则不会获得所有JavaScript或Python代码段。 这也意味着您可以使用相同的前缀根据当前使用的文件类型生成不同的代码段！ 但请放心，如果您希望能够在任何文件类型中使用全局片段，则仍然可以添加全局片段。

特定位置的摘要 (Locations-specific snippets)

In a similar way to language specific snippets, you can also create folder specific snippets. This can be great when the same named function does a different thing in two different projects.

与特定于语言的代码段相似，您还可以创建文件夹特定的代码段。 当相同的命名函数在两个不同的项目中执行不同的操作时，这可能会很棒。

Just select New Snippet file for '...' when choosing your language.

选择语言时，只需New Snippet file for '...'选择New Snippet file for '...' 。

创建更多片段 (Creating more snippets)

Now you know the powerful ways that VS Code snippets can improve your productivity, you probably want to make loads. Unfortunately, they can be frustrating to create. Luckily there are two solutions:

现在，您知道了VS Code片段可以提高生产力的强大方法，您可能想进行加载。 不幸的是，它们可能令人沮丧。 幸运的是，有两种解决方案：

摘要生成器 (Snippet Generator)

Snippet Generator is a site that lets you paste in some code and easily convert it into snippet format.

Snippet Generator是一个站点，可让您粘贴一些代码并将其轻松转换为Snippet格式。

It’s really easy to use and lets you quickly create snippets that you can just copy and paste straight into your snippet files. It’ll work with any language and is completely free.

它非常易于使用，可让您快速创建片段，您只需将其直接复制并粘贴到片段文件中即可。 它可以使用任何语言，并且完全免费。

片段扩展 (Snippet Extensions)

If you use a framework, such as React or Angular, there are lots of snippets that you are going to want to create. Fortunately this is an issue that other people have had before so they have created libraries of common snippets for each framework.

如果您使用诸如React或Angular之类的框架，那么您将要创建很多片段。 幸运的是，这是其他人以前遇到的一个问题，因此他们为每个框架创建了通用片段库。

Searching for snippets in the VS Code extension marketplace produces hundreds of results that you can install. Everything from React, Angular and Vue to ES6 JS, C# and PHP. These often have a full range of snippets to dramatically cut down you time spent typing.

在VS Code扩展市场中搜索代码snippets会产生数百个可以安装的结果。 从React，Angular和Vue到ES6 JS，C＃和PHP的所有内容。 这些通常包含各种摘要，可以大大减少您花在打字上的时间。

The one disadvantage of these extensions is that you’ll have to learn what the prefixes (triggers) are, but you’ll quickly memorise the ones you use most.

这些扩展的缺点之一是您必须了解前缀(触发器)是什么，但是您会很快记住最常用的前缀。

Thanks for reading this post on increasing your coding productivity with VS Code Snippets. If you’ve learnt something then hit that clap ?button, and follow me for more tips, tricks and tutorials!

感谢您阅读这篇有关使用VS代码片段提高编码效率的文章。 如果您学到了什么，请按一下鼓掌按钮，然后关注我以获取更多提示，技巧和教程！

翻译自: https://www.freecodecamp.org/news/the-most-powerful-tool-to-boost-your-coding-productivity-2dc80e0eff00/

代码片段管理工具