README.md

eslint-config-eko

Defines set of Amity ESLint rules based on Airbnb eslint rules extended by Prettier plugin.

The package provides 2 sets of rules:

• eko - eslint, import rules
• eko/react - eko + react, react-hook, jsx-a11y rules

Installation:

Step 1. Mandatory. Copy this configuration to your .prettierrc file:

{
  "tabWidth": 2,
  "printWidth": 100,
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "all",
  "quoteProps": "as-needed",
  "arrowParens": "avoid",
  "embeddedLanguageFormatting": "auto"
}

Make sure that you do not change configuration or you will run in a bunch of conflicts between Prettier and ESLint.

Step 2. Mandatory. To apply base set of rules.

npm@6

npx install-peerdeps --dev [email protected] --extra-args "--save-exact"

npm@7

npm install --save-dev --save-exact --save-peer  [email protected]

Step 3. Optional. To apply react extended set of rules

npm install --save-dev --save-exact [email protected] [email protected] [email protected] [email protected]

Step 4. In .eslintrc.json extend eko configuration:

Only base set of rules

"extends": ["eko"]

Base + React set of rules

"extends": ["eko/react"]

Step 5. If required. To properly support eslint-plugin-import please check resolvers docs.

(Recommended) Setup project for auto-linting on commit:

npm i --save-dev husky lint-staged

In package.json:

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "linters": {
      "*.{js,jsx}": [
        "eslint --fix",
        "git add --force"
      ],
      "*.{json,md}": [
        "prettier --write",
        "git add --force"
      ]
    }
  },

Hints

Track performance of individual rules

In case you encounter slow eslint execution on your project try to use ESLint built-in CLI method to track performance of individual rules.

TIMING=1 eslint lib

Root path synonym and import/no-unresolved

If you want to use root synonyms like:

// from
import Example from '../../../some/example.js';

// to
import Example from '~/some/example.js';

Option 1

Install eslint-import-resolver-webpack

npm install --save-dev eslint-import-resolver-webpack

Add this to your webpack configuration:

resolve: {
  alias: {
    // pattern
    '~': '<full_path_to_project_folder>',
    // example 1
    '~': path.resolve(process.cwd(), '<project_folder>'),
    // example 2
    '~': path.resolve(__dirname, '<project_folder>'),
  },
},

Add this to your eslint configuration:

// For more options check https://www.npmjs.com/package/eslint-import-resolver-webpack
settings: {
  'import/resolver': {
    webpack: {
      config: '<path_to_webpack',
    },
  },
},

Option 2 (deprecated)

Run:

npm i --save-dev babel-plugin-root-import eslint-import-resolver-babel-plugin-root-import

Add to .babelrc:

"plugins": [
  [
    "babel-plugin-root-import",
    {
      "rootPathPrefix": "~",
      "rootPathSuffix": "app"
    }
  ]
]

Add to .eslintrc:

  "settings": {
    "import/resolver": "babel-plugin-root-import"
  },

Thumb ups rules of editing this package subset:

• Make sure that this is not disabled by eslint-config-prettier. If you re-enable it then prettier and eslint might run into conflict.
• Provide reference to documentation.
• Provide Airbnb declaration (and they reasoning).
• Provide explanation why the decision to alter a rule was made.

CHANGELOG