@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"]
}