npm package: @lub0v/eslint-config
Description: TypeScript Eslint config
Latest version: 0.0.2

# eslint-config

Shared eslint configuration for typescript projects.

Uses airbnb style as the base one.

### Install

Install the config and all it's peer dependencies:

```
yarn add --dev @lub0v/eslint-config eslint typescript prettier eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-jest eslint-config-prettier eslint-plugin-prettier eslint-plugin-import
```

You may see thees warnings:

```
warning "eslint-config-airbnb-typescript > eslint-config-airbnb@18.2.0" has unmet peer dependency "eslint-plugin-jsx-a11y@^6.3.0".
warning "eslint-config-airbnb-typescript > eslint-config-airbnb@18.2.0" has unmet peer dependency "eslint-plugin-react@^7.20.0".
warning "eslint-config-airbnb-typescript > eslint-config-airbnb@18.2.0" has unmet peer dependency "eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0".
```

That's a [known issue](https://github.com/iamturns/eslint-config-airbnb-typescript/issues/6) and you can safely ignore them.

### Setup

add `.eslintrc.js` to the root of your project with the next contents:

```
module.exports = {
  extends: ['@lub0v/eslint-config'],
  parserOptions: {
    project: 'tsconfig.json',
  },
};
```

<details> <summary>Copy paste command</summary>

```
cat <<EOT > .eslintrc.js
module.exports = {
  extends: ['@lub0v/eslint-config'],
  parserOptions: {
    project: 'tsconfig.json',
  },
};
EOT
```

</details>

notice that it needs `tsconfig.json` to be present for the parser.

Add `.prettierrc.js` to the root of your project with the next contents:

```
module.exports = {
  ...require('@lub0v/eslint-config/prettierrc'),
};
```

<details> <summary>Copy paste command</summary>

```
cat <<EOT > .prettierrc.js
module.exports = {
  ...require('@lub0v/eslint-config/prettierrc'),
};
EOT
```

</details>

### Scripts

if not already present, add next scripts to the package.json:

```
"format": "prettier --write '**/(*.ts)'",
"lint": "eslint --fix --no-error-on-unmatched-pattern {index,src/,__tests__/}{*,**/*}.ts",
```

\*\* make sure to have proper paths in the `lint` script

### Run

From now on, you should be able to run `yarn lint` and `yarn format` to run eslint scan/fix on files and format them with prettier.

### Integrate with Webstorm / Intellij IDEA

##### Install `Prettier` plugin

To do that, go to `Preferences -> Plugins`, search for Prettier and install it.

##### Setup prettier plugin to execute on code format & on save

For WebStorm version 2020.+
Go to `Preferences`, search for `Prettier`, or go to `Languages & Frameworks -> Javascript -> Prettier`:

- make sure to update the `Prettier package` path to use the node_modules prettier
- select the checkboxes to `on code format` and `on save`.

##### Setup eslint plugin to run `--fix` on save

Go to `Preferences`, search for `Eslint`, or go to `Languages & Frameworks -> Javascript -> Code Quality Tools -> Eslint` and select the checkbox for `Run eslint --fix on save`;

Note that you might need to provide eslint package manually (select the one from installed node_modules).

### Integrate with Visual Studio Code

##### Install `Prettier` plugin

[Install Prettier as VS Code extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

##### Setup prettier plugin to execute on code format & on save

Within the `Code > Preferences > Settings` menu, search for `Format On Save` and make sure to activate it. Afterward, the file should format automatically once you save it.

##### Install `ESLint` plugin

[Install ESLint as VS Code extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

##### Setup eslint plugin to run `--fix` on save

Within the `Code > Preferences > Settings` menu, search for `Code Actions on Save`. The first option will say Editor: Code Actions on Save and below that, there will be an option to `Edit in settings.json`. Click the link to Edit in `settings.json`.
For ESLint to fix errors when you save your file, you will need to write the following code in `settings.json`:

```
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"eslint.validate": ["typescript", "json", "javascript"]
```