@beskar-labs/harmony

Harmony

Unified, strict editor configuration for modern web apps.

Harmony is a unified, strict editor configuration for modern React apps, designed to work seamlessly together and enforce hyper-strict syntax rules as you type to help you write bulletproof code. By default it supports React and Typescript, but also contains support for Tailwind as well as particular frameworks, such as Next.js and React Native / Expo.

By default, Harmony combines with pre-defined rulesets for ESLint, as well as:

• Import
• jsx-a11y
• React
• React Hooks
• jest
• promise
• n
• Typescript
• Prettier
• Tailwind
• Stylelint
• Stylelint-Prettier
• Next.js
• Cypress

Installation

Run the command below to install Harmony with peer dependencies:

yarn add -D @beskar-labs/harmony eslint prettier stylelint typescript jest

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

code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss
code --install-extension stylelint.vscode-stylelint

Usage

Simply create an eslint.config.mjs that looks like this.

import harmony from '@beskar-labs/harmony';

export default harmony;

Additionally, add the following to your package.json. If you don't use a particular tool (say, Stylelint) then you can simply not include the field.

{
  "prettier": "@beskar-labs/harmony/prettier",
  "stylelint": {
    "extends": "@beskar-labs/harmony/stylelint"
  }
}

Create the following .vscode/settings.json. This will enable full formatting on save.

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "emmet.showExpandedAbbreviation": "never",
  "editor.codeActionsOnSave": {
    "source.fixAll.esbenp.prettier-vscode": true,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.experimental.useFlatConfig": true,
  "eslint.options": {
    "overrideConfigFile": "eslint.config.mjs"
  }
}

Lastly, ensure your tsconfig.json (if it exists) includes your new ESLint config and that strictNullChecks is enabled.

{
  "compilerOptions": {
    "strictNullChecks": true
  },
  "include": ["eslint.config.mjs"]
}

Upgrading from V1

Harmony v2 is a complete rewrite of the original Harmony package. It uses the new ESLint Flat Config, which means that you need a lot less peer dependencies and that you can use the new eslint.config.mjs format. If you're upgrading from v1, you'll need to do the following:

1. Swap out the eslintConfig in your package.json for the new eslint.config.mjs as above.
2. Remove all old peer deps: yarn remove @haydenbleasel/harmony @next/eslint-plugin-next @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-import eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-n eslint-plugin-promise eslint-plugin-react eslint-plugin-react-hooks prettier-plugin-tailwindcss stylelint-prettier
3. Add the new deps: yarn add -D @beskar-labs/harmony eslint prettier stylelint typescript jest cypress
4. Upgrade your .vscode/settings.json file (see above).
5. Ensure your tsconfig.json includes your new ESLint config and that strictNullChecks is enabled.