This package has been deprecated

    Author message:

    This package has been moved to @beskar-labs/harmony


    1.1.9 • 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:

    yarn add -D @haydenbleasel/harmony

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

    yarn add -D \
    eslint \
    eslint-plugin-import \
    eslint-plugin-jsx-a11y \
    eslint-plugin-react \
    eslint-plugin-react-hooks \
    eslint-plugin-jest \
    eslint-plugin-promise \
    eslint-plugin-n \
    @typescript-eslint/eslint-plugin \
    @typescript-eslint/parser \
    prettier \
    prettier-plugin-tailwindcss \
    stylelint \
    stylelint-prettier \
    typescript \

    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 add the fields below to your package.json. If you don't use a particular tool (say, Stylelint) then you can simply not include the field.

      "eslintConfig": {
        "extends": "./node_modules/@haydenbleasel/harmony/eslint.js",
        "parserOptions": {
          "project": "./tsconfig.json"
      "prettier": "@haydenbleasel/harmony/prettier",
      "stylelint": {
        "extends": "@haydenbleasel/harmony/stylelint"

    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.

      "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"

    Framework-Specific Configuration


    You can use Next.js-specific config (incl. Core Web Vitals support) by adding the plugin...

    yarn add -D @next/eslint-plugin-next

    Then updating your ESLint config to import like so...

      "eslintConfig": {
        "extends": "./node_modules/@haydenbleasel/harmony/eslint-next.js",
        "parserOptions": {
          "project": "./tsconfig.json"

    React Native / Expo

    You can use React-Native-specific config by adding the plugin...

    yarn add -D eslint-plugin-react-native

    Then updating your ESLint config to import like so...

      "eslintConfig": {
        "extends": "./node_modules/@haydenbleasel/harmony/eslint-expo.js",
        "parserOptions": {
          "project": "./tsconfig.json"


    npm i @haydenbleasel/harmony

    DownloadsWeekly Downloads






    Unpacked Size

    60.5 kB

    Total Files


    Last publish


    • crudbucket