Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Remove warnings on installation #229

Merged
merged 1 commit into from
Aug 20, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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