This package has been deprecated

    Author message:

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

    @haydenbleasel/harmony

    1.1.9 • Public • Published

    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:

    Installation

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

    Next.js

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

    Install

    npm i @haydenbleasel/harmony

    DownloadsWeekly Downloads

    47

    Version

    1.1.9

    License

    ISC

    Unpacked Size

    60.5 kB

    Total Files

    15

    Last publish

    Collaborators

    • crudbucket