Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kenneth-sills/eslint-config-airbnb-typescript
Airbnb's ESLint config with TypeScript support
https://github.com/kenneth-sills/eslint-config-airbnb-typescript
airbnb config eslint typescript
Last synced: 3 months ago
JSON representation
Airbnb's ESLint config with TypeScript support
- Host: GitHub
- URL: https://github.com/kenneth-sills/eslint-config-airbnb-typescript
- Owner: Kenneth-Sills
- License: mit
- Created: 2024-08-25T19:05:57.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-16T22:23:33.000Z (4 months ago)
- Last Synced: 2024-10-15T17:44:01.484Z (3 months ago)
- Topics: airbnb, config, eslint, typescript
- Language: JavaScript
- Homepage:
- Size: 977 KB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Typescript Compatible Airbnb Rules for ESLint
[](https://github.com/semantic-release/semantic-release) [](https://www.npmjs.com/package/@kesills/eslint-config-airbnb-typescript?activeTab=versions) [](https://www.npmjs.com/package/@kesills/eslint-config-airbnb-typescript)
Enhances [Airbnb's ESLint config](https://www.npmjs.com/package/eslint-config-airbnb) with TypeScript support.
Forked from the generous work of [Matt Turnbull](https://github.com/iamturns/eslint-config-airbnb-typescript)!
> [!WARNING]
> We currently **do not** support ESLint v9 or above. Please see issue #15 to track progress.
## Setup
### Installation
Start by installing both ESLint and Typescript in your project. Afterwards, you can install this config through your favorite package manager normally:
```sh
npm install -D @kesills/eslint-config-airbnb-typescript
```
If you're using React, you'll also need to install the appropriate Airbnb rules separately:
```sh
npm install -D eslint-config-airbnb
```
> [!NOTE]
> While current versions of NPM will automatically install peer dependencies, if you're using a version of NPM prior to v7, you will need to install them manually instead:
>
> ```sh
> npm install -D \
> eslint@^8.56 \
> eslint-config-airbnb-base \
> @stylistic/eslint-plugin \
> @typescript-eslint/eslint-plugin@^8 \
> @typescript-eslint/parser@^8
> ```
### Configuration
Next, tell ESLint to extend from this configuration. And since we need to access type information, a `tsconfig.json` and some setup for [`@typescript-eslint/parser`](https://typescript-eslint.io/packages/parser/) to recognize it are required.
> [!IMPORTANT]
> These instructions assume you are on the current LTS version of Node. If you are using a Node version older than v20, you will need to update any references to `import.meta.dirname` to use [a `__dirname` workaround](https://github.com/iamturns/eslint-config-airbnb-typescript/issues/307#issuecomment-2153373493) instead.
#### Recommended - Flat Config
Since we don't yet have first-class support for the new flat configuration format (see #14 for progress), [ESLint's compatability utility](https://www.npmjs.com/package/@eslint/eslintrc) is needed:
```sh
npm install -D @eslint/eslintrc
```
Then you'll want to set up your `eslint.config.js` something like this:
```js
import { FlatCompat } from '@eslint/eslintrc';
const compat = new FlatCompat({
baseDirectory: import.meta.dirname,
});
export default [
// Without React
...compat.extends('airbnb-base'),
...compat.extends('@kesills/airbnb-typescript/base'),
// With React
...compat.extends('airbnb'),
...compat.extends('@kesills/airbnb-typescript'),
// Either way
{
languageOptions: {
parserOptions: {
projectService: true,
tsconfigRootDir: import.meta.dirname,
},
},
},
];
```
#### Legacy Config
If you're stuck on the legacy `.eslintrc` format, you'll want to set up your `.eslintrc.js` similar to this:
```js
module.exports = {
extends: [
// Without React
'airbnb-base',
'@kesills/airbnb-typescript/base'
// With React
'airbnb',
'@kesills/airbnb-typescript'
],
parserOptions: {
projectService: true,
tsconfigRootDir: import.meta.dirname,
},
};
```
### Running ESLint
Once set up, you can use ESLint as you would normally. In the root directory of your project, run:
```sh
npx eslint . --ext .js,.jsx,.ts,.tsx
```
ESLint will lint all .js, .jsx, .ts, and .tsx files within the current folder, and output results to your terminal.
You can also get results in realtime inside most IDEs via a plugin. See [ESLint's integration documentation](https://eslint.org/docs/latest/use/integrations) for more details.
## FAQ
### 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.
Please refer to the [`typescript-eslint`](https://typescript-eslint.io/troubleshooting/typed-linting#traditional-project-issues) FAQ on how best to resolve this.
### I wish this config would support [...]
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
import typescriptPlugin from 'typescript-eslint';
// ...
export default [
...compat.extends('airbnb-base'),
...compat.extends('airbnb/hooks'),
...compat.extends('@kesills/airbnb-typescript/base'),
...typescriptPlugin.configs.recommendedTypeChecked,
...typescriptPlugin.configs.stylisticTypeChecked,
{
languageOptions: {
parserOptions: {
projectService: true,
tsconfigRootDir: import.meta.dirname,
},
},
},
];
```
### I use Prettier / StandardJS, how do I remove formatting rules?
There are a couple of approaches to achieve this.
#### Configuration
Since the base Airbnb configs still use ESLint's legacy formatting rules, you can extend [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) to disable them. However, with ESLint [deprecating all formatting rules](https://eslint.org/blog/2023/10/deprecating-formatting-rules/) and [`typescript-eslint` outright removing them](https://typescript-eslint.io/users/what-about-formatting/), all our styling rules now originate from [ESLint Stylistic](https://eslint.style), which is not supported by the Prettier config (see upstream issue [#283](https://github.com/prettier/eslint-config-prettier/issues/283) to track progress).
Therefore, you'll need to disable all these rules manually. Luckily, this is pretty easy with flat configurations:
```js
import stylistic from '@stylistic/eslint-plugin';
export default [
// ...
{
rules: Object.fromEntries(
Object.keys(stylisticPlugin.configs['all-flat'].rules ?? {}).map((key) => [key, 'off']),
),
},
];
```
#### Combined Tooling
Another approach is to use [`prettier-eslint`](https://github.com/prettier/prettier-eslint), which keeps the styling rules enabled and just combines the execution of ESLint and Prettier so the conflicts aren't user-facing. The CLI tool itself can be found under [`prettier-eslint-cli`](https://github.com/prettier/prettier-eslint-cli).
### Why is `import/no-unresolved` disabled?
Two reasons:
1. It requires additional configuration, which may be different for monorepo's, webpack usage, etc
2. The rule offers little value in a TypeScript world, as the TypeScript compiler will catch these errors
If you would like to enable this rule, then:
- Enable the rule within your config: `'import/no-unresolved': 'error'`
- Install and configure the TypeScript import resolver: [eslint-import-resolver-typescript](https://www.npmjs.com/package/eslint-import-resolver-typescript)
## Credits
Originally authored by Matt Turnbull. Forked and maintained by Kenneth Sills.
A big thank you to all [contributors](https://github.com/Kenneth-Sills/eslint-config-airbnb-typescript/graphs/contributors)!