htmlacademy/eslint-config-htmlacademy

ESLint rules that uses on all HTML Academy professional courses

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.

eslint-config-htmlacademy's Issues

Add no-unused-vars args: after-used config

Now we can's use snippets like this

[1, 2, 3, 4].filter(function(el, i){
  return i % 2;
});

without lint error, and we must disable eslint or do this hack

[1, 2, 3, 4].filter(function(_el, i){
  return i % 2;
});

I propose add option of no-unused-vars``args: after-used config. I will resolve the problem.

eslint-plugin-import

Запретить многострочную деструктуризацию в import
Добавить eslint-plugin-import было бы не лишним, просто чтобы избегать тупых ошибок.

Разные скобки перед функциями

'space-before-function-paren': ['error', {named: 'never', anonymous: 'always'}],

Почему мы в одном случае просим пробел перед скобками, а в другом нет? Нет единообразия. А единообразие это не только идеология и стилистика, это еще и копипаст. Например, если я написал:

elem.addEventListener('click', function() {}); /* без пробела */

а потом понял что нет, все-таки мне нужно эту функцию поименовать и вынести отдельно:

const elemClickHandler = function () {}; /* с пробелом */
elem.addEventListener('click', elemClickHandler); 

мне нужно не только перенести функцию в новое место, мне еще нужно сделать лишнее движение на постановку пробела.

Неудобненько же? Есть смысл оставить один вариант?

Remove continuation limitations

There is no reason to have special indent for continuation.

Here is not principle difference for this situations:

describe(`Generate JSON command`, function () {
  it(`should fail on not existing folder`, function () {
    const tempFileName = `${__dirname}/folder/testfile.json`;
    return generateCommand.execute(tempFileName).
        then(() => {
          assert.fail(`Path ${tempFileName} should not be available`);
        }).
        catch((e) => assert.ok(e));
  });
};

describe(`Generate JSON command`, function () {
  it(`should fail on not existing folder`, function () {
    const tempFileName = `${__dirname}/folder/testfile.json`;
    return generateCommand.execute(tempFileName).
      then(() => {
        assert.fail(`Path ${tempFileName} should not be available`);
      }).
      catch((e) => assert.ok(e));
  });
};

no-empty в пустом catch

Получаю no-empty ошибку если внутри catch ничего не будет. Пример для теста:

try {
  client.emit('message', JSON.stringify(data));
} catch (ignore) {
  // empty catch
}

Add `no-unused-labels` (ES5)

http://eslint.org/docs/rules/no-unused-labels

Пробелы в деструктуризации и в однострочных объектах между фигурными скобками

Пример:

let obj = { a: 100, b: 200 };
let { a, b } = obj;

Increase `max-nested-callbacks` to 5

Due to callback nature of tests, like mocha it makes really difficult to write tests with limit of 3 nested callbacks.
I think we can increase this limit to 5.

Node.js express `new Router` problem

// eslint-disable-next-line new-cap
const wizardsRouter = express.Router();

Add dot location rule (ES5)

http://eslint.org/docs/rules/dot-location

Add `getter-return` rule

Отбивка пробелами внутри операторных скобок

Отбивка пробелами от круглых скобок внутри if, arrow function и т.п. (http://eslint.org/docs/rules/space-in-parens)

Добавить `max-nested-callbacks` и ограничить числом 5

http://eslint.org/docs/rules/max-nested-callbacks.html

Bump `eslint` to `9.0.0`

Начиная с этой мажорки стилистические правила будут спамить про то, что они deprecated. Поэтому при обновлении надо ещё и @stylistic/eslint-plugin прикрутить.

Кроме того, теперь устаревший конфиг (не flat) подцеплять как-то по-особенному. Я даже разбираться не стал, проще на flat переделать, у которого имя обязательно eslint.config.js.

В общем работы много. Я всё воскресенье потратил. Немного помог их новый инспектор, но только немного — наглядно выявляет депрекейты (чтобы заменить их на плагинные), и дубликаты помогает отловить.

Add `no-prototype-builtins` to ES5

http://eslint.org/docs/rules/no-prototype-builtins

Удалить правило про `CRLF`

Т.к. это делает git автоматически на коммите, то смысла проверять CRLF я не вижу, рул можно смело выкинуть

Проверять неиспользуемые параметры функций

indent

Два пробела везде, при разрыве строки: 4.

Remove `no-undefined` rule

Disable no-undefined since it's obsolete

Add rule "Suggest using const"

I suggest adding a rule to eslint:

rules:
  prefer-const: error

This rule will underline the variable if posible use const instead let.

Add `class-methods-use-this` (ES6)

http://eslint.org/docs/rules/class-methods-use-this

Add `no-useless-call`

http://eslint.org/docs/rules/no-useless-call

no-process-exit

Предлагаю разрешить, но запрещать на уровне ревью кода делать process.exit не в модуле верхнего уровня

http://eslint.org/docs/rules/no-process-exit

Обновить ESlint до 4 версии

http://eslint.org/docs/user-guide/migrating-to-4.0.0

Add `prefer-arrow-callback` (ES6)

https://eslint.org/docs/rules/prefer-arrow-callback

Add `no-empty-pattern` (ES6)

Перейти с Travis на GitHub Actions

Travis теперь платный после N-количества проверок. Пора мигрировать на GitHub Actions, пока мы не стали исчерпывать лимит.

Indent chained call with double indentation

Currently indent for MemberExpression is set to 1.
Set it to 2 by default

trailing commas

eslint-config-htmlacademy/es5.js

Line 117 in 99aad68

'comma-dangle': ['error', 'only-multiline'],

"При создании непустых объектов и массивов не используются «висячие» запятые"

"only-multiline" allows (but does not require) trailing commas when the last element or property is in a different line than the closing ] or } and disallows trailing commas when the last element or property is on the same line as the closing ] or }
https://eslint.org/docs/rules/comma-dangle

ES6 object shorthand

Не регламентировано использование ES6 object shorthand (http://eslint.org/docs/rules/object-shorthand)

Add `getter-return`

http://eslint.org/docs/rules/getter-return

Require default case (ES5)

http://eslint.org/docs/rules/default-case

Проверить группировку правил

Например, правило 'eol-last': 'error' из стилистических, а не ES6, как указано сейчас.

Разрешать шаблонные строки даже если это не шаблон

Разрешить:

const string = `Template string`;

Add `prefer Reflect`

http://eslint.org/docs/rules/prefer-reflect#reflectdeleteproperty

Add max-len rule

max-len

Limit cyclomatic complexity (ES5)

http://eslint.org/docs/rules/complexity

Add dot notation requirement (ES5)

http://eslint.org/docs/rules/dot-notation

Add `no-extra-parens` (ES5)

http://eslint.org/docs/rules/no-extra-parens

Add `no-use-before-define` (ES6)

http://eslint.org/docs/rules/no-use-before-define