2.0.10 • Public • Published


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:


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


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.

Also, as of writing this README, you need to be on the pre-release version of the ESLint extension for VSCode.


I'm getting a weird error: TypeError: Key "languageOptions": Key "globals": Global "AudioWorkletGlobalScope " has leading or trailing whitespace.

Here's a workaround eslint.config.mjs:

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

harmony[0].languageOptions.globals.AudioWorkletGlobalScope =
  harmony[0].languageOptions.globals['AudioWorkletGlobalScope '];

delete harmony[0].languageOptions.globals['AudioWorkletGlobalScope '];

export default harmony;
Tip: Click on a version number to view a previous version's package page

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 2.0.10
    • latest

Version History


npm i @beskar-labs/harmony

DownloadsWeekly Downloads






Unpacked Size

66.1 kB

Total Files


Last publish


  • haydenbleasel