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 includesplugin:node/recomended
. The "engines" field is used bynode/no-unsupported-features/*
rules. -
htmlacademy/node
uses ES6 modules and the rules are aimed precisely at this approach of connecting modules.