Brief comment: VSCode is an open source cross-platform editor and one of my most satisfying IDEs. This article introduces several plug-ins used, which do solve a lot of pain points.
Quokka.js
Quokka.js runs your code as soon as you type and displays various execution results in the code editor. JavaScript and TypeScript are supported.
Similar Extensions:
-Code Runner --- Supports multiple languages such as: C, C++, Java, JavaSript, PHP, Python, Perl, Perl6, etc.
-Runner
Bracket Pair Colorizer 和 Indent Rainbow
Most languages require parentheses, but nesting between parentheses can make code difficult to read. Bracket Pair Colorizer and Indent Rainbow, these two plugins can make different reduced brackets display different colors.
Before using the plugin
using the plugin After using the plugin
Snippets
Snippets are some commonly used code snippets, such as import React from 'react'; for these commonly used codes, we just need to type imr and press the tab key to automatically complete them for us. The same clg will become console.log.
一些不错的 extension 有
-JavaScript (ES6) code snippets
-React-Native/React/Redux snippets for es6/es7
-React Standard Style code snippets - Visual Studio Marketplace
-React Standard Style code snippets - Visual Studio Marketplace
TODO Kosuke
Usually when we write code, we feel that the current implementation is not elegant and there is a better way to implement it. We will habitually add // TODO: Needs Refactoring or something else. But over time, we learned a skill that automatically ignores TODO. Todo Highlighter is a plugin that urges you to deal with this problem quickly. He will highlight where there are TODOs / FIXMEs. (The plugins have already helped with this, and then the practice will depend on the individual)
Similar Extensions:
-Todo+
-Todo Parser
cost tips
The Import Cost extension surprised me. I rarely paid attention to the size of the imported package when writing code before. These issues are only considered during post-optimization. But this plugin can prompt you how big the package is when you import it.
REST client
As a web developer, we often need to use REST APIs. In order to detect the URL and detect the response, we generally use tools such as Postman to test. But if we use the REST Client plugin, we can test our API directly in VSCode.
Autocomplete tags and linked duplicate tags
Entering half of the tags in VSCode will automatically help to complete the other half, but if I want to modify it later, I need to change both sides. Auto Close Tag and Auto Rename Tag plug-ins can solve this problem very well.
Auto Rename Tag
Auto Close Tag
Similar plugins:
-Auto Complete Tag
-Close HTML/XML tag - Visual Studio Marketplace
GoLens
GitLens can enhance the capabilities of VSCode's built-in Git. Specific features such as commits search, history and code authorship displayed can be found in the Feature List.
Similar Extensions:
-Git History - Beautiful graphs showing commit history and more. recommend.
-Git Blame - It allows you to see Git Blame information in the status bar of the currently selected row. GitLens also provides similar functionality.
-Git Indicators - It allows you to see the affected files and the number of lines added or removed from the status bar.
-Open in GitHub / Bitbucket / Gitlab / VisualStudio.com ! - It allows you to open a specific repo using a browser.
Git Project Manager
Git Project Manager allows you to open a new window directly from the VSCode window. This way we can switch repositories in VSCode.
After installing this plugin, we need to set gitProjectManager.baseProjectsFolders to contain the repositories we need.
E.g:
{
"gitProjectManager.baseProjectsFolders": [
"/home/user/nodeProjects",
"/home/user/personal/pocs"
]
}
Similar Extensions:
-Project Manager
Indenticator
The indenticator can visually highlight the current indentation depth. Different levels of indentation can be easily distinguished.
Similar Extensions:
- Guides
- Guides - Visual Studio Marketplace
VSCode icon
The editor can be beautified.
Similar Extensions:
-VSCode Great Icons -Studio
Icons
-Studio Icons - Visual Studio Marketplace
Dracula (theme)
A theme I like.
Original: Top JavaScript VSCode Extensions for Faster Development
Recommended reading: Elegant Patterns in JavaScript: RORO