JavaScript is still the world’s most popular programming language. Producing anything on the web requires at least a working knowledge of JavaScript, given the multiple frameworks and libraries you will need to interact with and with its development into important new technologies such as blockchain, JavaScript seems set to remain relevant for the foreseeable future.
With the popularity of JavaScript goes accompanied with a surplus of tools to make coding in JavaScript easier. Today’s post is a list of well-known and popular tools for JavaScript, placed into categories that define important parts of the development process.
IDEs & Editors
It’s the place where you write your code is important, some devs some prefer editors and others prefer Integrated Development Environments (IDEs). While editors make for smoother and responsive performance, IDEs are generally used for more complex projects, as they offer to debug functionality and support for ALM systems which can integrate with platforms for version control and more.
Visual Studio Code
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It includes support for debugging, auto-indentation, Git control, syntax highlighting, code refactoring, and more.
WebStorm
A JavaScript IDE made by JetBrains. WebStorm offers support for intelligent code completion, on-the-fly error detection, powerful navigation and refactoring for JS, TypeScript, stylesheet languages and the most popular frameworks.
Brackets
An open-source, lightweight text editor. Brackets have visual tools and preprocessor support. It has an inline editor, and you can live preview code, to see your changes instantly reflected in the browser.
Package Managers
Having that software that can automatically install, upgrade, configure and remove the packages that is maintained in the repositories. Also, package managers also look at your dependencies and make sure new versions of packages don’t break your code.
NPM
The default package manager for Node.js, although it can be used for front-end development too. It’s the largest software registry in the world, with over 1.2 million packages.
Yarn
The main competitor of npm, developed by Facebook, Yarn offered some significant advantages over npm when released in 2016, although npm has since caught up considerably.
Task Runners & Module Bundlers
These tools have become a significant component in any JavaScript developer’s workflow. They help with tasks such as web page refreshing, minification, unit testing, and while you will find some build tools will have a learning curve, they can help automate common tasks in programming.
Grunt
A JavaScript task runner that automates repetitive tasks like minification, compilation, linting, unit testing, and more. Grunt has a huge ecosystem with over 6,000 plugins.
Gulp
Gulp defines and runs time-consuming tasks. But different from Grunt, Gulp defines tasks as JavaScript functions instead of configuration objects.
ParcelJS
This module bundler enables multicore compilation, which makes it blazingly fast. Out of the box, Parcel supports JS, CSS, HTML, and file assets.
WebPack
Software that bundles all your JavaScript apps, as well as all kinds of different assets like images, font and stylesheets, it supports ESM and CommonJS.
Documentation Software
Software without documentation is any developers nightmare. Software with inadequately written documentation is arguably even worse, documentation explains how the software operates and how it should be used. But writing documentation is hard: it’s complicated, time-consuming, and boring too. Fortunately there’s are some software documentation tools which ease some of the burdens of writing documentation and make the process faster.
Docco
Docco is a quick-and-dirty documentation generator, written in Literate CoffeeScript. It produces an HTML document that displays your comments intermingled with your code. All prose is passed through Markdown, and code is passed through Highlight.js syntax highlighting.
JSDoc
Markup language used to annotate JS source code files, which is then used to produce documentation in formats like HTML and RTF.
Swagger
Helps across the entire API life-cycle, from design to documentation. It is a set of rules and tools for describing APIs and it’s language-agnostic and readable both by humans and machines.
YUIDoc
YUIDoc is a Node.js app that generates API docs from comments in the source code. YUIDoc supports a wide range of JS coding styles and its output is API docs formatted as a set of HTML pages.
Testing Frameworks
Software testing is a necessary part of the development process and you need to figure out whether all your code works under a changing set of circumstances. It is how you can identify errors, gaps or missing requirements as compared to the actual project requirements. These testing tools come in handy because the growing complexity of apps makes it increasingly cumbersome to test software manually, these tools run a test script and generate test results automatically.
Jasmine
A behavior-driven development framework for testing JS code. Jasmine does not depend on any other JavaScript frameworks, nor does it require a DOM to work. It has clean and easy to understand syntax, which makes it easy to write tests.
Jest
Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
Mocha
Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.
Linting Software
Every JavaScript developer should already be using linting software to maintain the quality of their code as it improves the readability of your code, identifies structural problems, finds those syntax errors while allowing you to discover problems in your code without having to execute it.
ESLint
ESLint is an open-source plugin for JS and JSX, to be used mainly on the command line and all rules are plugg-able, so devs can create their own linting rules.
Flow
A JS code checker developed by Facebook, it checks your code for errors through static type annotations but needs only a minimum of such descriptions. Flow will understand the rest.
JSHint
JSHint is a community-driven tool that detects errors and potential problems in JavaScript code. Since JSHint is so flexible, you can easily adjust it in the environment you expect your code to execute. JSHint is open source and will always stay this way.
Prettier
A fully automatic style guide, which leaves style debates at the door, so you can focus on more important decisions.
Debuggers
Debugging tools make debugging less time-consuming and difficult as they help you achieve more accurate results, a debugger tool can become your best friend in frustrating moments.
Chrome Developer Tools
A set of tools built directly into the Google Chrome browser, the Chrome Developer Tools have multiple utilities that help you debug JS code step by step.
JavaScript Debugger
Developed by the Mozilla Developer Network, the JavaScript Debugger can be used to debug in Firefox or even as a stand-alone web-app for debugging code in other browsers or Node.js.
JavaScript Development Tools (JSDT)
This provides plugins that support debugging JavaScript using Rhino and Crossfire. It can debug JavaScript in all major browsers.
