DEV Community

Cover image for ESMate: An Anti-Fatigue Toolkit for JavaScript/TypeScript Development
Vien Dinh
Vien Dinh

Posted on

ESMate: An Anti-Fatigue Toolkit for JavaScript/TypeScript Development

#eslint #prettier #node #react

Starting a new JavaScript or TypeScript project often feels like a battle against configuration. Before you write a single line of business logic, you're usually stuck setting up ESLint, Prettier, TypeScript, Tailwind CSS, and testing tools. It's a repetitive, draining ritual.

ESMate answers a simple question: "How do we make modern JavaScript development smooth and easy, even in the Node.js world?"

Inspired by the developer experience of Deno, ESMate provides a suite of tools and packages designed to simplify the modern web development workflow. It’s not a new runtime, but a helper layer that makes living in the Node.js ecosystem much more pleasant.

Here is a tour of the ESMate ecosystem and how it can supercharge your development.

The Core Tools

1. esmate (CLI)

The esmate CLI is the heart of the toolkit. It unifies common tasks into a single, cohesive interface.

  • Lint & Format: Wraps ESLint and Prettier with zero-config defaults.
    • esmate lint / esmate fmt: Check and auto-fix your code.
  • Task Runner: A powerful task runner compatible with npm scripts but enhanced. Supports both sequential and parallel execution defined right in your package.json. 
npm install -D esmate
Enter fullscreen mode Exit fullscreen mode

2. create-esmate

Forget copying and pasting old config files. create-esmate is a scaffolding tool that sets up modern apps instantly. It supports React, Vue, Solid, Svelte, Astro, and Next.js out of the box.

npm create esmate@latest
Enter fullscreen mode Exit fullscreen mode

You can also choose from robust templates like:

  • react-spa: React + TanStack Router
  • react-astro: React + Astro + TanStack
  • react-next: React + Next.js + Drizzle + Stripe

The Packages

ESMate also provides a collection of packages that you can use individually or together.

@esmate/utils

A comprehensive utility belt. It re-exports and unifies:

  • es-toolkit: Modern, high-performance LODASH replacement.
  • math.js: For complex math operations.
  • String tools: Advanced string manipulation (title casing, typo fixing).

@esmate/react

React development made easier.

  • Hooks: Includes the full power of ahooks (useRequest, usePagination).
  • Custom Hooks: specialized hooks like useImmutableState (powered by Immer) and useSearchParams.

@esmate/shadcn

If you use shadcn/ui, you'll love this. It bundles shadcn components, hooks, and styles into a single installable package.

  • Zero Config: Works with Tailwind automatically.
  • Pre-built UI: Import components like import { Button } from "@esmate/shadcn/components/ui/button".
  • Bundled Deps: No need to manually install zod, react-hook-form, or radix-ui primitives—they are all re-exported.

@esmate/eslint & @esmate/prettier

Opinionated but configurable setups "for humans".

  • @esmate/eslint: A wrapper around @antfu/eslint-config tuned for React, Vue, Astro, and Svelte.
  • @esmate/prettier: Includes the Tailwind CSS plugin and sensible defaults.

Why Switch?

We believe developers should spend their time building, not configuring. ESMate lets you skip the boilerplate ritual and get straight to the work that matters.

Give it a try today: https://github.com/VienDinhCom/esmate

Top comments (0)