Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

JavaScript development is catching steam fast. Therefore, the tools are also getting better as developers are running into more problems with productivity.

Here are the best tools for JavaScript developers to boost their productivity.

Visual Studio Code

Visual Studio Code is one of the best text editors out there. It has support for JavaScript and types inference for libraries and our own code via a JavaScript/TypeScript language server with all the types.

Also, it has lots of add-ons for plugins like Vue.js plugin, linters, code formatters, and more.

We can also open the terminal right inside the editor to run tools.

In addition, we can view items in tabs or side by side, which are great for large projects with long files.

It's updated regularly so new enhancements and bug fixes are added all the time.

Chrome Developer Console

The Chrome developer console is great for debugging JavaScript code. We can see what's run with the debugger and also from the console if we add console.log statements to our code.

Also, it has a Lighthouse performance profiler to make sure our apps run fast.

Furthermore, it has tools to fiddle with CSS to test changes without reloading our app.

The Network shows all network activity so we can see what it's sending and the response that comes back from it.

We can also change the speed to simulate different kinds of Internet connections and see how are app acts.

ESLint

ESLint is a linter, which is used to catch bad code style and syntax errors. It's very useful when developing in teams to keep the styles of the code in sync.

There're lots of rules by various vendors like Airbnb, which contributes their own linting rules.

Framework Specific Development Tools

The 3 popular front end frameworks, React, Vue, and Angular, all have their own command-line programs to generate code files and build the code for various environments so we don't have to set everything up ourselves.

All of them rebuild and reload our app automatically as we make changes. They also support features that are useful for developers like TypeScript integration and managing environment variables.

Vue and Angular CLI so supports running tests out of the box.

Repl.it, JSFiddle and CodeSandbox

These are useful for fiddling with front end and Node.js Javascript code in a sandboxed environment.

We can either keep the code by signing up for an account for them or downloading the code to our computer.

They're great for testing stuff out without installing anything on our computer. The only downside is that most of them don't support automated testing very well.

Conclusion

These tools are very helpful for building any kind of JavaScript app. Some like Chrome developer tools, JSFiddle, and the framework-specific tools are for front end only, while the rest are great for developing any kind of JavaScript apps.