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

This article mainly introduces which VSCode plug-ins to improve the efficiency of JavaScript development, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to know about it.

Visual Studio Code (also known as VSCode) is a lightweight but powerful cross-platform source code editor that more and more developers like to use with built-in support for development tools such as TypeScript and the Chrome debugger.

1. Quokka.js

Quokka.js is a real-time running code platform for JavaScript and TypeScript. This means that it will run the code you typed in real time and display various execution results in the editor. It is recommended to try it yourself.

After installing this extension, you can press Ctrl / Cmd (⌘) + Shift + P to display the editor's command palette, and then type Quokka to see a list of available commands. Select and run the New JavaScript File command. You can also press (⌘ + K + J) to open the file directly. Anything entered in this file is executed immediately.

Similar extensions to Quokka.js-

Code Runner-supports multiple languages, such as Cpene C + +, Java,JavaScript,PHP,Python,Perl,Perl 6, etc.

Runner

two。 Parentheses paired shading (Bracket Pair Colorizer) and rainbow indentation (Indent Rainbow)

Curly braces and parentheses are an integral part of many programming languages. In languages such as JavaScript, curly braces and parentheses may have multiple layers of nesting in a screen of code, and some parentheses are not easy to identify which corresponds to which. However, there is no simple way to identify the correspondence before and after these parentheses.

Parentheses pair shading (Bracket Pair Colorizer) and rainbow indentation (Indent Rainbow). These are two different extensions. However, they are like a couple and can be used perfectly together. These extensions will add a series of colors to your editor and make code blocks easy to identify, and once you get used to them, it will feel dull without them in VSCode.

Do not use parentheses paired shading (Bracket Pair Colorizer) and rainbow indentation (Indent Rainbow)

After using parentheses to pair coloring (Bracket Pair Colorizer) and rainbow indentation (Indent Rainbow)

3. Snippets (code snippet)

Code snippets are short code in the editor. Therefore, you can type imr and press Tab to expand the code snippet instead of 'import React from'. Similarly, clg becomes console.log.

There are many code snippets in various frameworks and class libraries: Javascript,React,Redux,Angular,Vue,Jest. Personally, I find Javascript code snippets very useful because I mainly use JS.

Some good code snippet extensions-

JavaScript (ES6) code snippets

React-Native/React/Redux snippets for es6/es7

React Standard Style code snippets

4. TODO highlight

Usually when coding, you think there may be a better way to perform the same operation. At this point you leave a comment / / TODO: you need refactoring or something related. But it's easy to forget this comment and push your code to the main version library (master) or production environment (production). But if you use Todo Highlighter, it will highlight and make it easy for you to see the comment.

It highlights the "TODO/FIXME" or any other comments in the code in a bright color so that it is always visible. Another good feature is List Highlighted annotations, which lists all TODO in the console.

Using Todo Highlighter (highlight) similar extensions-

Todo+  -   's more powerful Todo highlight extension with more features.

Todo Parser

5. Import Cost

This extension allows you to view the size of the import module, which is very helpful for bundlers in Webpack, and you can see whether to import the entire library or only specific utilities.

6. REST Client

As web developers, we often need to use REST api. To check the url and the response, tools such as Postman are used. But why use different applications when the editor can easily accomplish the same task? REST Client allows you to send a HTTP request and view the response directly in the Visual Studio code.

7. Automatic closing tag (Auto Close Tag) and automatic renaming tag (Auto Rename Tag)

Since the advent of React and the appeal it has gained over the past few years, html-like syntax in the form of JSX is now very popular. We also have to use the JavaScript tag for coding. Any web developer will tell you that typing tags is a painful thing. In most cases, we need a tool that can generate tags and their child tags quickly and easily. Emmet is a good example of VSCode, but sometimes you just want something simple and straightforward. For example, automatically update the tag, which automatically generates the closing tag when you enter the start tag. When you change the same tag, closing the tag changes automatically, as these two extensions do.

It also applies to JSX and many other languages, such as XML,PHP,Vue,JavaScript,TypeScript,TSX.

Get these two extensions here-the automatic closing tag (Auto Close Tag) and the automatic renaming tag (Auto Rename Tag).

A similar extension-

Auto Complete Tag  -   combines automatic renaming and automatic closing of tags.

Close HTML/XML tag

8. GitLens

As its authors say, GitLens enhances the built-in Git functionality in Visual Studio Code, which includes many powerful features, such as code authors by tracking code display, submission search, history, and GitLens Explorer. You can read the full description of these features here.

A similar extension-

Git History  -  shows beautiful charts of submission history, and so on. Recommend.

Git Blame   -it allows you to view Git Blame information for the currently selected line in the status bar. GitLens provides similar functionality.

Git Indicators-it allows you to view affected files and the number of lines added or deleted in the status bar.

Open in GitHub / Bitbucket / Gitlab / VisualStudio.com!-it allows you to open repo in a browser using a single command.

9. Git Project Manager (Git Project Manager,GPM)

The Git Project Manager (Git Project Manager,GPM) allows you to open a new window for the Git repository directly from the VSCode window. Basically, you can open another repository without leaving VSCode.

After installing this extension, you must set gitProjectManager.baseProjectsFolders to the URL list that contains repos. For example:

{"gitProjectManager.baseProjectsFolders": ["/ home/user/nodeProjects", "/ home/user/personal/pocs"]}

A similar extension-

Project Manager-I didn't use it myself, but it has a million + installation. So I suggest you take a look at it.

10. Indenticator (indent indicator)

It visually highlights the current number of indents, so you can easily distinguish between blocks of code that are indented at different levels.

11. VSCode Icons

Icons that make your editors more attractive!

A similar extension-

VSCode Great Icons

Studio Icons

12. Dracula (Theme)

Dracula is my favorite theme.

We can use keyboard shortcuts to quickly select a change theme.

First: press Ctrl + k

Then press: Ctrl + t

13. Other recommendations

Fira Code  -  is an equal width font with programmatic conjoined characters. Fool's Wharf Note: after the clone project, find the ttf folder, and then install the font files in this folder. Restart VSCode, select TOOLS-> Options-> Fonts and Colors, and select Fira Code.

Live Server  -  is a local development server with real-time reloading of static and dynamic pages.

EditorConfig for VS Code-this plug-in attempts to override user / workspace settings with the settings in the .editorconfig file without the need for other or vscode-specific files. As with any EditorConfig plug-in, if root = true,EditorConfig is not specified, it will continue to look for the .editorconfig file outside the project.

Prettier for VSCode  -  a code formatting tool.

Bookmarks-it helps you navigate through your code and move between important locations easily and quickly. No longer need search code, it also supports a set of selection commands that allow you to select the area between the bookmark line and the bookmark line, which is useful for log file analysis.

The Path Intellisense  -  Visual Studio Code plug-in, which automatically populates the file name.

Version Lens  -  displays package version information for npm,jspm,bower,dub and dotnet cores in the Visual Studio code editor.

14. 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.

15. 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

16. 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)

17. 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

19. 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

20. 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.

21. 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:

twenty-two。 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.

23. Copy / paste Mac: opt+cmd+up or opt+cmd+downWindows: ctrl+alt+up or ctrl+alt+downLinux: alt+shift+up or alt+shift+down using multiple cursors

24. 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 +.

25. Code CLI

The 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).

twenty-six。 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.

twenty-seven。 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.

twenty-eight。 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 article carefully. I hope the article "what are the VSCode plug-ins to improve the efficiency of JavaScript development" shared by the editor will be helpful to you. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!

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.