Skip to content
/ tooling Public

🧰 (Not currently) up-to-date list of JavaScript and TypeScript tooling resources

tooling.js.org/

License

CC0-1.0 license
236 stars 9 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

slikts/tooling

BranchesTags

Repository files navigation

JavaScript and TypeScript tooling overview

GitHub contributors GitHub issues GitHub GitHub stars

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

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
    • Standard (GitHub)
      • A popular ruleset, although the "standard" name is more tongue in cheek
    • typescript-eslint (GitHub)
      • Replacement for the now-deprecated TSLint
    • eslint-config-es (GitHub)
      • ESLint configuration with a focus on strictness; supports TypeScript, React
  • 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
    • eslint-config-prettier (GitHub)
      • Prevents ESLint conflicts with Prettier
    • pretty-quick (GitHub)
      • Skips running Prettier on unchanged files
  • 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)
  • 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
    • jest-stare (GitHub)
      • Jest HTML reporter
  • 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

🐇 Performance

Benchmarking and profiling

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 docs with an option to skip generating static files
  • TypeDoc (GitHub)
    • Generates API documentation from TypeScript
    • typedoc-plugin-markdown (GitHub)
      • Allows using the generated docs with Docusaurus
  • ESDoc (GitHub)
    • JavaScript API documentation generator

☂️ Monorepos

Monorepo managers

npm trends 📈

  • Lerna (GitHub)
    • The most popular solution for managing monorepos
  • Rush (GitHub)
    • Part of the Rush stack by Microsoft
  • Yarn workspaces
    • Can be used alone or in conjunction with Lerna
  • Bolt (GitHub)
    • JavaScript project management based on Yarn
  • oao (GitHub)
    • Yarn-based, opinionated

Other

  • nx (GitHub)
    • Automated (zero-config), extensible dev tool setup for monorepos
  • syncpack (GitHub)
    • Manage multiple package.json files

🚀 Deployment and release tools

npm trends 📈

  • semantic-release (GitHub)
    • Automated version management and package publishing based on semver
  • Shipit (GitHub)
    • Automation engine and a deployment tool; alternative to Capistrano
  • release-it (GitHub)
    • Automated versioning and package publishing
  • Ship.js (GitHub)
  • Conventional Commits
    • A specification for adding human and machine readable meaning to commit messages
  • Standard Version (GitHub)
    • Like semantic-release but without the automatic publishing
  • gh-pages (GitHub)
    • Publish files to a gh-pages branch on GitHub (or any other branch)
    • Tutorial about using gh-pages with CRA
  • publish-please (GitHub)
    • Replacement for npm publish

🚩 TypeScript

  • GraphQL Code Generator (GitHub)
    • Generate TypeScript types from GraphQL schema; invaluable for large projects
    • graphql-let (GitHub)
  • tsd (GitHub)
    • Check TypeScript type definitions with assertions
    • A recent alternative is @ts-expect-error
  • AssemblyScript (GitHub)
    • Compile TypeScript to WASM
  • ts-jest (GitHub)
    • TypeScript preprocessor with sourcemap support for Jest
  • gts (GitHub)
    • Google TypeScript Style; zero-configuration formatting, linting and code fixing
  • tsc-watch (GitHub)
    • nodemon for TypeScript
  • Tsearch (GitHub)
    • Search functions in different packages by their type signature
  • dts-bundle-generator (GitHub)
    • Tool to generate a single bundle of dts

Documentation

  • TSDoc (GitHub)
    • A documentation comment standard
  • API Extractor (GitHub)
    • Analysis tool that can extract API reports for an API review workflow, bundle multiple declaration files into one, and extract a documentation model and generate an API reference website from it
  • See also: TypeDoc

Rollup plugins

npm trends 📈

Useful for generating library type definitions; can be replaced with tsc for applications.

  • @wessberg/rollup-plugin-ts (GitHub)
    • A more modern but slightly less mature alternative to rollup-plugin-typescript2
  • rollup-plugin-typescript2 (GitHub)

📦 Package management

Package managers

npm trends 📈

Package search, vetting

Git hook managers

npm trends 📈

Desktop packaging

Executables

Other

  • patch-package (GitHub)
    • Fix issues with packages without having to fork them or waiting
  • npm-package-scripts (nps) (GitHub)
    • A specialized tool for having complex npm scripts
  • bundlesize (GitHub)
    • Set configurable bundle size limits
  • Size Limit (GitHub)
    • Performance budget tool
  • Depcheck (GitHub)
    • Check npm packages for unused dependencies
  • why-npm-i-so-long (GitHub)
  • Package Phobia (GitHub)
  • nrm (GitHub)
    • npm registry manager; fast switch between different registries
  • Open-Registry
    • Community-funded mirror of the npm registry
  • Dependency cruiser (GitHub)
    • Validate and visualize dependencies

💡 Create React App

npm trends 📈

Create React App purposely limits its configurability to be able to give developer guarantees, but there are advanced use cases that require configuration while still avoiding "ejecting" from Create React App.

🎨 Design systems and prototyping

npm trends 📈

Tools for developing and testing components and for creating style guides and reusable collections of components.

❌ Cross-platform

  • cross-env (GitHub)
    • Set and use environment variables across platforms
  • shx (GitHub)
    • Unix-like shell commands

🗿 GraphQL

  • eslint-plugin-graphql (GitHub)
    • ESLint plugin to validate GraphQL query strings against a schema

✔ Static type checkers

🚧 Unvetted or uncategorized

TypeScript

  • node-typescript-boilerplate (GitHub)
  • ttypescript (GitHub)
    • Wraps tsc to enable transforming the compiled code
  • TypeScript Node Starter (GitHub)
    • Microsoft's end-to-end project setup for Node.js using TypeScript

webpack plugins

React

Package management

  • reg (GitHub)
    • Experimental package manager for native ES modules
  • Yarn deduplicate (GitHub)
    • Deduplication tool for yarn.lock files

GraphQL

React

  • jest-react-profiler (GitHub)
    • Jest helpers for working with the React Profiler API

Linting

WebExtensions

  • web-extension-starter (GitHub)
  • Chrome Extension CLI (GitHub)
  • Chrome Extension Boilerplate (GitHub)
  • Web Store Upload CLI (GitHub)

Extension testing

Other

💀 Legacy or not recommended tools

Listed separately to avoid confusion.

🙈 See also

Outdated resources

About

🧰 (Not currently) up-to-date list of JavaScript and TypeScript tooling resources

tooling.js.org/

Topics

react javascript devops boilerplate awesome typescript stack continuous-integration tooling scaffold cicd build-tools bundlers zero-config infradev

Resources

Readme

License

CC0-1.0 license
Activity

Stars

236 stars

Watchers

8 watching

Forks

9 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 7

Languages