Summary: What you don’t know about the series.

  • The second advanced VSCode extension to improve JavaScript development efficiency!
  • Author: Front-end xiaozhi

FundebugReproduced with authorization, copyright belongs to the original author.

As a hobbyist, professional, or even a developer who only programs once a month, you need to know that having smart and agile tools is essential for anyone willing to put in the most productive hours at work, and without further ado, it’s important to introduce plug-ins.

1. Material Theme & Icons

This is an important role in the VS Code theme. The theme that the author considers important is the closest thing to writing with pen and paper in the editor (especially when using a non-contrast variant theme). From integrated tools to text editors, your editor looks almost flat and seamless.

Imagine an epic theme with an epic icon. Material Theme Icons are excellent alternatives to the default VSCode Icons. Large icon directories are designed to blend in with themes to make them more aesthetically pleasing, which helps you find your files easily in Explorer.

2. Zen Mode or Do Not Disturb Mode with center layout

In order to make the majority of helpless coder can have a clear thinking in coding/docing, on behalf of the majority of coder interests VSCode also joined the “Zen mode”. This mode can be enabled when you edit a document on a page, and the effect is to make your edit box full screen, with a looming cloud effect.

Open in File > Preferences > Settings > User Settings > Workbench > Zen Mode

3. Hyphenated fonts

The style of the text makes it easy to read, and you can make the editor look friendly by using a nice hyphen font. Here are the 6 best fonts for hyphen support (according to www.slant.co)

You can try Fira Code, which is great and open source. Here is how to change the font in VSCode after introducing Fira Code.

"editor.fontFamily": "Fira Code"."editor.fontLigatures": true
Copy the code

Specific use method can refer to:

Modify font in vscode, using Fira Code

Improved Visual Studio use of forced conjoined characters (Fira Code) and MixEdit

4. Indent-rainbow

Indent style, this extension colors the indent before the text, alternating with four different colors in each step.

Of course, if you want to customize your favorite colors, copy and paste the following code snippet into 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)"].Copy the code

5. Customize the title bar

This is a great visual tweak that changes the title bar color of different items to make them easily identifiable. This is useful if you’re dealing with applications that may have the same code or file name (such as the React -native application and the React Web application).

Setting method: Opening method: File > Preferences > Settings > Workspace Settings

6. Tag Wrapping

If you don’t know Emmet, you’re probably someone who likes to type. Emmet allows you to write abbreviated code and return the corresponding tag. Currently VSCode is built in, so you don’t need to configure it.

If you want to learn more about Emmet, check out the Emmet Cheatsheet

7. Internal and external balance

This tip comes from vscodecandothat.com/, and I highly recommend it.

You can select the entire mark in the VS code using the Balance Inward and Balance Outward Emmet commands. It is helpful to bind these commands to keyboard shortcuts, such as Ctrl + Shift + up arrow for balance outward and Ctrl + Shift + down arrow for balance inward.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

8. Turbo Console.log()

No one likes typing very long statements like console.log(). This can be really annoying, especially if you just want to output something quickly, check its value, and keep coding. What if I told you that you could console anything as fast as Lucky Luke?

This is done through an extension called Turbo Console Log. It supports logging of any variable in the following line and automatically prefixes after the code structure. You can also uncomment/comment Alt + Shift + U/Alt + Shift + C for all console.log() added by this extension.

Also, you can delete all of them by pressing Alt + Shift + D:

9. Live server

This is a great extension to help you launch a local development server that provides real-time reloading for both static and dynamic pages, with great support for key features such as HTTPS, CORS, custom localhost addresses and ports.

It even lets you share local hosts if used with VSCode LiveShare.

10. Use multiple cursors to copy/paste

You find this feature useful when editing multiple lines of code by adding cursors on different lines. You can copy and paste the cursor selections, and they will be pasted in the order they were copied.

Mac: opt+cmd+up or opt+cmd+down

Windows: ctrl+alt+up or ctrl+alt+down

Linux: alt+shift+up or alt+shift+down
Copy the code

11. Breadcrumbs(Bread crumbs)

The editor now has a navigation bar called Breadcrumbs above the contents, which shows your current location and allows for quick navigation between symbols and files. To use this feature, it can be enabled using the View > Toggle Breadcrumbs command or through the Breadcrumbs. Enabled setting. To interact with it, use the Focus Breadcrumbs command or press Ctrl + Shift +.

12. Code CLI

The VS code has a powerful command line interface that allows you to control how the editor is launched. Command-line options allow you to open files, install extensions, change the display language, and output diagnostics.

Imagine that you clone a remote library with Git clone < repo-URL > and you want to replace the current VS Code instance you are using. Using the command code-. -r will do this without having to leave the CLI (learn more here).

12. Polacode

You’ll often see screenshots of code with custom fonts and themes, as shown below. This is in VS code with the X extension

I know Carbon is also a better, more customizable alternative. However, Polacode allows you to remain in the code editor and use any proprietary fonts you may have purchased, which are not available in Carbon.

13. Quokka (JS/TS ScratchPad)

Quokka is a fast prototyping platform for J avaScript and TypeScript. It runs your code as soon as you type it and displays various execution results in the code editor.

A great extension for Quokka allows you to print out every step when preparing for a technical interview without having to set breakpoints in the debugger. It can also help you study library functions such as Lodash or MomentJS before you actually use them, and it can even be used for asynchronous calls.

14. WakaTime

If you want to keep track of how much time you spend programming each day, WakaTime is an extension that helps you record and store metrics and analysis of your programming activities.

The original:Here are some super secret VS Code hacks to boost your productivity

About Fundebug

Fundebug focuses on real-time BUG monitoring for JavaScript, wechat applets, wechat games, Alipay applets, React Native, Node.js and Java online applications. Since its launch on November 11, 2016, Fundebug has handled more than 1 billion error events in total, and paid customers include Google, 360, Kingsoft, Minming.com and many other brands. Welcome to try it for free!