Shulou(Shulou.com)06/02 Report--

This article is about Material Theme & Icons in the VSCode extension. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Material Theme & Icons

This is an important role in the VS Code theme. The author believes that the important theme is to write the closest thing in the editor with pen and paper (especially when using an uncontrastive 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 is an excellent choice to replace the default VSCode icon. The designed large icon directory is integrated with the theme to make it more beautiful, which helps you easily find your files in Explorer.

two。 Zen mode with central layout or do not disturb mode (Zen Mode)

In order to make the majority of hard-pressed programmers have a clear way of thinking in coding/docing, VSCode, which represents the interests of the vast majority of programmers, has also joined the "Zen mode". This mode can be enabled when you edit the file on the page, and the effect is to make your edit box full-screen, with a looming cloud effect.

Open by: file > preferences > Settings > user Settings > Workbench > Zen Mode

3. A font with hyphenation

The style of the text makes it easy to read, and you can use good hyphenation fonts to make the editor look more friendly. Here are the 6 best fonts that support hyphenation (according to www.slant.co)

You can try Fira Code, which is great and open source. The following is how to change the font in the VSCode roller after the introduction of Fira Code.

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

For specific usage, please refer to:

Modify fonts in vscode and use Fira Code

Improve visual studio's use of compelled conjoined characters (Fira code) and multi-line editing (MixEdit)

4. Rainbow indentation (indent-rainbow)

Indentation style, which extends to the indentation coloring in front of the text, alternating with four different colors in each step.

Of course, if you need to customize your favorite color, please copy and paste the following code snippet into settings.json

"indentRainbow.colors": ["rgba", "160.10)," Customize the title block

This is a great visual adjustment that changes the title bar color of different items so that they can be easily identified. This is useful if you are dealing with applications that may have the same code or file name (such as react-native applications and React Web applications).

Setting method: opening method: file > preferences > Settings > Workspace Settings

6. Tag Wrapping

If you don't know Emmet, then you may be a typewriter. Emmet allows you to write abbreviated code and return the corresponding tags, VSCode is already built-in, so there is no need to configure it.

If you want to know more about the abbreviation of Emmet, you can check out Emmet Cheatsheet

7. Internal and external balance

This suggestion comes from https://vscodecandothat.com/ and is highly recommended by the author.

You can use the Emmet command of balance inward and balance outward to select the entire tag in the VS code. It is helpful to bind these commands to keyboard shortcuts, such as Ctrl + Shift + up arrows for balancing outward, and Ctrl + Shift + down arrows for balancing inward.

8. Turbo Console.log ()

No one likes to enter very long statements, such as console.log (). This is really annoying, especially if you just want to output something quickly, look at its value, and then continue coding. What if I told you that you could record anything on the console as quickly 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 adding a prefix after the code structure. You can also uncomment / comment alt+shift+u / alt+shift+c for all console.log () added by this extension.

In addition, you can delete all of them via alt+shift+d:

9. Live server

This is a great extension to help you start a local development server that provides real-time reload for both static and dynamic pages, and provides powerful support for major features such as HTTPS, CORS, custom local host addresses and ports.

If used with VSCode LiveShare, it even allows you to share local hosts.

10. Copy / paste using multiple cursors

This feature is found to be useful when adding cursors on different lines to edit multiple lines of code. You can copy and paste the contents of these cursor selections, and they will be pasted in the order in which they are copied.

Mac: opt+cmd+up or opt+cmd+downWindows: ctrl+alt+up or ctrl+alt+downLinux: alt+shift+up or alt+shift+down

11. Breadcrumbs (bread crumbs)

There is now a navigation bar at the top of the editor called Breadcrumbs, which shows your current location and allows you to quickly navigate between symbols and files. To use this feature, you can use the View > Toggle Breadcrumbs command or enable it through the breadcrumbs.enabled setting. To interact with it, use the Focus Breadcrumbs command or press Ctrl + Shift +.

12. Code CLI

VS code has a powerful command line interface that allows you to control how to start the editor. You can open files, install extensions, change the display language, and output diagnostic information through command-line options.

Imagine that you clone a remote library through git clone and you want to replace the current VS Code instance you are using. Through the command code. -r will do this without leaving the CLI interface (learn more here).

13. Polacode

You will often see screenshots of code with custom fonts and themes, as shown below. This is the VS code with the x extension

I know that Carbon is also a better, more customizable alternative. However, Polacode allows you to keep it in the code editor and use any specialized fonts you may have purchased, which cannot be used in Carbon.

14. Quokka (JS/TS ScratchPad)

Quokka is the rapid prototyping development platform for JavaScript and TypeScript. When you enter the code, it will run your code immediately and display various execution results in the code editor.

A great extension to Quokka, when you prepare for a technical interview, you can output each step without having to set breakpoints in the debugger. It can also help you study the library's functions, such as Lodash or MomentJS, before you actually use it, and it can even be used for asynchronous calls.

15. WakaTime

If you want to record the time spent programming each day, WakaTime is an extension that helps record and store metrics and analysis of programming activities.

Thank you for reading! This is the end of this article on "Material Theme & Icons in the VSCode extension". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.