eslint-config-htmlacademy

ESLint shareable config for the HTML Academy courses

Installation

npm install --save-dev eslint-config-htmlacademy

Package requires eslint. You must install it manually.

Usage

Once the eslint-config-htmlacademy package is installed, you can use it by specifying htmlacademy in the extends section of your ESLint configuration.

For validating Vanilla JS project use vanilla version:

{
  "parserOptions": {
    "ecmaVersion": 2023,
    "sourceType": "module"
  },
  "env": {
    "es2023": true,
    "browser": true
  },
  "extends": "htmlacademy/vanilla",
  "rules": {
    // Additional rules...
  }
}

For validating React project use react version (htmlacademy/react includes react/recommended):

{
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module"
  },
  "env": {
    "es2017": true,
    "browser": true
  },
  "extends": "htmlacademy/react",
  "rules": {
    // Additional rules...
  }
}

For validating React project with TypeScript use react-typescript version (htmlacademy/react-typescript includes react/recommended, @typescript-eslint/recommended and @typescript-eslint/recommended-requiring-type-checking).

Before using eslint-config-htmlacademy make sure you have TypeScript, @typescript-eslint/parser, @typescript-eslint/eslint-plugin installed:

$ npm i --save-dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "project": [
      "tsconfig.json" // path to your tsconfig file
    ]
  },
  "env": {
    "es2017": true,
    "browser": true
  },
  "extends": "htmlacademy/react-typescript",
  "rules": {
    // Additional rules...
  }
}

Caution! htmlacademy/react and htmlacademy/react-typescript doesn't include react-hooks/rules-of-hooks and react-hooks/exhaustive-deps because in our courses we use CRA (Create React App) which includes these plugins out of box. Install them yourself if necessary.

Caution! If you're wanting to use toBeCalled and similar matches in jest tests, you can use next option for eslintConfig:

"eslintConfig": {
  "overrides": [
    {
      "files": ["*test*"], // regExp to answer the question "How to find your tests?"
      "rules": {
        "@typescript-eslint/unbound-method": "off",
        "jest/unbound-method": "error"
      }
    }
  ]
}

Why this is necessary, you can read on the next page.

For validating Node project use node version (htmlacademy/node includes htmlacademy/vanilla, plugin:@typescript-eslint/recommended and plugin:node/recommended).

Before using eslint-config-htmlacademy make sure you have TypeScript and @typescript-eslint/parser installed:

$ npm i --save-dev typescript @typescript-eslint/parser

Then install the plugin:

$ npm i --save-dev @typescript-eslint/eslint-plugin

{
  "env": {
    "es2021": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module"
  },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": "htmlacademy/node",
  "rules": {
    // Additional rules...
  }
}

Caution!

• htmlacademy/node aimed at using Typescript.
• htmlacademy/node recommends a use of the "engines" field of package.json, because our package includes plugin:node/recomended. The "engines" field is used by node/no-unsupported-features/* rules.
• htmlacademy/node uses ES6 modules and the rules are aimed precisely at this approach of connecting modules.