vs code 工作区_这是一些超级秘密的VS Code骇客，可提高您的工作效率

vs code 工作区

by Dylan Tientcheu

迪伦·天蒂

这是一些超级秘密的VS Code骇客，可提高您的工作效率 (Here are some super secret VS Code hacks to boost your productivity)

Coding as a hobbyist, professional or even a once-in-a-month developer, you must know that having smart and sharp tools is vital to anyone willing to put in maximum productive hours while working.

作为一名业余爱好者，专业人士或者甚至每月一次的开发人员，您必须知道，对于那些愿意在工作中最大限度地提高工作时间的人来说，拥有精巧的工具至关重要。

I’ve curated a little collection of tips, tricks and extensions, and filtered them to keep only both the most rare and most useful ones to a modern web developer. As we know the JavaScript ecosystem is very big and still growing bigger. For this reason, I’ll try to be unbiased as much as possible.

我已经整理了一些技巧，窍门和扩展，并对其进行了过滤，以仅保留现代Web开发人员最稀有和最有用的技巧。 众所周知，JavaScript生态系统非常庞大，并且还在不断壮大。 因此，我会尽量保持公正。

The following Visual Studio Code tips will help you walk out of all your coding sessions looking like this:

以下Visual Studio Code技巧将帮助您完成所有的编码会话，如下所示：

使它美丽和友好 (Making it beautiful and friendly)

If it really looks good and friendly, you’ll love the time spent with it.

如果它看起来真的很好并且很友好，您会喜欢它所花费的时间。

1.素材主题和图标 (1. Material Theme & Icons)

This is straight up the beast in VS Code themes. I think the material theme is the closest thing to writing with a pen and a paper within the editor (especially when using the no contrast variant theme). Your editor almost looks flat and seamless, going from the integrated tools to the text editor.

这是VS Code主题中的野兽。 我认为素材主题是最接近在编辑器中用笔和纸书写的主题(尤其是在使用无反差主题时)。 从集成工具到文本编辑器，您的编辑器看起来几乎平坦且无缝。

Imagine an epic theme coupled with epic icons. Material Theme Icons are just an awesome alternative to replace the default VSCode icons. The big catalog of icons designed integrates smoothly with the theme making it more beautiful. This will help you find your files easily in the explorer.

想象一下史诗主题和史诗图标。 物质主题图标 只是替换默认VSCode图标的绝佳选择。 设计的大图标目录与主题融为一体，使其更加美观。 这将帮助您在资源管理器中轻松找到文件。

2.具有居中布局的Zen模式 (2. Zen Mode with Centered Layout)

You may already know the Zen Mode View, also known as Distraction Free View (for those coming from Sublime Text) where everything (except code) is removed to give you real intimacy with your code editor. Did you know you could center the layout to help you read your code as if you were in a PDF viewer? This will really help you focus on a function or study someone else’s code.

您可能已经知道Zen Mode View，也称为Distraction Free View(对于那些来自Sublime Text的视图)，其中所有内容(代码除外)都被删除，以使您与代码编辑器真正亲密无间。 您是否知道可以将布局居中放置，以帮助您像在PDF查看器中一样阅读代码？ 这确实可以帮助您专注于功能或学习他人的代码。

Zen Mode: [View > Appearance > Toggle Zen Mode]

禅宗模式 ： [查看>外观>切换禅宗模式]

Center Layout: [View > Appearance > Toggle Centered Layout]

中心布局： [视图>外观>切换居中 布局 ]

3.带连字的字体 (3. Fonts With Ligatures)

Writing style makes reading easy and convenient. You can make your editor look better with awesome fonts along with ligatures. Here are 6 of the best fonts that support ligatures (according to www.slant.co)

写作风格使阅读轻松便捷。 您可以使用超棒的字体和连字来使编辑器看起来更好。 以下是支持连字的6种最佳字体 (根据www.slant.co )

You can try Fira Code, it’s just awesome and open source. This is how you change font in VSCode after installing it.

您可以尝试Fira Code ，它很棒而且开源。 这是在安装后在VSCode中更改字体的方式。

"editor.fontFamily": "Fira Code","editor.fontLigatures": true

The well renowned font Operator Mono does not come with native support for ligatures. However, if you are a big fan of ligatures, you can add them using this library.

著名的Operator Operator Mono字体不附带对连字的本机支持。 但是，如果您非常喜欢连字，则可以使用此库将其添加。

4. 彩虹缩进 (4. Rainbow Indent)

Indent with style. This extension colorizes the indentation in front of your text alternating four different colors on each step.

缩进风格。 此扩展名使文本前面的缩进着色，每步交替四种不同的颜色。

The default indentation setting colors the indentation following a rainbow scheme. I however customized my own to follow different shades of grey. If you wish yours to look like this example, copy and paste the following snippet in your settings.json

默认缩进设置按照彩虹方案为缩进着色。 但是，我根据自己的喜好定制了不同的灰色阴影。 如果您希望自己看起来像本示例，请将以下代码段复制并粘贴到settings.json

"indentRainbow.colors": [

"rgba(16,16,16,0.1)",

"rgba(16,16,16,0.2)",

"rgba(16,16,16,0.3)",

"rgba(16,16,16,0.4)",

"rgba(16,16,16,0.5)",

"rgba(16,16,16,0.6)",

"rgba(16,16,16,0.7)",

"rgba(16,16,16,0.8)",

"rgba(16,16,16,0.9)",

"rgba(16,16,16,1.0)"

],

5.标题栏自定义 (5. Title Bar Customization)

This is a great visual tweak. I copied it from Wes Bos in one of his React & GraphQL lessons. Basically he switched the title bar colors on different projects to recognize them easily and help the audience distinguish between them too. This is really useful if you work on apps that may have the same code or file names, for example, a react-native mobile app and a react web app.

这是一个很棒的视觉调整。 我从Wes Bos在他的React＆GraphQL课程中复制了它。 基本上，他在不同的项目上切换了标题栏颜色，以轻松识别它们并帮助观众也区分它们。 如果您在使用可能具有相同代码或文件名的应用程序(例如React-native移动应用程序和React Web应用程序)上工作，这将非常有用。

This is done by editing Title Bar settings in the Workspace Settings for each project in which you want different title bar colors.

这是通过在每个需要不同标题栏颜色的项目的工作区设置中编辑标题栏设置来完成的。

更快的编码 (Faster Coding)

The very essence of getting it done in time

及时完成工作的本质

1.标签包装 (1. Tag Wrapping)

If you do not know Emmet, then you are probably someone that likes typing it all. Emmet enables you to type an abbreviated code and get the returned corresponding tags. This is done by selecting a bunch of code and typing the command Wrap with Abbreviated which I keybinded to shift+alt+.

如果您不了解Emmet ，那么您可能就是喜欢全部输入的人。 Emmet使您可以键入缩写代码并获取返回的相应标签。 这是通过选择一堆代码并键入命令Wrap with Abbrevied完成的，我将其绑定到shift+alt+.

Watch it below.

在下面观看。

Imagine you want to wrap all of these but as individual lines. You’d use wrap with individual lines then insert * after the abbreviation e.g div*

想象一下，您想将所有这些包装起来，但要单独包装。 您可以在每行中使用wrap，然后在缩写后插入*，例如div*

In case you want to jump right into Emmeting, this is the Emmet Cheatsheet

如果您想直接进入Emmeting，这是Emmet备忘单

2.内外平衡 (2. Balance Inwards and Outwards)

This tip was taken from https://vscodecandothat.com/ which I really recommend.

这个提示来自https://vscodecandothat.com/ ，我真的很推荐。

You can select a whole tag in VS Code by using the balance inward and balance outward Emmet commands. It's helpful to bind these commands to keyboard shortcuts, like Ctrl + Shift + Up Arrow for Balance Outward and Ctrl + Shift + Down Arrow for Balance Inward.

您可以使用balance inward balance outward和balance outward Emmet命令在VS Code中选择整个标签。 将这些命令绑定到键盘快捷键会很有帮助，例如Ctrl + Shift + Up Arrow表示向外余额，而Ctrl + Shift + Down Arrow表示余额向内。

3. Turbo Console.log() (3. Turbo Console.log())

No one likes typing very long statements like console.log(). It can be really irritating, mostly when you just want to output something really fast, view its value, then continue coding. What if I told you you could console log anything as fast as Lucky Luke?

没有人喜欢键入很长的语句，例如console.log()。 这可能非常令人烦恼，主要是在您只想快速输出某些内容，查看其值然后继续编码时。 如果我告诉过您，您可以像Lucky Luke一样快地进行日志记录呢？

This is done with an extension called Turbo Console Log. It enables the logging of any variable on the line below with an automatic prefixing following the code structure. You are also able to uncomment/comment alt+shift+u/ alt+shift+c all the console.log() added by this extension.

