This article tries to highlight tools which you might find useful and might improve your workflow.
This article compares tools with relation to which project types profit from them. We will look at the following types:
- Library: A general purpose library that will be used/included by “real” applications.
- Node.js module: A project which is build to be used only inside Node.js.
Linters are almost always useful, both as CLI-tool or integrated into your editor. They help you prevent and debug much more easily, ranging from highlighting simple syntax errors, to advanced issues like out-of-scope errors or accidental assignments.
The most popular, and in my opinion, the best linter right now. ESLint has great integration into all common IDEs and editors as well as a great node module for all your linting needs. Another big advantage is the huge amount of customizable options as well as the plugins to support subsets like flow, typescript etc.
I used JSHint before switching to ESLint. JSHint is a decent linter that is fast and customizable, however has less options and features than ESLint.
Developed by Douglas Crockford, one of the big names in the JS community. The main advantage of this linter is the small codebase without any external dependencies, however The integration into build-tools or editors is quite limited.
Formatters are wonderful to enforce style-guides and are a great timesaver, once they are configured. So far I only used formatters as extension to my editors, but I’m sure integrating them into the build-chain can be useful as well.
If you are only writing small scripts, for example for a website, setting it up might be more work than doing it yourself, however in every other case I recommend using one.
The previous de-facto standard js-beautify does pretty much everything. Integration into all popular IDEs and editors and great customizability to tailor it to your style-guide makes working on “beautiful” code much easier.
Prettier is relatively new tool compared to js-beautify, but at least as useful. Prettier’s thing is being “an opinionated code formatter”. It supports a ton of formats and has very good integrations into other tools and IDEs as well.
Minifiers are a great tool for every use-case where file-size and performance matters. Having to serve only a fraction of the original file-size can lead to great performance improvements for the end-user.
UglifyJS is the biggest and most in-depth minifier that goes many steps further than simply stripping redundant spaces, tabs or line-breaks:
from mangling variable names, over replacing if-blocks with ternaries to stripping unused code, UglifyJS does it. From my experience UglifyJS is the most effective of all minifiers I used, with the only drawback being the slightly higher time it takes to process code.
Note: The ES6 version of UglifyJS is no longer maintained - When working with ES6+ code, You probably want to use Terser (See below).
Terser is a fork of UglifyJS’s ES6 branch. Not much else to say - it works just as well as UglifyJS, with the the advantage of actively being developed for ES6+ JS.
I never used Google Closure Compiler before, so all I say here is based on reading the descriptions.
The main advantage seems to be the REST API, which allows for much faster processing of huge code -bases.
Efficiency-wise it seems to perform slightly worse than UglifyJS.
Another tool by Crockford.
While being much faster than the two other tools, this minifier only strips spaces/tabs/breaks. I would only recommend this of you value a fast build-process over efficient minification.
Note: Does not work with ES6+ code.
Transpilers can allow you to use the latest ES features while supporting old browsers, or writing in a subset of JS like TypeScript or Flow to make development faster, easier and future-proof.
Babel is quite the big name in the JS community: Using all the latest ES features without having to care about browser support? Yes please.
Following that, the main use-case for babel is the web: both website and web-app development gets easier with babel. however if your code is only a few lines, you might be of better of directly writing “old” code rather than adding a new build step.
Facebook’s Flow offers a similar feature as TypeScript: static typing that compiles into regular JS.
Bundlers allow you to organize your code as well as external dependencies before bundling it all up into a single file for distribution. Again, if you only have a few lines of code, you wont need this. Every other project that ends up in the browser should look into bundlers.
I wrote two in-depth articles about bundling and bundling tools, you can read them here: