↓Skip to main content
IT Blog IT Blog
  1. All Posts/

tooling

Tools HTML

JavaScript and TypeScript tooling overview

A quick and up-to-date overview of existing build and developer tools for JavaScript and TypeScript.
The intended audience is project maintainers and tool authors. The list is selective; non-recommended tools are listed separately. Existing resources with a similar focus on tooling are listed at the end; the motivation for this list is filling a gap in them.
The list format includes links to project homepages (if they exist), GitHub pages, and npm trends comparisons where applicable. The format differs from the awesome template by being slightly more detailed and opinionated.
Criticism, adding omissions and other contributions are welcome.

🔥 Zero-config presets

npm trends 📈

Presets, generators or initializers that don’t require configuration to start using them. Presets are recommended when starting out and to save the time and effort of building and maintaing a custom stack, but can be limited in certain aspects.

  • @pika/pack (GitHub)

    • Build npm packages using composable plugins
  • nwb (GitHub)

    • Toolkit for quick development with React, Inferno, Preact or vanilla JavaScript
  • TSDX (GitHub)

    • Library-oriented preset for TypeScript
  • Neutrino (GitHub)

    • Zero-configuration presets for React, Preact, Vue, web and Node.js projects and libraries; lacks TypeScript support

React presets and frameworks

  • Create React App (GitHub)

    • The most popular React project initializer; supports TypeScript and many other tools, and is a safe choice for starting a React app
  • Next.js (GitHub)

    • React framework for server-side rendering
  • Gatsby (GitHub)

    • PWA and static site generator
  • React Starter Kit (GitHub)

    • “Isomorphic” (universal) web app boilerplate

Toolchains

  • Rome (GitHub)

    • Rome is an experimental JavaScript toolchain from Facebook which includes a compiler, linter, formatter, bundler, testing framework and more

🚚 Bundlers

npm trends 📈

  • webpack (GitHub)

    • The most popular bundler with a wide ecosystem of plugins; used by popular tools like Create React App
  • Rollup (GitHub)

    • A bundler often used specifically for bundling libraries; requires plugins for TypeScript support (see TypeScript section below)
  • Parcel (GitHub)

    • A fast, zero-configuration bundler; builtin TypeScript support
  • FuseBox (GitHub)

    • Fast bundler with many features and builtin publishing and TypeScript support
  • microbundle (GitHub)

    • Fast, zero-configuration bundler that aims to reduce bundle size; supports TypeScript out of the box
  • Poi (GitHub)

    • Zero-config bundler based on webpack
  • browserify (GitHub)

    • The first JavaScript bundler around

Other

👨‍💻 Compilers

Tools that allow “transcompiling” or “transpiling” JavaScript.

  • Babel (GitHub)

    • A tool to “downlevel compile” modern JavaScript to support older browsers; also used to add features like JSX to the language
    • @babel/preset-env

      • Tune Babel output for the minimum required level of browser support
  • swc (GitHub)

    • Very fast Babel alternative written in Rust
  • TypeScript (GitHub)

    • JavaScript with gradual typing; particularly useful for library authors and larger projects

🧫 Code generators

npm trends 📈

  • hygen (GitHub)

    • Ad-hoc generator or project scaffold tool
  • plop (GitHub)

    • Boilerplate micro-generator framework

💅 Formatters and linters

npm trends 📈

  • ESLint (GitHub)

    • The defacto standard linter for JavaScript (and TypeScript since typescript-eslint)
    • eslint-config-airbnb (GitHub)

      • The most popular ruleset for ESLint; relatively conservative 
      •   <li>
    <a rel="nofollow noopener" target="_blank" href="https://standardjs.com/"><strong>Standard</strong></a> (GitHub)</p> <ul dir="auto">
      <li>
        A popular ruleset, although the &#8220;standard&#8221; name is more tongue in cheek
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://typescript-eslint.io/"><strong><code>typescript-eslint</code></strong></a> (GitHub)</p> <ul dir="auto">
      <li>
        Replacement for the now-deprecated TSLint
      </li>
    </ul>
  </li>
  
  <li>
    <strong><code>eslint-config-es</code></strong> (GitHub)</p> <ul dir="auto">
      <li>
        ESLint configuration with a focus on strictness; supports TypeScript, React
      </li>
    </ul>
  </li>