这是通过称为Turbo Console Log的扩展完成的。 它允许在下面的行中记录任何变量，并在代码结构后加上自动前缀。 您还可以取消注释/注释alt+shift+u/ alt+shift+c该扩展添加的所有console.log()。

Moreover, you can also delete all of them with alt+shift+d:

此外，您还可以使用alt+shift+d删除所有它们：

4. 实时服务器 (4. Live server)

This is an awesome extension that helps you launch a local development server with live reload feature for static and dynamic pages. It has a great support for major features like: HTTPS, CORS, custom localhost addresses and port.

这是一个了不起的扩展，可以帮助您启动具有实时重新加载功能的本地开发服务器，以用于静态和动态页面。 它对主要功能(例如HTTPS，CORS，自定义本地主机地址和端口)提供了强大的支持。

Download it here

在这里下载

It can even enable you to share your localhost, if used with VSCode LiveShare.

如果与VSCode LiveShare一起使用，它甚至可以使您共享本地主机。

5.复制/粘贴多个光标 (5. Copy/Paste with Multiple Cursors)

One of the first “Wows” I screamed when using VS Code happened when I edited multiple lines by adding cursors on different lines. Long after, I found a very good use to this feature. You are able to copy and paste the content selected by those cursors and they’ll be pasted exactly in the order in which they were copied.

我在使用VS Code时尖叫的第一个“哇”之一发生在我通过在不同行上添加光标来编辑多行时。 很久以后，我发现此功能非常有用。 您可以复制和粘贴这些光标选择的内容，然后将它们按照复制时的顺序完全粘贴。

Check out below.

在下面查看。

6.面包屑和轮廓 (6. Breadcrumbs and Outlines)

The Breadcrumb shows the current location and allows you to quickly navigate between symbols and files. To start using breadcrumbs, enable it with the View > Toggle Breadcrumbs command or via the breadcrumbs.enabled setting.

面包屑显示当前位置，并允许您在符号和文件之间快速导航。 要开始使用面包屑，请通过“视图”(View)>“切换面包屑”(Toggle Breadcrumbs)命令或通过he breadcrumbs.enab led设置启用它。

The Outline View is a separate section at the bottom of the File Explorer Tree. When expanded, it will show the symbol tree of the currently active editor.

大纲视图是文件资源管理器树底部的单独部分。 展开后，它将显示当前活动的编辑器的符号树。

The Outline view has different Sort by modes, optional cursor tracking. It also includes an input box which filters symbols as you type. Errors and warnings are also shown in the Outline view, letting you see at a glance a problem’s location.

大纲视图具有不同的排序方式，可选的光标跟踪。 它还包括一个输入框，可在您键入时过滤符号。 错误和警告也显示在“大纲”视图中，使您可以快速查看问题的位置。

杂 (Miscellaneous)

Those little tweaks that change everything

那些微小的调整改变了一切

1.代码CLI (1. Code CLI)

VS Code has a powerful command line interface that lets you control how you launch the editor. You can open files, install extensions, change the display language, and output diagnostics through command line options (switches).

VS Code具有强大的命令行界面，可让您控制启动编辑器的方式。 您可以通过命令行选项(开关)打开文件，安装扩展名，更改显示语言并输出诊断。

Imagine you’ve just git clone <repo-url> a repository and you want to replace the current instance of VS Code you are using. code . -r will do the trick without you having to leave the CLI interface (Learn more here).

想象一下，您只是git clone <repo-u rl>一个存储库，并且您想要替换当前使用的VS Code实例sing. cod sing. cod -r将使您无需离开CLI接口即可完成操作(在此处了解更多信息)。

2. Polacode (2. Polacode)

You often come upon appealing code screenshots with custom fonts and themes like the one below. This was taken in VS Code with Polacode Extension

您经常会看到带有自定义字体和主题的吸引人的代码屏幕截图，如下所示。 这是在带有Polacode扩展名的 VS Code中采取的

I know Carbon is also a good and more customizable alternative. However, Polacode enables you stay in your code editor and use any proprietary font you may have bought which is unusable in Carbon.

我知道Carbon也是一个很好且更可定制的选择。 但是，Polacode使您可以留在代码编辑器中，并使用可能已购买的，在Carbon中无法使用的任何专有字体。

3. Quokka(JS / TS ScratchPad) (3. Quokka (JS/TS ScratchPad))

