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.
- Speed of development
- Detection of errors prematurely
- Repository management
- Optimization of our code
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:
– 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
– 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.