Harmony

Unified, strict editor configuration for modern Next.js + Tailwind apps.

Harmony is a unified editor configuration for modern Next.js + Tailwind apps, designed to work seamlessly together and enforce hyper-strict syntax rules as you type to help you write bulletproof code.

github.com/haydenbleasel/harmony

It combines with pre-defined rulesets for ESLint, as well as the Import, jsx-a11y, React, React Hooks and Typescript. It also includes Prettier with the Tailwind plugin, and Stylelint with the Prettier plugin.

Installation

Run the command below to install Harmony:

You'll also need to install peer dependencies, like so:

If you're running VS Code, ensure you have the following extensions installed:

Usage

Simply add these fields to your package.json:

You can also create seperate files if you'd prefer - .eslintrc, stylelint.config.js and .prettierrc. The import syntax will differ so check the respective websites for details. If these files already exist in your repo (or you have similar fields in your package.json), you'll need to delete them first otherwise there will be conflicts.

Lastly, create the following .vscode/settings.json. This will enable full formatting on save.

Projects