vscode⼯作区_这是⼀些超级秘密的VSCode骇客，可提⾼您
的⼯作效率
vs code ⼯作区
by Dylan Tientcheu
迪伦·天蒂
这是⼀些超级秘密的VS Code骇客，可提⾼您的⼯作效率 (Here are some super cret 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 uful 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 unbiad as much as possible.
我已经整理了⼀些技巧，窍门和扩展，并对其进⾏了过滤，以仅保留现代Web开发⼈员最稀有和最有⽤的技巧。 众所周知，JavaScript⽣态系统⾮常庞⼤，并且还在不断壮⼤。 因此，我会尽量保持公正。
The following Visual Studio Code tips will help you walk out of all your coding ssions 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.
如果它看起来真的很好并且很友好，您会喜欢它所花费的时间。
和 ( & )山内泰二
This is straight up the beast in VS Code themes. I think the material theme is the clost 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 amless, going from the integrated tools to the text editor.
这是VS Code主题中的野兽。 我认为素材主题是最接近在编辑器中⽤笔和纸书写的主题(尤其是在使⽤⽆反差主题时)。 从集成⼯具到⽂本编辑器，您的编辑器看起来⼏乎平坦且⽆缝。
Imagine an epic theme coupled with epic 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 tho 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 el’s code.
您可能已经知道Zen Mode View，也称为Distraction Free View(对于那些来⾃Sublime Text的视图)，其中所有内容(代码除外)都被删除，以使您与代码编辑器真正亲密⽆间。 您是否知道可以将布局居中放置，以帮助您像在PDF查看器中⼀样阅读代码？ 这确实可以帮助您专注于功能或学习他⼈的代码。
Zen Mode: [View > Appearance > Toggle Zen Mode]
中教禅宗模式 ： [查看>外观>切换禅宗模式]
Center Layout: [View > Appearance > Toggle Centered L ayout]
中⼼布局： [视图>外观>切换居中 布局 ]
3.带连字的字体 (3. Fonts With Ligatures)
Writing style makes reading easy and convenient. You can make your editor look better with awesome fonts along with . Here are (according to )
写作风格使阅读轻松便捷。 您可以使⽤超棒的字体和来使编辑器看起来更好。 以下是 (根据 )
You can try , it’s just awesome and open source. This is how you change font in VSCode after installing it.
您可以尝试 ，它很棒⽽且开源。 这是在安装后在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 .
著名的Operator Operator Mono字体不附带对连字的本机⽀持。但是，如果您⾮常喜欢连字，则可以使⽤将其添加。
4. (4. )
Indent with style. This extension colorizes the indentation in front of your text alternating four different colors on each step.
缩进风格。 此扩展名使⽂本前⾯的缩进着⾊，每步交替四种不同的颜⾊。
The default indentation tting 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 ttings.json
默认缩进设置按照彩虹⽅案为缩进着⾊。 但是，我根据⾃⼰的喜好定制了不同的灰⾊阴影。 如果您希望⾃⼰看起来像本⽰例，请将以下代码段复制并粘贴到ttings.json
"lors": [
"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 in one of his essons. 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 uful 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.
这是⼀个很棒的视觉调整。 我从在他的课程中复制了它。 基本上，他在不同的项⽬上切换了标题栏颜⾊，以轻松识别它们并帮助观众也区分它们。 如果您在使⽤可能具有相同代码或⽂件名的应⽤程序(例如React-native移动应⽤程序和React Web应⽤程序)上⼯作，这将⾮常有⽤。
This is done by editing Title Bar ttings in the Workspace Settings for each project in which you want different title bar colors.
这是通过在每个需要不同标题栏颜⾊的项⽬的⼯作区设置中编辑标题栏设置来完成的。
更快的编码 (Faster Coding)
The very esnce of getting it done in time
及时完成⼯作的本质
1.标签包装 (1. Tag Wrapping)
If you do not know , 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 lecting a bunch of code and typing the command Wrap with Abbreviated which I keybinded to shift+alt+.
如果您不了解 ，那么您可能就是喜欢全部输⼊的⼈。 Emmet使您可以键⼊缩写代码并获取返回的相应标签。 这是通过选择⼀堆代码并键⼊命令Wrap with Abbrevied完成的，我将其绑定到shift+alt+.
Watch it below.
在下⾯观看。
Imagine you want to wrap all of the but as individual lines. You’d u wrap with individual lines then inrt * after the abbreviation e.g div*
地震是怎样形成的
想象⼀下，您想将所有这些包装起来，但要单独包装。 您可以在每⾏中使⽤wrap，然后在缩写后插⼊*，例如div*
In ca you want to jump right into Emmeting, this is the
如果您想直接进⼊Emmeting，这是备忘单
2.内外平衡 (2. Balance Inwards and Outwards)
You can lect a whole tag in VS Code by using the balance inward and balance outward Emmet commands. It's helpful to bind the 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. (3. )
No one likes typing very long statements like console.log(). It can be really irritating, mostly when yo
u 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 . 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.
这是通过称为的扩展完成的。 它允许在下⾯的⾏中记录任何变量，并在代码结构后加上⾃动前缀。 您还可以取消注释/注释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. )
This is an awesome extension that helps you launch a local development rver with live reload feature for static and dynamic pages. It has a great support for major features like: HTTPS, CORS, custom localhost address and port.
这是⼀个了不起的扩展，可以帮助您启动具有实时重新加载功能的本地开发服务器，以⽤于静态和动态页⾯。 它对主要功能(例如HTTPS，CORS，⾃定义本地主机地址和端⼝)提供了强⼤的⽀持。
It can even enable you to share your localhost, if ud with .
如果与使⽤，它甚⾄可以使您共享本地主机。
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 u to this feature. You are able to copy and paste the content lected by tho 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 t ab led tting.
⾯包屑显⽰当前位置，并允许您在符号和⽂件之间快速导航。 要开始使⽤⾯包屑，请通过“视图”(View)>“切换⾯包屑”(Toggle Breadcrumbs)命令或通过ab led设置启⽤它。
The Outline View is a parate ction 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 e at a glance a problem’s location.
⼤纲视图具有不同的排序⽅式，可选的光标跟踪。 它还包括⼀个输⼊框，可在您键⼊时过滤符号。 错误和警告也显⽰在“⼤纲”视图中，使您可以快速查看问题的位置。
杂 (Miscellaneous)
Tho 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-u rl> a repository and you want to replace the current instance of VS Code you are u sing. cod e . -r will do the trick without you having to leave the CLI intere here).
花灯制作方法怎样推广自己的网店想象⼀下，您只是git clone <repo-u rl>⼀个存储库，并且您想要替换当前使⽤的VS Code实例sing. cod sing. cod -r将使您⽆需离开CLI接⼝即可完成操作在此处信息)。
2. (2. )
银行管理
You often come upon appealing code screenshots with custom fonts and themes like the one below. This was taken in VS Code with
您经常会看到带有⾃定义字体和主题的吸引⼈的代码屏幕截图，如下所⽰。 这是在带有 VS Code中采取的
I know is also a good and more customizable alternative. However, Polacode enables you stay in your code editor and u any proprietary font you may have bought which is unusable in Carbon.
我知道也是⼀个很好且更可定制的选择。 但是，Polacode使您可以留在代码编辑器中，并使⽤可能已购买的，在Carbon中⽆法使⽤的任何专有字体。
3. (3. )
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 u ca for Quokka is when you are studying for technical interviews, you are able to output each step without having the stress of tting 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之类的函数。 它甚⾄适⽤于异步调⽤。
