Translator: Front-end wisdom

Original text: codeburst. IO/top – javascr…

To read more quality articles pleaseJabber at the GitHub blog, a hundred quality articles a year waiting for you!

Bracket Pair Colorizer and Indent Rainbow

Curly braces and parentheses are an integral part of many programming languages. In languages such as JavaScript, curly braces and curly braces may have multiple layers of nesting within a screen of code. Some of the brackets are not easy to identify which one corresponds to which, but there is no easy way to identify which one corresponds to which.

Bracket Pair Colorizer and Indent Rainbow. These are two different extensions. However, they are like a couple and can work perfectly together. These extensions will add a range of colors to your editor and make code blocks easy to identify, and once you get used to them, VSCode will feel flat without them.

Don’t use Bracket Pair Colorizer and Indent Rainbow

After using Bracket Pair Colorizer and Indent Rainbow

Snippets

Snippets are short pieces of code in the editor. Therefore, instead of ‘import React from ‘, you can type IMr and press Tab to expand the code snippet. Similarly, the CLG becomes console.log.

Various frameworks and libraries have snippets of code: Javascript, React, Redux, Angular, Vue, Jest. I personally find Javascript snippets very useful because I mostly use JS.

Some nice snippet extensions —

  • JavaScript (ES6) code snippets

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

  • React Standard Style code snippets

TODO highlight

Often when you’re coding, you think there might be a better way to do the same thing. At this point you leave a comment // TODO: needs refactoring or something related. But it’s easy to forget this comment and push your code to master or production. But if you use Todo Highlighter, it will highlight and make it easy for you to see the comment.

It highlights “TODO/FIXME” in the code or any other comments in the code in bright colors so that they are always clearly visible. Another nice feature is List Highlighted Annotations, which lists all toDos in the console.

A similar extension using Todo Highlighter —

  • Todo+ – More powerful Todo highlighting extension with more features.

  • Todo Parser

Import Cost

This extension allows you to see the size of the imported modules, and it helps a lot with bundlers in Webpack to see if you want to import an entire library or just a specific utility.

REST Client

As Web developers, we often need to use REST apis. To check the URL and check the response, tools like Postman are used. But why use a different application when an editor can easily accomplish the same task? The REST Client allows you to send HTTP requests and view the response directly in Visual Studio code.

Auto Close Tag and Auto Rename Tag

Since the advent of React and the traction it has gained over the past few years, HTML-like syntax in the form of JSX is now very popular. We also have to code with JavaScript tags. As any Web developer will tell you, entering labels is a pain. In most cases, we need a tool that can quickly and easily generate labels and their children. Emmet is a great example of VSCode, however, sometimes you just want something simple and straightforward. For example, auto-update tags, which automatically generates the end tag when you enter the start tag. The close tag automatically changes when you change the same tag, which is what these two extensions do.

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

Get the two extensions here — Auto Close Tag and Auto Rename Tag.

A similar extension —

  • Auto Complete Tag – combines automatic renaming and automatic closing of tags.

  • Close HTML/XML tag

GitLens

As stated by its author, GitLens enhances the Git capabilities built into Visual Studio Code and includes many powerful features such as Code authors displayed by tracking Code, submit searches, history, and the GitLens resource Manager. You can read a full explanation of these features here.

A similar extension —

  • Git History – nice charts showing commit History, and more. Recommend it.

  • Git Blame – This allows you to view the Git Blame information for the currently selected row in the status bar. GitLens offers a similar function.

  • Git Indicators – this allows you to view the affected files and the number of rows added or removed from the status bar.

  • Open in GitHub / Bitbucket / Gitlab / VisualStudio.com ! – It allows you to open repO in a browser with a single command.

Git Project Manager (GPM)

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

After installing the extension, you must put the gitProjectManager. BaseProjectsFolders set to contain repos URL list. Such as:

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

A similar extension —

Project Manager – I don’t use it myself, but it has million + installations. So I suggest you definitely check it out.

Indenticator(indent indicator)

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

VSCode Icons

Make your edit more attractive icon!

A similar extension —

  • VSCode Great Icons

  • Studio Icons

Dracula (Theme)

Dracula is my favorite subject.

We can use shortcut keys to quickly select a new theme;

First: Press Ctrl + K

Then press Ctrl + T again

Other recommendations

  • Fira Code — Equi-width font with programming conjoined characters. Note: After the Clone project, find the TTF folder and install the font files in that folder. Restart VSCode, select TOOLS -> Options -> Fonts and Colors, and select Fira Code.

  • Live Server – a local development Server with real-time reloading capabilities for static and dynamic pages.

  • EditorConfig for VS Code – This plug-in attempts to override user/workspace Settings using Settings in the. EditorConfig file, no other or VS code-specific files are required. As with any EditorConfig plug-in, if root = true is not specified, EditorConfig will continue to look for the. EditorConfig file outside the project.

  • Prettier for VSCode – a code formatting tool

  • Bookmarks – It helps you navigate through code, moving between important places easily and quickly. Without searching code, it also supports a set of selection commands that allow you to select the bookmark line and the area between the bookmark line, which is useful for log file analysis.

  • Path Intellisense – Visual Studio Code plug-in that automatically fills file names.

  • Version Lens – Displays package Version information for NPM, JSPM, Bower, DUB, and Dotnet cores in the Visual Studio code editor.

The possible bugs in editing can not be known in real time. In order to solve these bugs after the event, I spent a lot of time on log debugging. By the way, I recommend a good bug monitoring tool for youFundebug.

The original:Codeburst. IO/top – javascr…

** There may be bugs after code deployment can not be known in real time, in order to solve these bugs, spent a lot of time for log debugging, here incidentally to recommend a good BUG monitoring tool Fundebug. 支那

Your likes are my motivation to keep sharing good things.

A stupid code farmers, my world can only lifelong learning!