使用vscode开发ue4
VSCode is one of the most popular code editors, skilled use of VSCode can greatly improve our programming efficiency. Here I will introduce some advanced tips for using VSCode, which I hope will help you.
VSCode是最受欢迎的代码编辑器之一，熟练使用VSCode可以大大提高我们的编程效率。 在这里，我将介绍一些使用VSCode的高级技巧，希望对您有所帮助。
Here are the features I’m going to talk about:
以下是我要谈论的功能：
Multiple Cursors 多个游标 Rename Symbol 重命名符号 Move line up and down 上下移动线 User Snippets 用户片段We might want to type the same thing in different places at the same time.
我们可能希望同时在不同的地方键入相同的内容。
For example, in the following code, we want to add a class=“odd” attribute to the first, third, and fifth <li>; Add a class="even” attribute to the second, fourth, and sixth <li>.
例如，在下面的代码中，我们要向第一个，第三个和第五个<li>添加class=“odd”属性； 将class="even”属性添加到第二，第四和第六个<li> 。
<ul> <li>Lorem, ipsum dolor.</li> <li>Lorem, ipsum dolor.</li> <li>Lorem, ipsum dolor.</li> <li>Lorem, ipsum dolor.</li> <li>Lorem, ipsum dolor.</li> <li>Lorem, ipsum dolor.</li></ul>How would you achieve the following?
您将如何实现以下目标？
I used to type class="old” on one label and then copy-paste it somewhere else. It was not until later that I learned the skill of multi-cursor input, which greatly improved my work efficiency.
我曾经在一个标签上键入class="old” ，然后将其复制粘贴到其他地方，直到后来我才学会了多光标输入的技巧，从而大大提高了我的工作效率。
Specifically, when you hold down Alt on the keyboard (in macOS, the Option key), clicking on other areas will create an extra cursor. Then whatever you type on the keyboard appears in each cursor area at the same time.
具体来说，当您按住键盘上的Alt键(在macOS中为Option键)时，单击其他区域将创建一个额外的光标。 然后，您在键盘上键入的内容将同时显示在每个光标区域中。
Note:
注意：
Windows: Alt+Click Windows：Alt +点击 macOS: Option+Click macOS：Option +单击Let’s do an easy trick now.
现在让我们做一个简单的技巧。
When we write code or document, we may find a spelling error, or we may want to change the naming conventions, so we often need to modify a word in batch.
在编写代码或文档时，我们可能会发现拼写错误，或者我们可能想更改命名约定，因此我们经常需要批量修改一个单词。
Suppose you had a piece of code like this, and we wanted to change all of foo to bar, what would you do?
假设您有一段这样的代码，并且我们想将所有foo更改为bar ，您会怎么做？
function foo(){ // ...}foo();foo();foo();If we manually change the words one by one, there are two disadvantages:
如果我们手动更改单词，则有两个缺点：
too much trouble 太多麻烦了 omissions are easy to occur 遗漏很容易发生At this point, we can access VSCode’s Rename Symbol function.
至此，我们可以访问VSCode的Rename Symbol功能。
This option appears when we select a text and right-click it. Or you can press the F2 shortcut after you select the text.
当我们选择文本并右键单击它时，将显示此选项。 或者，您可以在选择文本后按F2快捷键。
Sometimes we want to move some code or text as a whole up or down. At this point, we can select the text and then:
有时我们想上下移动某些代码或文本。 此时，我们可以选择文本，然后：
On Windows, press Alt + ↑ to move the text up; Press Alt + ↓ to move the text down
在Windows上，按Alt + ↑向上移动文本； 按Alt + ↓向下移动文本
On macOS, press Option + ↑ to move the text up; Press Option + ↓ to move the text down
在macOS上，按Option + ↑向上移动文本； 按Option + ↓向下移动文本
These tips can help us quickly adjust the order of the contents.
这些技巧可以帮助我们快速调整内容的顺序。
When we write code, we always use a few pieces of code repeatedly.
在编写代码时，我们总是重复使用几段代码。
For example, our HTML5 files always have the following basic structure:
例如，我们HTML5文件始终具有以下基本结构：
<!DOCTYPE html><html lang="en"><head> <title></title></head><body></body></html>And when we write a for-i loop in JavaScript, we always write these fragments:
而且，当我们使用JavaScript编写for-i循环时，我们总是会编写以下片段：
for(let i = 0; i < ; i++){}There are many more examples. It would be very inefficient if we had to enter these snippets manually every time we needed to use them.
还有更多示例。 如果每次需要使用这些代码片段时都必须手动输入它们，那将是非常低效的。
Fortunately, VSCode provides us with a custom auto-complete feature. Here’s a demo:
幸运的是，VSCode为我们提供了自定义的自动完成功能。 这是一个演示：
Let’s begin by showing how to configure VSCode to achieve the above effect.
让我们开始展示如何配置VSCode来实现上述效果。
VSCode achieves the above effect by reading the configuration file, so we first need to generate a configuration file. We can generate a configuration file using the following path.
VSCode通过读取配置文件来达到上述效果，因此我们首先需要生成一个配置文件。 我们可以使用以下路径生成配置文件。
First, we open the window used to generate the configuration file.
首先，我们打开用于生成配置文件的窗口。
Preferences -> User Snippets
首选项->用户片段
And then VSCode will pop up this window:
然后，VSCode将弹出此窗口：
In this window, we can select the existing configuration file and modify it. Or we can also create a new configuration file.
在此窗口中，我们可以选择现有的配置文件并进行修改。 或者我们也可以创建一个新的配置文件。
Here, we’ll just create a new configuration file.
在这里，我们将创建一个新的配置文件。
If you choose New Global Snippets file , a globally active configuration file is created. If you choose New Snippets file for 'test' , a local active configuration file is created.
如果选择“ New Global Snippets file ，则会创建一个全局活动的配置文件。 如果New Snippets file for 'test'选择“ New Snippets file for 'test'则会创建一个本地活动配置文件。
Here, we’ll just create a local active configuration file.
在这里，我们将只创建一个本地活动配置文件。
It then asks you to enter the name of the newly created file.
然后，它要求您输入新创建的文件的名称。
Ok, now we have created a configuration file.
好的，现在我们已经创建了一个配置文件。
For the convenience of readers, I recorded a GIF to complete the above process, I hope it will help you.
为了方便读者，我录制了GIF以完成上述过程，希望对您有所帮助。
The configuration file is written in JSON format, and here is a simple example.
配置文件以JSON格式编写，这是一个简单的示例。
{ "html5 autocomplete": { "prefix": "html5", "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "<head>", " <title></title>", "</head>", "<body>", "</body>", "</html>" ] }}First, let’s look at the field “html5 autocomplete”. This field does nothing but tells the programmer what the configuration option is for, and you can write the field as you like.
首先，让我们看一下“html5 autocomplete”字段。 该字段不执行任何操作，但会告诉程序员配置选项的用途，您可以根据需要编写该字段。
Then let’s look at the “prefix”: “html5” . This field is the shortcut command we define. When we type the word html5 in a file, VSCode will automatically complete the code for us.
然后让我们看一下“prefix”: “html5” 。 此字段是我们定义的快捷方式命令。 当我们在文件中输入单词html5时，VSCode将自动为我们完成代码。
And then look at the "body": [...] . The content of this field is the code we need to complete. Because our code might have many lines, this field is represented as an array. Each element in the array represents one line of code. Translate the above array into normal code, and that’s it.
然后看"body": [...] 。 该字段的内容是我们需要完成的代码。 因为我们的代码可能有很多行，所以此字段表示为数组。 数组中的每个元素代表一行代码。 将上面的数组转换为普通代码，仅此而已。
<!DOCTYPE html><html lang="en"><head> <title></title></head><body></body></html>Ok, now that we have the basic configuration, let’s test it out.
好的，现在我们有了基本配置，让我们对其进行测试。
Well, our configuration did work. But we can still find an imperfect place. That is, html5 autocomplete is usually only used in HTML files, and when we write JavaScript files, we don’t need this shortcut command.
好了，我们的配置确实起作用了。 但是我们仍然可以找到一个不完美的地方。 也就是说，html5自动完成功能通常仅用于HTML文件，并且在编写JavaScript文件时，不需要此快捷命令。
Fortunately, we can specify the scope of this configuration in the configuration file.
幸运的是，我们可以在配置文件中指定此配置的范围。
All we need to do is add the field "scope": "html" to the configuration file.
我们需要做的就是将"scope": "html"字段添加到配置文件中。
So let’s test that out again.
因此，让我们再次测试一下。
Good. Now in a JavaScript file, this shortcut will automatically expire.
好。 现在，在JavaScript文件中，此快捷方式将自动失效。
Now let’s re-test our auto-complete. Have you found any imperfections?
现在，让我们重新测试一下自动完成功能。 有没有发现瑕疵？
We can see that when we finish autocompleting, the cursor stops at the end of the code automatically. However, the code we autocomplete is not a complete code, we also need to enter the specific content in the title.
我们可以看到完成自动填充后，光标会自动停在代码末尾。 但是，我们自动完成的代码不是完整的代码，我们还需要在标题中输入特定的内容。
It would be even better if the cursor could be left in <title></title> after auto-completion.
如果自动完成后可以将光标留在<title></title> ，那就更好了。
To do this, we simply add a special variable $0 to the configuration.
为此，我们只需在配置中添加一个特殊变量$0 。
After completion, the cursor will automatically stay at $0.
完成后，光标将自动停留在$0 。
Ok, now let’s look at a new example to review what we’ve learned.
好的，现在让我们看一个新的例子来回顾我们所学到的东西。
We hope that when we enter the string fori in JavaScript or TypeScript files, VSCode will automatically complete the following code:
我们希望，当我们输入的字符串fori在JavaScript或打字稿文件，VSCode会自动完成下面的代码：
for(let i = 0; i < ; i++){}Also, the cursor should stay after i < .
另外，光标应留在i < 。
You can pause for a moment and think for yourself.
您可以稍停片刻，自己思考。
Okay, I’m going to give you the answer.
好吧，我会给你答案。
We can write a configuration file like this:
我们可以这样写一个配置文件：
{ "for-i loop": { "prefix": "fori", "scope": "javascript, typescript", "body": [ "for(let i = 0; i < $0; i++){", "}" ] }}Here is a gif:
这是一个gif：
Okay, so that’s how User Snippets are used. I spend a lot of time talking about this feature, because it’s one of my favorite features, and I think it will be useful for you too. In the past, when I had to type duplicate code, I copied and pasted it from another file, which was very troublesome. Now that we have it, we can write code quickly.
好的，这就是使用用户代码段的方式。 我花了大量时间讨论此功能，因为它是我最喜欢的功能之一，并且我认为它对您也很有用。 过去，当我不得不键入重复的代码时，我将其复制并粘贴到另一个文件中，这非常麻烦。 现在有了它，我们可以快速编写代码。
翻译自: https://levelup.gitconnected.com/use-vscode-like-a-senior-developer-9b54054c452a
使用vscode开发ue4
