Top Plugins Visual Studio Code for JS

When you develop or refactor code, do you do it with paper and pen? Or do you use tools to make your job easier? If you don’t have the right plugins, it’s like you’re programming by hand.

Within the world of applications, we can find many channels to develop, for websites, for mobile phones, for televisions, libraries with different functionalities, plugins for browsers, etc … And to carry out this, we use different softwares to facilitate this task.

In recent years, within the JS community, there is one in particular that has gained relevance and has managed to be the leader for this type of development. We are talking about the Visual Studio Code. This IDE, will facilitate the tasks not only of the development with javascript and other languages, but what through its plugins, we will improve:

• Speed ​​of development
• Detection of errors prematurely
• Repository management
• Optimization of our code
• Debugging

All this, we could achieve by selecting the appropriate plugins and their use. We talk about adequate, since we install more, the performance of our editor could be affected, in addition to being continuously alerting us.

Within these libraries that we could install to optimize our development with JS, we could divide them into the following categories:

• Snippets: it will help us accelerate our development by using abbreviations
• Syntax Highlighting: it will facilitate the detection of certain code by changes in its format, such as the colo
• Linter: detection of predefined errors in our code
• Formatting: formatting our code
• Browser: related to the browser and our editor
• Framework / library: referring to specific frameworks and libraries such as react, vue, angular, node…
• Testing: it will facilitate the creation and debugging with tests

Taking into account, that we were going to develop a generic JS application, the important plugins that we would add:

– VS Code JavaScript (ES6) snippets

– ESLint: It will check your code taking into account your eslintrc configuration file

– npm Intellisense: Autocomplete npm modules in import declarations.

– npm: use package.json to validate installed dependencies

– Import Cost: shows the size of an imported package within the editor

– Beautify: helps you format the code

– Prettier Code Formatter: code formatter

– JS Refactor: JS code refactorizer

– JavaScript Booster: it will help us refactor and detect code that we can optimize

– Code Metrics: shows us the cyclomatic complexity of our code

– ESLint: JS validator

– Better Comments: Format our comments

– Wallaby.js: live from our code and help us debug our code

– Auto Close Tag: Close our tags automatically

– CDNjs: list of all libraries with their CDNs in JS

– Paste JSON as Code: convert our json file to any language

– GitLens: to debug and check git changes in our code

It is very important that we configure our development tools in the proper way. Surely we would be surprised if we saw a farmer digging with his hands, having the possibility of using a hoe or a tractor. Let’s not be with “Blacksmith’s house, wooden spoon.” With proper configuration, we will go faster with a better quality code.

Bibliography:

• https://code.visualstudio.com/
• https://www.sitepoint.com/vs-code-extensions-javascript-developers/
• https://hackernoon.com/10-essential-vs-code-extensions-for-javascript-developers-in-2019-e8320e3f421e
• https://scotch.io/bar-talk/11-awesome-javascript-extensions-for-visual-studio-code#:~:targetText=11%20Awesome%20JavaScript%20Extensions%20for%20Visual%20Studio%20Code%20%E2%80%95%20Scotch.io&targetText=%23react%20%23vue%20%23angular%20%23,python%20Learn%20JavaScript%20for%20Free!
• https://medium.com/better-programming/26-miraculous-vscode-tools-for-javascript-developers-in-2019-e184131d75af
• https://medium.com/swlh/60-extensions-to-supercharge-visual-studio-code-2f93a51b3cf4
• https://codeforgeek.com/best-visual-studio-code-extensions-web-development/