JavaScript continues to be the world's most popular programming language. Designing anything on the web requires at least a working knowledge of JS, given the many frameworks and libraries you'll need to interact with. And with its expansion into important new technologies such as blockchain, JS seems set to remain relevant for the foreseeable future.
The popularity of JavaScript goes accompanied with a plethora of tools to make coding in JS easier. This is a list of well-known and popular tools for JavaScript, placed into categories that define important parts of the development process.
IDEs & Editors
The place where you write your code is important. Some developers prefer editors, some developers prefer Integrated Development Environments (IDEs). While editors make for smooth and responsive performance, IDEs are generally used for more complex projects, as they offer debugging functionality and support for ALM systems, can integrate with platforms for version control, and more.
- Visual Studio Code: Microsoft's code editor. According to the Stack Overflow 2018 Developer Survey, Visual Studio Code is the most popular developer environment tool of all (with 34% of respondents using it). It includes support for debugging, Git control, syntax highlighting, code refactoring, and more.
- Brackets: an open-source, lightweight text editor. Brackets has 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.
- Atom: this was written by the people over at GitHub. It's a text editor with plenty of features out of the box: cross-platform editing, a built-in package manager, smart autocompletion, find and replace, etc... Atom comes with plenty of themes and options to customize it as the developer wants.
- WebStorm: A JS IDE made by JetBrains. WebStorm offers support for intelligent code completion, on-the-fly error detection, navigation and refactoring for JS, TypeScript, stylesheet languages, and the most popular frameworks.
Task Runners & Module Bundlers
Whereas only a few years ago, it would've been a waste of time to learn how to use tasks runners and module bundlers, web apps and JS projects in general have become significantly more complex. As such, these tools have become a necessary component in any JS developer's workflow.
Plus, they help with boring and demotivating tasks such as minification, unit testing, and web page refreshing. While some build tools have a steep learning curve, they can help automate the menial tasks otherwise inevitable 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: just like Grunt, Gulp defines and runs time-consuming tasks. But different from Grunt, Gulp defines tasks as JavaScript functions instead of configuration objects.
- Brunch: focuses on simplicity and speed. It has a simple config and detailed documentation. Because it makes a few assumptions about your project (or limitations, depending on how you look at it), using Brunch to set up a project is generally easier than with any other build tool.
- Webpack: software that bundles all your JavaScript apps, as well as all kinds of different assets like images, font, and stylesheets. Supports ESM and CommonJS.
-
Browserify: the JS tool where you can write Node.js-style modules and compile them to use in a browser. Bundles up all the required modules into a neat file called
bundle.js. - Yeoman: the web's scaffolding tool for modern web apps. It's a tool that prescribes best practices and provides a modular architecture so you can quickly scale projects. Yeoman supports linting, testing, minification, and more.
- Parcel: this module bundler enables multicore compilation, which makes it blazingly fast. Out of the box, Parcel supports JS, CSS, HTML, and file assets.
Documentation Software
Software without documentation is any developer's nightmare. Software with poorly written documentation is arguably even worse. Documentation explains how software operates and how it should be used.
But writing documentation is hard: it's complex, time-consuming, and mostly boring too. Luckily, software documentation tools ease some of the burdens of writing documentation and make the process faster.
- Docco: This is a documentation generator written in Literate CoffeeScript. It generates an HTML document that shows your comments along with your code. All the comments are passed through Markdown and the code is passed through Highlight.js syntax highlighting.
- Swagger: Helps across the entire API lifecycle, from design to documentation. It's a set of rules and tools for describing APIs. It's language-agnostic and readable both by humans and machines.
- YUIDoc: a Node.js app that generates API docs from comments in the source code. YUIDoc supports a wide range of JS coding styles. Its output is API docs formatted as a set of HTML pages.
- JSDoc: a markup language used to annotate JS source code files, which is then used to produce documentation in formats like HTML and RTF.
Testing Frameworks
Software testing is an inevitable part of the development process. You need to figure out whether all your code works under a varying set of circumstances. It's how you identify errors, gaps, or missing requirements as compared with the actual requirements.
Software testing tools come in handy, because the growing complexity of apps makes it increasingly cumbersome to test software manually. Testing tools run a test script and generate test results automatically.
- Mocha: a JS test framework hosted on GitHub, Mocha is popular with many developers. It runs on Node.js and in the browser, and its tests run serially. Often paired with assertion library Chai.
- Protractor: an end-to-end test framework for Angular and AngularJS apps. This tool runs tests in a real browser, interacting with your app like an end user would, with native events and browser-specific drivers.
- Jasmine: a behavior-driven development framework for testing JS code. Jasmine doesn't 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: have a gutsy "Delightful JavaScript Testing" as their slogan. Jest is used by Facebook to test all JS code (including their React apps), and it wants to provide an integrated zero-configuration experience.
Linting Software
Although technically also part of testing, linting is so important it deserves a category of its own. It means running a program that checks your code for stylistic and programming errors.
Every JS developer should be using linting software to maintain the quality of their code. It improves the readability of your code, identifies structural problems, finds those ugly syntax errors, and generally allows you to discover problems in your JS code without having to execute it.
- ESLint: this one is a favorite with X-Team developers. ESLint is an open-source plugin for JS and JSX, to be used mainly on the command line. All rules are pluggable, so developers can create their own linting rules.
- TSLINT: another X-Team favorite, TSLint checks TypeScript code for readability, maintainability, and functionality errors. Just like ESLint, it can also be customized with its own lint rules.
- JSHint: a community-driven tool that detects errors and problems in JS code. JSHint can also be used to enforce coding conventing and style guides.
- Flow: a JS code checker developed by Facebook. Checks your code for errors through static type annotations, but needs only a minimum of such descriptions. Flow will infer the rest.
- Prettier: a fully automatic style guide, which leaves style debates at the door, so you can focus on more important decisions.
Debuggers
Ahhh, don't you love the process of finding and resolving problems with the code you've written? The single comma you misplaced in seven hundred lines of code? The illogical if-then statement that throws your machine into an infinite loop?
Debugging tools make debugging less time-consuming and laborious, and they help the developer achieve more accurate results. A debugger tool can become your best friend in frustrating times.
- 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 JS in all major browsers.
- Node Inspect: Similar to the Chrome Developer Tools, but for when your app runs on Node.js.
Security Analyzers
Cybersecurity has become a top priority for both companies and countries. Hackers can leverage vulnerabilities in software to blackmail their victims. While open-source code is vital to innovation and helps speed up the development process at no cost, it also comes with a security risk that cannot be underestimated.
Security analyzers look into your software's dependencies and help mitigate security risks.
- Snyk: An open-source security platform that finds and fixes vulnerabilities for npm, Maven, NuGet, RubyGems, PyPi, and more. Snyk is used by the likes of Salesforce, Google, Microsoft, ASOS, and other big names.
- RetireJS: RetireJS helps detect if you have versions of dependencies that are known to have security vulnerabilities. It's a command line scanner, has a Grunt plugin, a Chrome / Firefox extension, and a Burp / OWASP Zap plugin.
- OWASP Dependency Check: Similar to RetireJS, OWASP identifies your project dependencies and check if there are known, publicly disclosed vulnerabilities.
- Acunetix: This crawls your websites and performs both black box and grey box hacking techniques to find vulnerabilities. Scans both front-end and server-side applications.
- Source Clear: Supports Node.js, but also Ruby, Java, and Python. Source Clear helps you find verified public and private vulnerabilities.
- OSS Index: A free service to find open-source dependencies and understand where there are known, publicly disclosed vulnerabilities. Supports multiple ecosystems: npm, Bower, Drupal, NuGet, and more.
Package Managers
Software that can automatically install, upgrade, configure, and remove the packages maintained in repositories. But that's not all, 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 350,000 packages.
- Yarn: the main competitor of npm, so much so that I wrote a post about it. Developed by Facebook, Yarn offered some significant advantages over npm when released in 2016, although npm has since caught up considerably.
So many tools! Of course, while some of these tools are indispensable, others are not. Which tools will work best for you will depend on your client, your project, and your way of working.
Each tool has a learning curve and it's all too easy not to get much work done because you're still figuring out how your new tools work. That's why you should really only look into a new tool if you believe it will make your life or your project significantly better.
There is definitely fantastic software that I forgot to include. Are there any glaring gaps in this list? Let me know in the comments ✍.
Top comments (5)
I would add:
Surprised to see Grunt on the list. I'm curious to know if many people still using that?
I would say
Tslintandjshintare in a way deprecated(or going to be).eslintis supposed to the single source of truth for linting JS related.Thank you for the classification. It's easier to get the overview of which tool does what
Hey nice content. Summary of all tool. Thanx
Thank you!