Visual Studio Code is extremely flexible and powerful. By learning the ins and outs, you can greatly improve your speed, efficiency, and process as a developer. In this article, we'll look at the top 5 ways to do so!
Visual Studio Code非常灵活和强大。 通过学习来龙去脉，可以极大地提高开发人员的速度，效率和流程。 在本文中，我们将探讨实现此目的的前5种方法！
Check out Learn Visual Studio Code to learn everything you need to know about Visual Studio Code!
查看学习Visual Studio Code ，以了解有关Visual Studio Code所需的一切！
学习和自定义快捷方式 ( Learn and Customize Shortcuts )
As a developer, think about every time you save a file, copy /paste a line of code, open a file, etc. You do these things constantly, and without shortcuts, each of these actions requires grabbing the mouse. Although it may not seem like much, the transition from keyboard to mouse takes time, even if just a few seconds each time (more in some cases).
作为开发人员，请考虑一下每次保存文件，复制/粘贴一行代码，打开文件等。您不断地执行这些操作，而且没有快捷方式，每个操作都需要抓住鼠标。 尽管看起来似乎不多，但从键盘到鼠标的转换要花费时间，即使每次仅需几秒钟（在某些情况下更多）。
Over the course of a couple of hours, these transitions really add up and detract from the amount of time you are able to write code. NOT GOOD!** **
在几个小时的过程中，这些转换实际上加起来并减少了您编写代码的时间。 不好 ！** **
Moving your hand back and forward from keyboard to mouse is very inefficient.
在键盘和鼠标之间来回移动手的效率非常低。
In Visual Studio Code, it's incredibly easy to view shortcuts (also referenced as key bindings) and customize them. To do so, go to Code **-> Preferences -> Keyboard Shortcuts on a mac and *File *-> Preferences -> Keyboard Shortcuts **on Windows.
在Visual Studio Code中，查看快捷方式（也称为键绑定）并自定义它们非常容易。 为此，请在Mac上转到代码**->首选项->键盘快捷方式，在Windows上转到* 文件* ->首选项->键盘快捷方式**。
There's also a shortcut to get to shortcuts...cough, cough! :) Command K **+ Command S** on Mac or Control k **+ Control S** on Windows.
还有一个捷径可以进入捷径...咳嗽，咳嗽！ :)在Mac上为Command K ** + Command S **，在Windows上为Control k ** + Control S **。
优化布局 ( Optimize Your Layout )
The problem I often find with IDEs (Integrated Development Environments) is that they are bulky with tons of functionality already built in. Visually, with so many features, buttons, menus, etc. you can often be distracted from what's most important to you, your code!
我经常在IDE（集成开发环境）中发现的问题是，它们具有大量内置的功能。从视觉上看，具有如此多的功能，按钮，菜单等。您常常会分散对您最重要的东西的注意力，您的代码！
There are tons of ways to alter your layout in Visual Studio Code.
有很多方法可以在Visual Studio Code中更改布局。
Note: All of the following can be accessed from either settings *or from the *command palette with cmd+shift+p
注意 ：以下所有内容都可以通过cmd + shift + p从设置* 或*命令面板访问
Optimize your layout to be less distracting and optimized for writing code!
优化您的布局，以减少干扰并针对编写代码进行优化！
从左向右移动活动栏 (Move the Activity Bar From Left to Right)
By default, the Activity Bar is on the left. It can be minimized, but when it is opened it pushes your code over to the right.
默认情况下，活动栏位于左侧。 可以将其最小化，但是将其打开时会将您的代码推到右侧。
By changing your settings (see Settings section below), you can dock this menu on the right.
通过更改设置（请参阅下面的“设置”部分），可以将该菜单停靠在右侧。
This way, when it is opened, it does not push your code over.
这样，当打开它时，它不会将您的代码推送过去。
或者...完全隐藏活动栏 (Or... Hide The Activity Bar Completely)
You can take the previous option one step further by hiding the activity bar completely! Open your settings menu and search for "Activity Bar: Visible".
您可以将活动栏完全隐藏起来，使上一个选项更进一步！ 打开设置菜单，然后搜索“活动栏：可见”。
Simply uncheck the box, and the Activity Bar goes away!
只需取消选中该框，活动栏就会消失！
禅宗模式 (Zen Mode)
Zen Mode is the easiest way to get rid of all the frills and just focus on code. It hides all extra menus from you for so code is all you see. Use Command **+ K Z** on Mac and Control **+ K Z** on Windows to toggle Zen mode.
禅宗模式是摆脱所有烦恼并专注于代码的最简单方法。 它为您隐藏了所有其他菜单，因此您只看到代码。 在Mac上使用Command ** + KZ **，在Windows上使用Control ** + KZ **切换Zen模式。
居中布局 (Centered Layout)
One last option is to use Centered Layout which centers your text editor (as is the default with Zen Mode), but does not hide all of the other menus in the UI. With this layout, you don't have to worry as much about opening the Activity Bar pushing your code over. To toggle Centered Layout, open the command pallette (Command Shift **+ P/ Control Shift + P**) and type "Toggle Centered Layout".
最后一种选择是使用居中布局，该居中布局可使文本编辑器居中（这是Zen Mode的默认设置），但不会在UI中隐藏所有其他菜单。 使用这种布局，您不必担心打开活动栏将代码推翻的麻烦。 要切换居中布局，请打开命令面板（ Command Shift ** + P / Control Shift + P **），然后键入“ Toggle Centered Layout”。
There are tons of other ways to customize your layout. Spend some time trying things out and see what works!
还有许多其他方式可以自定义布局。 花一些时间尝试一下，看看有什么用！
为您定制 ( Customize For You )
Visual Studio Code is built using Electron.js which allows it to be customized very easily by Web Developers. We've looked at a couple of ways of customizing through shortcuts and layout already, but let's explore a few more.
Visual Studio Code是使用Electron.js构建的，这使得Web开发人员可以非常轻松地对其进行自定义。 我们已经研究了通过快捷方式和布局进行自定义的几种方法，但让我们进一步探讨。
We have a VS Code course: Make Visual Studio Code Your Editor
我们有一门VS Code课程： 使Visual Studio Code成为您的编辑器
扩展名 (Extensions)
It's incredibly easy to add extensions or plugins. There's an extensions tab where you can search extensions, install them, and view ones you've already installed. You can find an extension to do just about anything. Just give a search.
添加扩展或插件非常容易。 有一个扩展选项卡，您可以在其中搜索扩展，安装扩展以及查看已安装的扩展。 您可以找到扩展程序来执行几乎所有操作。 只是进行搜索。
Here's a look at some of the extensions I have installed.
这是我安装的一些扩展程序的外观。
Remember, if you don't find an extension that does what you're looking for, you can also creat one yourself!
请记住，如果找不到能满足您需求的扩展程序，也可以自己创建一个！
主题 (Themes)
You're just one install away from an easy on the eyes editor!
您只需轻而易举地安装一个眼睛编辑器即可！
Themes are, in fact, extensions, but they are cool enough to look at separately. Themes can add some amazing colorization (is this even a word?!) and make your code and menus much easier to read. I personally use Cobalt 2 by Wes Bos, but there are tons of great ones out there!
主题实际上是扩展，但是它们很酷，可以单独查看。 主题可以添加一些惊人的颜色（这甚至是一个单词？！），并使您的代码和菜单更易于阅读。 我个人使用的是Wes Bos的Cobalt 2 ，但是那里有很多很棒的东西！
Here's a few more.
还有一些。
设定值 (Settings)
Settings are easily customizable as well and are saved in a Json file that Visual Studio Code manages and allows you to customize. Visual Studio Code also provides an interface with dropdown menus, search ability, etc. to be able to change settings. You can open the settings window using Command **+ Comma** on Mac or Control **+ Comma** on Windows.
设置也很容易自定义，并保存在Visual Studio Code管理并允许您自定义的Json文件中。 Visual Studio Code还提供了具有下拉菜单，搜索功能等的界面，以便能够更改设置。 您可以使用Mac上的Command ** +逗号或Windows上的Control ** +逗号来打开设置窗口。
Want to change the font size, for example? Just search and update it!
是否要更改字体大小？ 只需搜索并更新它！
设置自动格式化 ( Set Up Auto Formatting )
Developers often spend a lot of time "cleaning" up their code... checking indentation, wrapping text on new lines, adding semicolos, etc. This can be even more difficult to implement across a team as each developer might have different opionions.
开发人员通常会花费大量时间来“清理”他们的代码...检查缩进，在新行上换行，添加分号等。由于每个开发人员可能会有不同的选择，因此在整个团队中实施起来甚至会更加困难。
Setup auto formatting and never worry about it again!
设置自动格式化，再也不用担心！
Did you know you can setup VS Code to *do your formatting automatically? *Well, you can, and it's amazing! Here's a few options.
您是否知道可以将VS Code设置为* 自动进行格式化？ *可以，这真是太神奇了！ 这里有一些选择。
更漂亮-代码格式化程序 (Prettier - Code Formatter)
The Prettier - Code Formatter extension can format your JavaScript, TypeScript, and CSS using Prettier.
Prettier-Code Formatter扩展程序可以使用Prettier 格式化 JavaScript，TypeScript和CSS。
ESLint (ESLint)
The ESLint extension allows you to both Lint and Format your JavaScript code.
ESLint扩展允许您Lint和格式化 JavaScript代码。
TSLint (TSLint)
The TSLint Extension allows you to Lint and Format *your *TypeScript code.
TSLint扩展允许您Lint和格式化* TypeScript代码。
创建和使用代码段 ( Create and Use Snippets )
Every day we write some of the same code over and over again! Stubbing out for loops, event handlers, unit test, etc. are all good examples. With Visual Studio Code, you can define snippets to write all of that boilerplate code for you!
每天我们都一遍又一遍地写一些相同的代码！ 排除循环，事件处理程序，单元测试等都是很好的例子。 使用Visual Studio Code，您可以定义代码片段来为您编写所有这些样板代码！
Code Snippets means you don't have to type the same code over and over again!
代码段意味着您不必一遍又一遍地键入相同的代码！
Code Snippets are based on language and saved in a Json file that Visual Studio Code manages. You can add snippets by going to Code **-> Preferences -> User Snippets on Mac or *File *-> Preferences -> User Snippets** on Windows. Then you'll choose your language. Here's a snippet for generating a for loop through an array in JavaScript.
代码段基于语言，并保存在Visual Studio Code管理的Json文件中。 您可以通过以下方式添加代码段： 在Mac上转到代码**->首选项->用户代码段，或者在Windows 上* 文件* ->首选项->用户代码段**。 然后，您将选择您的语言。 这是在JavaScript中通过数组生成for循环的代码段。
"For Loop for Array" : {
"prefix" : "forarr" ,
"body" : [
"for (let $index = 0; $index < $array.length; $index++) {" ,
"\tconst element = $array[$index];" ,
"\t" ,
"}"
] ,
"description" : "This will create a for loop through an array"
}For more details on creating snippets, check out Creating Code Snippets in Visual Studio Code. If you're working with React, you'll also want to check out Write React Faster With Simple React Snippets.
有关创建代码段的更多详细信息，请查看在Visual Studio Code中创建代码段 。 如果您正在使用React，那么您还需要查看使用Simple React Snippets更快地编写React 。
回顾 ( Recap )
Visual Studio Code is an amazing tool that is extremely customizable. By taking advantage of the features and settings above, you can greatly increase your development experience as well as your speed and efficiency!
Visual Studio Code是一个非常出色的工具，可高度自定义。 通过利用上面的功能和设置，您可以极大地提高开发经验以及速度和效率！
翻译自: https://scotch.io/tutorials/5-ways-to-improve-development-with-visual-studio-code
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
