Skip to content

Commit

Permalink
fix: Remove warnings on installation
Browse files Browse the repository at this point in the history
BREAKING CHANGE: Install `eslint-config-airbnb` (or `eslint-config-airbnb-base`) and `@typescript-eslint/parser` as dependencies. Follow the updated README.md file.
  • Loading branch information
iamturns committed Aug 20, 2021
1 parent f065373 commit f2733b4
Show file tree
Hide file tree
Showing 7 changed files with 41 additions and 52 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
extends: ['./base.js', 'prettier'],
extends: ['eslint-config-airbnb-base', './base.js', 'prettier'],
parserOptions: {
project: './tsconfig.json',
},
Expand Down
71 changes: 31 additions & 40 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,41 @@

[![Version](https://img.shields.io/npm/v/eslint-config-airbnb-typescript.svg?style=flat-square)](https://www.npmjs.com/package/eslint-config-airbnb-typescript?activeTab=versions) [![Downloads](https://img.shields.io/npm/dt/eslint-config-airbnb-typescript.svg?style=flat-square)](https://www.npmjs.com/package/eslint-config-airbnb-typescript) [![Last commit](https://img.shields.io/github/last-commit/iamturns/eslint-config-airbnb-typescript.svg?style=flat-square)](https://github.com/iamturns/eslint-config-airbnb-typescript/graphs/commit-activity) [![Build](https://img.shields.io/circleci/project/github/iamturns/eslint-config-airbnb-typescript/master.svg?style=flat-square)](https://circleci.com/gh/iamturns/eslint-config-airbnb-typescript) [![License](https://img.shields.io/github/license/iamturns/eslint-config-airbnb-typescript.svg?style=flat-square)](https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/CONTRIBUTING.md) [![Code of conduct](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)](https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/CODE_OF_CONDUCT.md)

Airbnb's ESLint config with TypeScript support
Enhances Airbnb's ESLint config with TypeScript support

## Setup

### 1) Install
### 1) Setup regular Airbnb config

```
npm install eslint-config-airbnb-typescript --save-dev
```

### 2) Install ESLint plugins
Make sure you have the regular Airbnb config setup. See [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb), or [eslint-config-airbnb-base](https://www.npmjs.com/package/eslint-config-airbnb-base) if you're not using React.

ESLint plugins used by this config must also be installed within your project. This is a limitation within ESLint (see [RFC](https://github.com/eslint/rfcs/tree/master/designs/2019-config-simplification) and [progress](https://github.com/eslint/eslint/issues/13481)).
### 2) Install this config (and peer dependencies)

```bash
npm install eslint-plugin-import@^2.22.0 \
eslint-plugin-jsx-a11y@^6.3.1 \
eslint-plugin-react@^7.20.3 \
eslint-plugin-react-hooks@^4.0.8 \
@typescript-eslint/eslint-plugin@^4.4.1 \
--save-dev
```

If you don't need React support:

```bash
npm install eslint-plugin-import@^2.22.0 \
@typescript-eslint/eslint-plugin@^4.4.1 \
npm install eslint-config-airbnb-typescript \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
--save-dev
```

### 3) Configure ESLint

Add `"extends": "airbnb-typescript"` to your ESLint config file.
Within your ESLint config file:

If you don't need React support, add `"extends": "airbnb-typescript/base"` instead.
```diff
extends: [
'airbnb',
+ 'airbnb-typescript'
]
```

An example `.eslintrc.js`:
If you don't need React support:

```js
module.exports = {
extends: ['airbnb-typescript'],
};
```diff
extends: [
'airbnb-base',
+ 'airbnb-typescript/base'
]
```

### 4) Configure the ESLint TypeScript parser
Expand All @@ -56,12 +48,12 @@ In your ESLint config, set [parserOptions.project](https://github.com/typescript
For example:

```diff
module.exports = {
extends: ['airbnb-typescript'],
+ parserOptions: {
+ project: './tsconfig.json',
{
extends: ['airbnb', 'airbnb-typescript'],
+ parserOptions: {
+ project: './tsconfig.json'
+ }
};
}
```

### 5) Run ESLint
Expand All @@ -78,10 +70,6 @@ You can also get results in realtime inside most IDEs via a plugin.

## FAQ

### Does this work with JavaScript files too?

Yep! This config is a drop-in replacement for `eslint-config-airbnb`, decorating it with TypeScript support.

### I get this error when running ESLint: "The file must be included in at least one of the projects provided"

This means you are attempting to lint a file that `tsconfig.json` doesn't include.
Expand All @@ -104,17 +92,20 @@ parserOptions: {
}
```

### I get peer dependency warnings for ESLint React plugins, but I'm using `airbnb-typescript/base`
### Why do I need the peer dependencies?

`@typescript-eslint/eslint-plugin` is a peer dependency because of a limitation within ESLint. See [issue](https://github.com/eslint/eslint/issues/3458), [RFC](https://github.com/eslint/rfcs/tree/master/designs/2019-config-simplification), and [progress](https://github.com/eslint/eslint/issues/13481).

This is a known problem. Some suggestions exist in this [GitHub issue](https://github.com/iamturns/eslint-config-airbnb-typescript/issues/6).
`@typescript-eslint/parser` is a peer dependency because the version number must match `@typescript-eslint/eslint-plugin`.

### I wish this config would support [...]

The goal of `eslint-config-airbnb-typescript` is to simply decorate `eslint-config-airbnb` with TypeScript support. It's not a single config to cater for all TypeScript linting requirements. For additional functionality, alter your ESLint config file. For example:
This config simply enhances the Airbnb with TypeScript support. It's not a single config to cater for all TypeScript linting requirements. For additional functionality, alter your ESLint config file. For example:

```js
module.exports = {
extends: [
'airbnb',
'airbnb-typescript',
'airbnb/hooks',
'plugin:@typescript-eslint/recommended',
Expand Down
2 changes: 1 addition & 1 deletion base.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
module.exports = {
extends: ['eslint-config-airbnb-base', './lib/shared.js'].map(require.resolve),
extends: ['./lib/shared.js'].map(require.resolve),
};
2 changes: 1 addition & 1 deletion index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// This file adds some React specific settings. Not using React? Use base.js instead.
module.exports = {
extends: ['eslint-config-airbnb', './lib/shared'].map(require.resolve),
extends: ['./lib/shared'].map(require.resolve),
settings: {
// Append 'ts' extensions to Airbnb 'import/resolver' setting
'import/resolver': {
Expand Down
2 changes: 2 additions & 0 deletions lib/shared.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
/* eslint-disable import/no-extraneous-dependencies */
const { rules: baseBestPracticesRules } = require('eslint-config-airbnb-base/rules/best-practices');
const { rules: baseErrorsRules } = require('eslint-config-airbnb-base/rules/errors');
const { rules: baseES6Rules } = require('eslint-config-airbnb-base/rules/es6');
const { rules: baseImportsRules } = require('eslint-config-airbnb-base/rules/imports');
const { rules: baseStyleRules } = require('eslint-config-airbnb-base/rules/style');
const { rules: baseVariablesRules } = require('eslint-config-airbnb-base/rules/variables');
/* eslint-enable import/no-extraneous-dependencies */

module.exports = {
plugins: ['@typescript-eslint'],
Expand Down
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@
"lint": "eslint ./",
"validate": "npm run lint"
},
"dependencies": {
"@typescript-eslint/parser": "^4.4.1",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-airbnb-base": "^14.2.0"
"peerDependencies": {
"@typescript-eslint/eslint-plugin": "^4.4.1",
"@typescript-eslint/parser": "^4.4.1"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "4.14.2",
"doctoc": "2.0.1",
"eslint": "7.32.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-import": "2.24.1",
"husky": "4.3.8",
Expand Down
6 changes: 1 addition & 5 deletions renovate.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,7 @@
"extends": ["config:base"],
"packageRules": [
{
"packageNames": [
"@typescript-eslint/parser",
"eslint-config-airbnb",
"eslint-config-airbnb-base"
],
"packageNames": ["@typescript-eslint/eslint-plugin", "@typescript-eslint/parser"],
"rangeStrategy": "replace"
}
]
Expand Down

0 comments on commit f2733b4

Please sign in to comment.