eslint-config-airbnb-extended 2.2.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -178
- package/dist/plugins/typescriptEslintPlugin.js +1 -1
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -4,182 +4,6 @@
|
|
|
4
4
|
[](https://www.npmjs.com/package/eslint-config-airbnb-extended)
|
|
5
5
|
[](https://www.npmjs.com/package/eslint-config-airbnb-extended)
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
> This package is designed exclusively for **flat configuration**. Legacy `.eslintrc*` files are not supported. For that, please use older packages. For more details, refer to the [Note](https://github.com/NishargShah/eslint-config-airbnb-extended?tab=readme-ov-file#note).
|
|
7
|
+
This package extends the official Airbnb ESLint configuration to fully support TypeScript, allowing you to enforce consistent coding standards across both JavaScript and TypeScript files.
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
### Automate the setup with `create-airbnb-x-config`
|
|
13
|
-
|
|
14
|
-
```bash
|
|
15
|
-
# Inside your project directory
|
|
16
|
-
npx create-airbnb-x-config
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
To learn more about the configuration options available for `create-airbnb-x-config`, check out the [README.md](https://github.com/NishargShah/eslint-config-airbnb-extended/tree/master/packages/create-airbnb-x-config#create-airbnb-x-config).
|
|
20
|
-
|
|
21
|
-
### Steps
|
|
22
|
-
|
|
23
|
-
First, you need to decide whether you want to use the `legacy` config or the `extended` config. If you're not sure about the difference between the two, you can refer to the [Extended vs Legacy Config](https://github.com/NishargShah/eslint-config-airbnb-extended/tree/master/packages/eslint-config-airbnb-extended#difference-between-extended-vs-legacy-config) for a brief explanation. For more information specifically about the Legacy config, check out the [Legacy Config](https://github.com/NishargShah/eslint-config-airbnb-extended/tree/master/packages/eslint-config-airbnb-extended#legacy-config). If you decide to use the Extended config, you can proceed with the steps below. Otherwise, feel free to switch to the Legacy config if that better fits your requirements.
|
|
24
|
-
|
|
25
|
-
Once you've completed the selection steps in `create-airbnb-x-config`, you'll be prompted to choose whether or not to **install dependencies** based on your preferences:
|
|
26
|
-
|
|
27
|
-
- If you choose **to install**, the tool will automatically detect your project's package manager and install all required dependencies for you.
|
|
28
|
-
- If you choose **not to install**, you'll receive the appropriate commands to install the dependencies manually.
|
|
29
|
-
|
|
30
|
-
After that, you'll be asked whether you want the tool to **generate an `eslint.config.mjs` file** for you:
|
|
31
|
-
|
|
32
|
-
- If you agree, the file will be created automatically.
|
|
33
|
-
- If not, you’ll need to create the file yourself.
|
|
34
|
-
|
|
35
|
-
At the end of the process, you’ll be given a **GitHub URL** containing your ESLint configuration template. If you chose **not** to auto-generate the config file, simply visit the URL, copy the template, and paste it into your `eslint.config.mjs` file. The content of the template will reflect the options you selected earlier.
|
|
36
|
-
|
|
37
|
-
### Manual Installation (Not Recommended)
|
|
38
|
-
|
|
39
|
-
While **manual installation** is possible, we strongly recommend using `create-airbnb-x-config` for automatic updates and ease of use.
|
|
40
|
-
|
|
41
|
-
The configuration may change over time, and `create-airbnb-x-config` will always stay up-to-date with the latest versions. If you're confident in handling manual installations, refer to the [Packages Used](https://github.com/NishargShah/eslint-config-airbnb-extended/tree/master/packages/eslint-config-airbnb-extended#packages-used) section for more information on the individual packages.
|
|
42
|
-
|
|
43
|
-
## Legacy Config
|
|
44
|
-
|
|
45
|
-
Many people are currently using Airbnb's ESLint configs, like `eslint-config-airbnb`, and they want a way to switch or upgrade without making any changes to their existing config setup.
|
|
46
|
-
|
|
47
|
-
Right now, the new process for setting up configs is more complex, and not everyone wants to go through it. What developers really need is a simple and direct replacement for the existing Airbnb configs, a solution that keeps everything working the same way as before, with no rule or behavior changes. It should also make sure all packages used are updated to the latest versions.
|
|
48
|
-
|
|
49
|
-
In short, the goal is:
|
|
50
|
-
|
|
51
|
-
- No need to learn or adopt new config styles
|
|
52
|
-
- No changes in rule behavior or structure
|
|
53
|
-
- Easy to migrate by just changing the import path
|
|
54
|
-
- All packages should be latest
|
|
55
|
-
|
|
56
|
-
Here’s the way to use the **Airbnb legacy configurations** with the flat config format under `eslint-config-airbnb-extended/legacy`.
|
|
57
|
-
|
|
58
|
-
#### For [`eslint-config-airbnb-base`](https://www.npmjs.com/package/eslint-config-airbnb-base)
|
|
59
|
-
|
|
60
|
-
```ts
|
|
61
|
-
import { configs } from 'eslint-config-airbnb-extended/legacy';
|
|
62
|
-
|
|
63
|
-
// Equivalent to airbnb-base/legacy
|
|
64
|
-
export default [...configs.base.legacy];
|
|
65
|
-
|
|
66
|
-
// Equivalent to airbnb-base
|
|
67
|
-
export default [...configs.base.recommended];
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
---
|
|
71
|
-
|
|
72
|
-
#### For [`eslint-config-airbnb`](https://www.npmjs.com/package/eslint-config-airbnb)
|
|
73
|
-
|
|
74
|
-
```ts
|
|
75
|
-
import { configs } from 'eslint-config-airbnb-extended/legacy';
|
|
76
|
-
|
|
77
|
-
// Equivalent to airbnb/legacy
|
|
78
|
-
export default [...configs.react.legacy];
|
|
79
|
-
|
|
80
|
-
// Equivalent to airbnb/base
|
|
81
|
-
export default [...configs.react.base];
|
|
82
|
-
|
|
83
|
-
// Equivalent to airbnb
|
|
84
|
-
export default [...configs.react.recommended];
|
|
85
|
-
|
|
86
|
-
// Equivalent to airbnb/hooks
|
|
87
|
-
export default [...configs.react.hooks];
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
---
|
|
91
|
-
|
|
92
|
-
#### For [`eslint-config-airbnb-typescript`](https://www.npmjs.com/package/eslint-config-airbnb-typescript)
|
|
93
|
-
|
|
94
|
-
```ts
|
|
95
|
-
import { configs } from 'eslint-config-airbnb-extended/legacy';
|
|
96
|
-
|
|
97
|
-
// Equivalent to airbnb-typescript/base
|
|
98
|
-
export default [...configs.base.typescript];
|
|
99
|
-
|
|
100
|
-
// Equivalent to airbnb-typescript
|
|
101
|
-
export default [...configs.react.typescript];
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
## Packages Used
|
|
105
|
-
|
|
106
|
-
This configuration relies on the following essential packages:
|
|
107
|
-
|
|
108
|
-
- **[`@stylistic/eslint-plugin`](https://www.npmjs.com/package/@stylistic/eslint-plugin)**: Ensures fine-tuned styling rules for code formatting.
|
|
109
|
-
- **[`eslint-plugin-import-x`](https://www.npmjs.com/package/eslint-plugin-import-x)**: A powerful tool for managing and validating imports.
|
|
110
|
-
- **[`eslint-plugin-n`](https://www.npmjs.com/package/eslint-plugin-n)**: Enforces best practices for Node.js.
|
|
111
|
-
- **[`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react)**: Enforces React-specific linting rules and best practices.
|
|
112
|
-
- **[`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)**: Ensures proper use of React hooks.
|
|
113
|
-
- **[`eslint-plugin-jsx-a11y`](https://www.npmjs.com/package/eslint-plugin-jsx-a11y)**: Improves accessibility in JSX code.
|
|
114
|
-
- **[`typescript-eslint`](https://www.npmjs.com/package/typescript-eslint)**: Provides linting support for TypeScript codebases.
|
|
115
|
-
- **[`eslint-import-resolver-typescript`](https://www.npmjs.com/package/eslint-import-resolver-typescript)**: Ensures TypeScript compatibility for import statements.
|
|
116
|
-
|
|
117
|
-
## Strict Rules
|
|
118
|
-
|
|
119
|
-
The `eslint-config-airbnb-extended` package also offers a **strict mode**, which includes a set of stricter ESLint rules for **imports**, **React**, and **TypeScript**. These rules aren’t enabled by default, but if you want to improve the consistency and quality of your code even more, you can turn them on easily.
|
|
120
|
-
|
|
121
|
-
To enable it, you'll need to import the strict rules from the config like this:
|
|
122
|
-
|
|
123
|
-
```ts
|
|
124
|
-
import { rules } from 'eslint-config-airbnb-extended';️
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
Then, in your ESLint configuration (`eslint.config.mjs`), add these rules:
|
|
128
|
-
|
|
129
|
-
```js
|
|
130
|
-
export default [
|
|
131
|
-
// Your configurations
|
|
132
|
-
rules.base.importsStrict,
|
|
133
|
-
rules.react.strict,
|
|
134
|
-
rules.typescript.typescriptEslintStrict,
|
|
135
|
-
];
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
### What do these strict rules include?
|
|
139
|
-
|
|
140
|
-
**1. Strict Imports**
|
|
141
|
-
|
|
142
|
-
- Enforces a consistent and clean import order
|
|
143
|
-
- Differentiates between type imports and value imports
|
|
144
|
-
- and many more...
|
|
145
|
-
|
|
146
|
-
**2. Strict React**
|
|
147
|
-
|
|
148
|
-
- Requires `key` props in lists
|
|
149
|
-
- Sorts JSX props
|
|
150
|
-
- Disables `prop-types` (since TypeScript is the focus)
|
|
151
|
-
- and many more...
|
|
152
|
-
|
|
153
|
-
**3. Strict TypeScript ESLint**
|
|
154
|
-
|
|
155
|
-
- Disallows `@ts-ignore`, prefers `@ts-expect-error`
|
|
156
|
-
- Bans `any`
|
|
157
|
-
- Disallows non-null assertions (`!`)
|
|
158
|
-
- Encourages using Nullish coalescing operator (`??`) and optional chaining (`?.`)
|
|
159
|
-
- and many more...
|
|
160
|
-
|
|
161
|
-
## FAQs
|
|
162
|
-
|
|
163
|
-
### Difference between Extended vs Legacy Config
|
|
164
|
-
|
|
165
|
-
**Legacy Config** – Designed to be a one-to-one replacement of the original Airbnb ESLint configurations using the new flat config format. Its main purpose is to maintain backward compatibility by continuing to use the same packages as the original setup. For more details, see the [Legacy Config](https://github.com/NishargShah/eslint-config-airbnb-extended/tree/master/packages/eslint-config-airbnb-extended#legacy-config).
|
|
166
|
-
|
|
167
|
-
**Extended Config** – A modern ESLint configuration based on `eslint-config-airbnb`, built from scratch with updated rules, replacement of deprecated ones using community recommended alternatives, and the adoption of the latest best-practice packages. For more details on the packages used, refer to the [Packages Used](https://github.com/NishargShah/eslint-config-airbnb-extended/tree/master/packages/eslint-config-airbnb-extended#packages-used) section.
|
|
168
|
-
|
|
169
|
-
### How to Configure for a Monorepo?
|
|
170
|
-
|
|
171
|
-
If you're working in a monorepo setup, it's recommended to run the installation command in the specific sub-folder where you want the configuration. Alternatively, you can choose to skip the package installation, and we'll provide a customized set of commands based on your selection, allowing you to install it according to your preferred method.
|
|
172
|
-
|
|
173
|
-
### Why did we switch from `import` to `import-x`?
|
|
174
|
-
|
|
175
|
-
The switch from the [`import`](https://www.npmjs.com/package/eslint-plugin-import) ESLint plugin to [`import-x`](https://www.npmjs.com/package/eslint-plugin-import-x) is due to several improvements. `import-x` provides **better TypeScript support**, ensuring more accurate linting for TypeScript projects. It is **actively maintained**, with regular updates and bug fixes, unlike the original plugin. It also has **fewer issues reported on GitHub**, indicating better stability. Additionally, `import-x` offers a **more performant and lightweight version**, reducing linting overhead and improving build performance. These factors make `import-x` a more reliable and efficient choice.
|
|
176
|
-
|
|
177
|
-
### Why are `plugins` separated from the `config` in this package?
|
|
178
|
-
|
|
179
|
-
The main reason for separating `plugins` from the config is to avoid a common issue developers face when extending multiple ESLint configurations. Specifically, many run into the error:
|
|
180
|
-
`Config "package": Key "plugins": Cannot redefine plugin "key".`
|
|
181
|
-
Unfortunately, there's no built-in way to resolve this conflict when plugins are directly included within shared configs.
|
|
182
|
-
|
|
183
|
-
This package combines multiple ESLint configurations (see [Packages Used](https://github.com/NishargShah/eslint-config-airbnb-extended/tree/master/packages/eslint-config-airbnb-extended#packages-used)), and based on experience, it's better to keep `plugins` separate. If you'd like to use the recommended plugins, you can import them directly from the `plugins` export provided by the package.
|
|
184
|
-
|
|
185
|
-
By doing this, you can safely use this package alongside official ESLint configs without running into plugin redefinition issues.
|
|
9
|
+
> Check out the package docs here: https://eslint-airbnb-extended.nishargshah.dev/config/installation
|
|
@@ -4,7 +4,7 @@ const typescript_eslint_1 = require("typescript-eslint");
|
|
|
4
4
|
const utils_1 = require("../utils");
|
|
5
5
|
const typescriptEslintPlugin = {
|
|
6
6
|
name: 'airbnb/config/plugin/typescript-eslint',
|
|
7
|
-
files: utils_1.
|
|
7
|
+
files: utils_1.allFiles,
|
|
8
8
|
plugins: {
|
|
9
9
|
'@typescript-eslint': typescript_eslint_1.plugin,
|
|
10
10
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "eslint-config-airbnb-extended",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.0",
|
|
4
4
|
"description": "Eslint Airbnb Config Extended",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"eslint",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"eslint airbnb typescript",
|
|
18
18
|
"eslint airbnb extended"
|
|
19
19
|
],
|
|
20
|
+
"homepage": "https://eslint-airbnb-extended.nishargshah.dev",
|
|
20
21
|
"bugs": {
|
|
21
22
|
"url": "https://github.com/NishargShah/eslint-config-airbnb-extended/issues"
|
|
22
23
|
},
|
|
@@ -103,6 +104,9 @@
|
|
|
103
104
|
"optional": true
|
|
104
105
|
}
|
|
105
106
|
},
|
|
107
|
+
"engines": {
|
|
108
|
+
"node": ">=16.0.0"
|
|
109
|
+
},
|
|
106
110
|
"scripts": {
|
|
107
111
|
"prebuild": "pnpm check:updates && rimraf ./dist",
|
|
108
112
|
"build": "tsc -b",
|