Quokka is a rapid prototyping playground for JavaScript and TypeScript. It runs your code immediately as you type and displays various execution results and console logs in your code editor.

Quokka是JavaScript和TypeScript的快速原型开发场。 键入时，它将立即运行您的代码，并在代码编辑器中显示各种执行结果和控制台日志。

An awesome use case for Quokka is when you are studying for technical interviews, you are able to output each step without having the stress of setting breakpoints in debuggers.

Quokka的一个很棒的用例是，当您学习技术面试时，您可以输出每个步骤，而无需在调试器中设置断点。

It can also help you study a library’s functions like Lodash or MomentJS before actually using them. It even works for Async calls.

它还可以帮助您在实际使用库之前研究Lodash或MomentJS之类的函数。 它甚至适用于异步调用。

5. WakaTime (5. WakaTime)

Do your friends think you spend too much time coding? Record it and show them that 10hrs/day is not “too much”. WakaTime is an extension that helps to record and store metrics and analytics regarding your programming activity.

您的朋友是否认为您花费太多时间进行编码？ 记录下来，并告诉他们10小时/天并不算太多。 WakaTime是一个扩展，可帮助记录和存储有关您的编程活动的指标和分析。

You can set goals, view coding languages you often use, you can even compare yourself to other ninjas in the world.

您可以设定目标，查看常用的编码语言，甚至可以将自己与世界上其他忍者进行比较。

6. VSCode黑客打字机 (6. VSCode Hacker Typer)

Have you ever been typing code in front of a crowd? You often type recklessly and talk while typing which confuses you a little bit. Imagine a pre-typed code that only comes up when you simulate typing like in geektyper.

您是否曾经在人群面前输入代码？ 您经常不顾一切地打字，边说话边说话，这会使您有些困惑。 想象一下，只有当您像geektyper中那样模拟键入时，才会出现预输入的代码。

Jani Eväkallio brought to VS Code this extension. It will help you record and replay macros (code written in your editor) making you 100% more focused when typing to an audience.

JaniEväkallio 将此扩展引入了VS Code。 它将帮助您记录和重放宏(用编辑器编写的代码)，使您在向观众键入内容时更加专注。

7.排除文件夹 (7. Exclude folders)

I learned this trick on a StackOverFlow post.This one is a quick tweak for excluding folders like node_modules or any other from the explorer tree to help you focus only on what matters. As for me, I really hate opening the tedious node_module folder in my editor, so I decided to hide it.

我在StackOverFlow帖子中学到了这一技巧。此技巧是一项快速调整，可以从资源管理器树中排除诸如node_modules或其他任何文件夹，以帮助您仅关注重要的事情。 对于我来说，我真的很讨厌在编辑器中打开乏味的node_module文件夹，因此我决定将其隐藏。

For example to hide node_modules you can do this:

例如，要隐藏node_modules，可以执行以下操作：

1. Go to File > Preferences > Settings (or on Mac Code > Preferences > Settings)

   转到“ 文件”>“偏好设置 ”>“设置”(或在Mac Code中>“偏好设置”>“设置”)

2. Search files.exclude in the settings

   搜索文件。 files.exclude在设置中

3. Select add pattern and type **/node_modules

   选择添加模式并输入**/node_modules

4. Voila! node_modules disappeared from the explorer tree
   瞧！ node_modules从浏览器树中消失了

8. [您的建议] (8. [Your Suggestions])

You can always comment some of your most secret tips on VSCode, I’ll be glad to append them to the list to help others. :)

您总是可以在VSCode上评论一些最秘密的提示，很高兴将它们附加到列表中以帮助其他人。 :)

I hope these tips will really boost your productivity with VS Code. Please clap and share the post if you liked it and comment if I missed any extension.

我希望这些技巧可以真正提高VS Code的生产力。 如果喜欢，请拍手分享，如果我错过任何扩展名，请发表评论。

Dylan Tientcheu (@DylanTientcheu) | TwitterDylan Tientcheu(@DylanTientcheu). Javascript 熱狂者 * #Developer & #Designer * Technical Writer *…twitter.com

迪伦·天蒂(@DylanTientcheu)| Twitter Dylan Tientcheu(@DylanTientcheu)。 Javascript热狂者* #Developer＆#Designer *技术作家*… twitter.com

翻译自: https://www.freecodecamp.org/news/here-are-some-super-secret-vs-code-hacks-to-boost-your-productivity-20d30197ac76/

vs code 工作区