</ul>
    • Prettier (GitHub)

      • Opinionated formatter for JavaScript and TypeScript; useful for automatically enforcing consistent formatting and hence, for example, simplifying code reviews
      • prettier-eslint (GitHub)

        • Allows using Prettier as an ESLint plugin 
        •   <li>
    <code>eslint-config-prettier</code> (GitHub)</p> <ul dir="auto">
      <li>
        Prevents ESLint conflicts with Prettier
      </li>
    </ul>
  </li>
  
  <li>
    <code>pretty-quick</code> (GitHub)</p> <ul dir="auto">
      <li>
        Skips running Prettier on unchanged files
      </li>
    </ul>
  </li>
</ul>
      • XO (GitHub)

        • Opinionated (zero-config), configurable ESLint wrapper
        • vscode-linter-xo (GitHub)

          • XO doesn’t integrate with ESLint tools, so it requires special support in editors
      • Zoe (GitHub)

        • Zero-config ESLint toolchain; includes Prettier and supports Jest and React
      • dprint (GitHub)

        • TypeScript, JavaScript, and JSONC formatter implemented in Rust; supports Prettier 2.0’s ruleset

      🐌 Runtimes

      • Node.js (GitHub)

        • The de facto standard runtime for JavaScript; includes the npm and npx tools
      • babel-node

        • Can execute or provide a REPL for, e.g., TypeScript
      • Deno (GitHub)

        • JavaScript and TypeScript runtime with an alternative module design
      • ts-node (GitHub)

      Version managers

      • nvm (GitHub)

        • A commonly used version manager for Node.js
      • fnm (GitHub)

        • Fast Node Manager; built in native ReasonML
      • Volta (GitHub)

        • Fast, reliable and universal version manager for the whole Node.js toolchain; written in Rust

      🏃 Testing

      Tools for end-to-end, integration and unit testing.

      Test libraries and frameworks

      npm trends 📈

      • Mocha (GitHub)

        • Test framework
      • Jasmine (GitHub)

        • BDD testing framework
      • Chai (GitHub)

        • BDD or TDD assertion library for Node.js and browsers
      • Sinon (GitHub)

        • Test spies, stubs and mocks
      • testdouble.js (GitHub)

        • A minimal test double library for TDD
      • Doctest (GitHub)

        • Executable usage examples in comments for JavaScript and CoffeeScript

      “Over the wire” test doubles

      npm trends 📈

      • Nock (GitHub)

        • HTTP server mocking and expectations library for Node.js
      • SuperTest (GitHub)

        • HTTP assertions using superagent
      • Mountebank (GitHub)

        • Service virtualization tool with support for mock verification, stubbing with advanced predicates, JavaScript injection, and record-playback through proxying; supports HTTP, TCP and SMTP and can support custom protocols
      • Chai HTTP (GitHub)

        • HTTP integration testing addon for Chai

      Test runners

      npm trends 📈

      • Jest (GitHub)

        • Popular, well-polished test runner; supports TypeScript via @babel/preset-typescript and babel-jest; includes tools for spies, stubs, mocks and assertions
        • Majestic (GitHub)

          • GUI for Jest 
          •   <li>
    <a rel="nofollow noopener" target="_blank" href="https://dkelosky.github.io/jest-stare/"><strong><code>jest-stare</code></strong></a> (GitHub)</p> <ul dir="auto">
      <li>
        Jest HTML reporter
      </li>
    </ul>
  </li>
</ul>
        • Karma (GitHub)

          • Test runner for browsers
        • AVA (GitHub)
        • Wallaby (GitHub)

          • Non-free; integrates test output in the editor
        • Teston (GitHub)

          • Fast test runner similar to tape, but with ES6 module support and simpler subtest syntax

        End-to-end testing focused frameworks

        • TestCafe (GitHub)

          • Automate end-to-end web testing
        • Cypress

          • End-to-end test runner
          • cypress-testing-library (GitHub)

            • Custom Cypress commands and utilities to avoid testing implementation details
        • Nightwatch (GitHub)
        • Puppeteer (GitHub)

          • Library for controlling headless Chrome or Chromium instances
        • Playwright (GitHub)

          • Node library to automate the Chromium, WebKit and Firefox browsers with a single API; made by Microsoft

        React testing

        • Enzyme (GitHub)

          • Assert, manipulate and traverse React components
        • React Testing Library (GitHub)

          • Focused on avoiding testing implementation details

        🐇 Performance

        Benchmarking and profiling

        • Benny (GitHub)

          • Simple benchmark framework
        • Clinic.js (GitHub)

          • Node.js performance profiling suite

        Performance monitoring

        React performance

        📚 Documentation generators

        npm trends 📈

        • Docz (GitHub)

          • Creates live-reloading, seo-friendly, production-ready documentation sites with MDX; based on Gatsby
        • Docusaurus (GitHub)

          • A popular, full-featured documentation generator
        • docsify (GitHub)

          • Simple…


↑